Debug tools in Chrome for Android to open new horizons for web developers
Even though Chrome for Android is still in its beta stage, it has already attracted a fair share of users towards it with alot of relatively cool features for individuals and developers alike. Once the Android SDK (Software Development Kit) is installed properly, a live view of a mobile site will appear on your device while you are using the built-in tools for editing and developing Chrome on your desktop PC which means that if you hover over an element in the document inspector on your desktop, it automatically gets highlighted on the phone itself.
In the past, developers would have had to make changes, save them, and host the html files on a local server to view from their smartphone but not anymore. The fact that real-time changes can be made using the same tools used on a desktop PC is actually a pretty big deal and one of the very few unique features of Chrome for Android which by far makes it stand out from the crowd specially in the eyes of developers.
To start debugging, you need to have the Android SDK and Chrome installed on your host machine and make sure that you have set up your mobile device for development. Then you need to perform a few simple steps:
- Connect your mobile device to the host using a USB wire. To communicate with the Android device, you need the Android Debug Bridge (adb), a command line tool included in the Platform Tools of the Android SDK. For convenience, add Platform Tools (
<sdk>/platform-tools/) to your
PATHenvironment variable. Please make sure that your device is listed when you issue the
adb devicescommand. If not, please check that you have USB debugging enabled on your device.
- On the mobile device, launch Chrome. Open Settings > Under the hood > Developer tools and check the Enable USB Web debugging option as shown here:
- Issue the following command in the console on your host machine to enable port forwarding:
adb forward tcp:9222 localabstract:chrome_devtools_remote
- Open desktop Chrome and navigate to
- You will be presented with the list of links for pages currently open on your mobile Chrome. Click the desired link. For example:
- You can now start debugging and profiling mobile content in the Developer Tools on your desktop.
Source: Android Central