The way your web content behaves on mobile can be dramatically different from the desktop experience. Remote debugging with Chrome DevTools lets you debug live content on your Android device.
In this chapter, we will learn how to use the Chrome DevTools to debug the site live on the Android device and how to Inspect elements of Mobile Web Application.
Chrome DevTools helps us in the following:
- Debugging websites in browser tabs.
- Debugging WebViews in native Android apps.
- Screencasting live to your development machine from your Android device.
Requirements
To begin with Chrome DevTools, you need:
- Chrome 32 or later installed on your development machine.
- A USB cable to connect your Android device.
- For browser debugging: Android 4.0+ and Chrome for Android on the device
Note: Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. For best results, use Chrome Canary (Mac/Windows).
Prerequisites
Discovering devices in Chrome
Once the device is connected with the machine, do the following steps:
1) On the desktop Chrome browser, navigate to chrome://inspect and confirm that Discover USB devices is checked.
Note: You can also get to chrome://inspect by selecting Chrome menu > More tools > Inspect Devices.
Note: There can be an alert prompts you to allow USB debugging, just select OK to move forward.
2) Now open a Chrome browser on the device and after that refresh the Chrome window on the machine. This will display the entry of the opened Chrome browser on the device. Type www.toolsqa.com in the space given and click on Open.
3) Notice the website is opened in the device now.
4) The same is displayed on the Chrome browser on the machine as well. Now click on the inspect link.
5) Inspect, will allow to investigate the HTML elements of the website opened on the connected device. A new instance of Chrome DevTools will launch on the computer. From this instance, you can interact with the selected browser tab on your device in real time.
Note: When mouse over an element in the Elements panel, DevTools highlights the element on your device. You can also click the Inspect Element icon in DevTools and tap your device screen. DevTools highlights the tapped element in the Elements panel.
How to do Screencasting in Chrome
I know its hard to shift your attention between screens but Chrome Screencast feature displays your device’s screen right alongside DevTools on the machine. But not just this, interaction with the content on the attached device from the screencast is also a cool feature.
Start a screencast session
To start screencasting, click the Screencast 
icon in the upper right corner of the remote debugging DevTools window.
The Screencast panel opens on the left and displays a live view of your device’s screen.
Interact with your device using the screencast
When you interact with the screencast, clicks are translated into taps, firing proper touch events on the device. Keystrokes from your computer are sent to the device, so you can avoid typing with your thumbs.
Other DevTools work with the screencast too. For example, to inspect an element, click the Inspect Element 
icon and then click inside the screencast.
