You can debug mobile web sites with the full suite of Chrome Developer Tools running on a desktop browser that's connected to your phone via USB. View and change HTML code and styles until you get a bug-free page that behaves perfectly on the phone or tablet.
The following video demonstrates the debugging process:
To start debugging, you need to have the Android SDK and Chrome installed on your host machine (where you'll run Chrome Developer Tools) 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 cable. 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 yourPATHenvironment variable. Please make sure that your device is listed when you issue theadb devicescommand. If not, please check that you have USB debugging enabled on your device. - On the mobile device, launch Chrome. Open Settings > Advanced > 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
localhost:9222. - You will be presented with the set of thumbnails for pages currently open on your mobile Chrome. Choose the page you need to debug.
- You can now start debugging and profiling mobile content in the Developer Tools on your desktop.



See the Chrome Developer Tools documentation for more information.


