People always ask me why do i love Android so much. Here’s why, as a Web developer i find the web development and debug tools built into Google’s Chrome browser just plain amazing.
One of the features i love most is: remote debugging of web pages on your mobile phone. If you are a web developer you will have no doubt made use of the Google Chrome DevTools.
I am going to show you how to debug your web pages on your mobile phone via usb.
The result should be something like this…
You should see those majestic guides and tool-tips provided by the DevTools on you mobile, awesome i know so lets get going.
Before we begin
Make sure you have the required manufacture drivers for your particular mobile phone installed on your pc. If its a Samsung download KIES, or in my case a Huawei so i had to get HiSiute that should get you drivers you need. Bulky software i know but for the brevity sake bare with me and lets continue at this point you should have your mobile phone plugged in via USB…next
Install Android SDK
- Download the Android Developer Tools (ADT) bundle. It provides you with the Android SDK out of the box. Once you’ve downloaded the ADT, unzip it to a directory on your system.
- You should have two folders eclipse and sdk.
- You folder structure looks like this (may differ depending on where you choose to place files)
- Within SDK folder you must drill down to a folder called ‘platform-tools’
- Within ‘Platform-tools’ there is executable called ‘adb.exe’ also known as the Android Debug Bridge aka ADB Bridge.
– The ADB Bridge facilitates the communication between your device and the web browser via the USB cable.
– You would think by simply double clicking this file would get you on your way…WRONG… You will see a command line tool pop open, run some commands then immediately disappear.
– What the Google help files don’t tell you is that you have to run (invoke) this file from the command line tool yourself in order to keep it open.
- So launch an instance of the windows command prompt and navigate to the adb.exe (as shown in the image below)
- Once you are in the platform tools folder type ”adb” as i have done below in green. This will invoke the adb.exe file
- If all went well you should see long list of helpful commands available to you within the ADB Bridge. Basically you’re ”IN” . Well done for getting this far.
- Next Ensure your device is listed as available by issuing the adb devices command. If not, check that you have USB debugging enabled on your device. see image below
- Next you need to enable port forwarding by issuing this command: adb forward tcp:9222 localabstract:chrome_devtools_remote
- On your development machine, open Chrome and navigate to localhost:9222 you will see a tabs or thumbnails of Inspectable pages
- Click a tab and you should get joy