How to inspect an element on Android devices
By Jash Unadkat, Technical Content Writer at BrowserStack - March 24, 2020
Whether during development or while casual web surfing, whenever a web-developer encounters a UI bug, the first thing they are likely to do is to 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. But how can one inspect elements on Android?
This article discusses multiple methods to answer that question
Using Developer Tools available in Chrome & Firefox
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 (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.
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 2000+ real devices and browsers to test on. This makes the process of cross browser testing very convenient as QAs get the ideal environment to test their web applications in real user conditions.
Teams can handpick combinations of real devices, browsers and operating systems. For example, a user can choose to test their website on a real Samsung S10-Chrome-Android combination.
The image below offers a glimpse of the infrastructure available on BrowserStack.
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.
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.