How to inspect an element on Android device
By Jash Unadkat, Technical Content Writer at BrowserStack - May 24, 2021
Whether during development or while casual web surfing, whenever a web developer encounters a UI bug, the first thing they tend to do is inspect that specific web element. Inspecting an element helps developers view and edit the HTML and CSS scripts of a specific web page on their personal screen without making any permanent changes.
Any UI bugs on a website appearing for a specific device can be easily troubleshot using the inspect element feature. Given the popularity of Android among users, developers must know how to inspect elements on Android phones or other devices.
This article discusses multiple methods on how to inspect elements on Android devices. This is a crucial part of Android testing. It is also important for learning how to inspect elements on mobile devices.
Using Developer Tools in Chrome & Firefox
Note: This method allows users to inspect elements on their desktop browsers using an emulator. In order to inspect elements on real Android devices on the cloud, use the second method.
Both Chrome and Firefox provide the feature of Device Simulation in their DevTools.
Listed below are the steps to inspect element on Android:
- Press F12 to start DevTools on the desktop browser (applicable for both browsers)
- Click on the Toggle Device Bar option
- Now from the available options choose an Android device
- Once the user selects a specific Android device, the mobile version of the desired website starts
- Developers can now start inspecting the website on the desired Android device from their desktops
Similar steps can be taken to inspect an element on an iPhone. One just needs to select the device accordingly.
Using Real Android Devices on BrowserStack Real Device Cloud
The web is highly fragmented into different browsers (mobile and desktop) and devices (mobile, tablets, desktops). Also, let’s not forget every browser has its legacy and latest versions. From a developer’s perspective, developing a web application that provides robust performance in a highly fragmented environment is a huge challenge.
In such cases, teams need access to a comprehensive testing infrastructure that enables them to test web applications on multiple devices and browsers.
BrowserStack is one such platform that provides developers and QAs with an ideal test infrastructure. BrowserStack’s real device cloud provides 3000+ real devices and browsers to test on. This makes the process of cross browser testing and cross-device testing very convenient as QAs get the ideal environment to test their web applications in real user conditions.
Teams can pick combinations of real devices, browsers, and operating systems. For example, if a tester is wondering how to inspect elements on Chrome-Android, they can simply sign up for free and choose that particular browser-device combination on BrowserStack, as shown in the image below:
Here’s a look at BrowserStack’s real device infrastructure:
The following image demonstrates a sample live session of mobile browser testing on a real device-browser combination – Chrome on Google Pixel 4.
Teams also get instant access to features like:
- DevTools for real-time inspection of web elements
- Device rotation features to test Portrait and Landscape views.
- Integrations with popular bug reporting tools like Jira, Trello, and Slack
- Geo-location testing to test the behavior of websites in different geographies
Explore the full range of features for mobile testing on BrowserStack.
For a comprehensive understanding of how to inspect web pages in mobile devices, remember to also peruse through How to inspect an element on iPhone.
The methods explained above will help developers and QAs to resolve critical UI bugs faster. Testing on platforms like BrowserStack will ensure that web applications are robust and market-ready.