Wednesday, December 11, 2013

Remote Debugging Mobile Browser Web Page Using Chrome Developer Tools

The WebKit Developer Tools are great for working on issues in Chrome and Safari. You could install a different set of developer tools in each browser. But what about debugging in mobile browsers?

That's where Weinre comes in. Weinre is a remote console, which allows you to access the WebKit Developer Tools in any browser or platform. It's especially ideal for mobile, since it provides a complete, robust testing suite on any device.

How to Setup Weinre?

First, you need to install a Node.js server on your local machine. You can learn more about installing Node from the Node website (http://nodejs.org/)

Next, install Weinre using NPM. From the command line, type the following:

npm -g install weinre

After the installation completes, start the Weinre server from the command line:

weinre --boundhost a.b.c --httpPort 3000 --debug true

There are lot of other options which you can find here: http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

Now instrumenting your web page to act as a debug target by adding a script tag to your test page.

To make your web page debuggable with weinre, add the following line to your web page:

<script src="http://a.b.c:3000/target/target-script-min.js">

You can now open a debug client by browsing to http://a.b.c:3000/client (or probably http://localhost:3000/client as well) on your desktop/laptop, then reload your newly instrumented web page on your mobile device, and see the two connect in the Remote panel of the debug client.

After you've installed Weinre, using it is a piece of cake. Simply use the Weinre console in Chrome, and you have access to all the WebKit Developer Tools. You can use the JavaScript console, DOM Inspector, Sources panel, Network panel, and more.