Web content behaves differently on mobile than on desktop. While automating mobile web application most of the time I have faced lots of problem in identifying the element locators to do the actions. Here we have the Chrome DevTools for inspect element of Mobile Web application in Android and Safari Web Inspector for inspect elements of Mobile Web application in iOS.
Inspect elements using Chrome DevTools
1. Chrome 32 or later installed on your development machine.
2. A USB cable to connect your Android device.
3. Android 4.0+ and Chrome for Android.
1. Connect Android mobile device to PC (make sure that Android Debugging enabled in Android Developer Option in device).
2. Open chrome browser in Android mobile device.
3. Open below URL in Desktop chrome browser:
You can see the connected device in Chrome Developer Tool page.
4. Enter the URL which you want to automate and inspect elements. URL must be entered in “Open tab with url” edit box, then tap on ‘open’ button and you can see that the specified URL gets open in Device browser.
5. Click on ‘inspect’ link and it will open another window to inspect the elements. Once it gets loaded you can start inspect elements and go ahead automation.
Inspect elements using Safari Web Inspector
1. Open Safari on your iOS device.
2. Connect it to your computer via USB.
3. Open Safari on your computer.
4. In Safari’s menu, go to Develop and, look for your device’s name.
5. Select the tab you want to inspect.