If you’re a developer and build websites, the most irritating thing that you would have come across is the abnormal behavior of websites on mobile devices. Another addition to this irritation is the inability to inspect and test HTML/CSS on the Android browser, just like we can do on a desktop/laptop.

Thanks to Google Chrome for a solution to this problem. We now have the facility to inspect elements on Android’s Chrome browser. All you need is to connect your Android device to your computer and you can have a live screencast of your Android browser’s screen on your development machine.

Follow the below tutorial to inspect and debug live content on your Android device from your computer.

Requirements

• Chrome 32 or later on your computer.
•  Android 4.0 or later with Chrome on your device.
• USB Drivers installed on your computer. (Usually taken care by windows). If you need help with USB drivers, navigate to help here.

Step 1 – Connect to Android device

1. On your Android device, go to Settings > Developer Options > Enable USB Debugging. If you’re unable to find Developer Options on your device, see here.
2. On your computer, open Chrome and sign in with your Google account. Please note, remote debugging does not work with Guest Mode or Incognito mode.
3. Right Click on the browser screen and select Inspect(Ctrl + Shift + I).
4. Click on the three dots icon on the top-right corner of Inspect Element’s window and navigate to More Tools > Remote Devices
5. Make sure that the Discover USB Devices checkbox is checked.
6. Connect your Android device to your computer using a USB cable. If this is your first time connecting your Android device to your computer, your device shows up under Unknown, with the text Pending Authorization below it.
7. If your device is showing up as Unknown, accept the Allow USB Debugging permission prompt on your Android device and wait till it shows Connected.

Now you’re all set, ready to inspect and debug live content from your Android device.

Step 2 – Debug content on your Android device

1. Open Chrome browser on your Android device.
2. In the Remote Devices window, already opened on your computer, click on the tab that shows your Android device model number.
3. Type the URL in the box next to New Tab, and click Open. The page opens up a new tab on your Android browser.
4. Click Inspect next to the URL that you just opened. A DevTools window opens up. You can now proceed to make changes which will be displayed on your Android browser as well as the window you’ve opened on your computer.

Navigate here to see the source of this post.