Geek Yogi

Remote Web Debugging - Chrome on Android

I always have looked forward to Chrome, my favorite browser. Apart from being an awesome browser for a normal user, it has so much to offer than Web Development alone.

I was extremely happy to know that it also exists for Android (ICS). Chrome (Beta) is a browser from another world. You can save pages offline and Sync everything, even the open tabs, to and fro - for eg.

Recently added feature called Web Debugging is what made me write this post. Chrome Beta allows you to Debug open Web Pages on your Android right into your browser.

Following is the steps you would follow for having a glimpse of what it looks like

1. Get Chrome Beta installed on your device. If your device is not supported, booo! this post is not for you

2. Head over to Terminal (any Shell Command Prompt) and put this command

adb forward tcp:8080 localabstract:chrome_devtools_remote

This assumes:

• You have installed Android SDK and / or you have adb commands available at the shell
• You can connect to the device using adb, or can see the devices by issuing adb devices

3. Head to Chrome on Mobile => Settings => Developer Tools and Enable USB Web Debugging

4. Open a website on Phone

4.5 Request the Site’s Desktop version if you want to

5. Open localhost:8080 (replace 8080 by whatever port no. you set in Step 2.) You will be greeted with similar page if everything was OK (Click on it to enlarge)

6. Start debugging. I think your eyes are familiar to this screen (Click on it to Enlarge):

You can also Audit the page for CSS optimization and other Performance

Now thats cool