Debugging CSS in Mobile Phone Applications – live

This post is focused on helping you debug CSS styles and DOM for HTML Apps while they are executing on the device or simulator.

The instructions originate from a Windows 8, Visual Studio 2012 and Windows Phone 8 perspective, but the mechanisms apply to Android and iOS development too.

We are going to use an open source tool called Weinre to connect the device and your favourite Webkit web browser together. You’ll be able to highlight DOM elements, and change styles live in Chrome if you follow these instructions.

1. First you need the node.js command line.


Download and install the windows package.

2. Install Weinre

Go to your Windows 8 start screen, or the Start Menu and run the Node.js command prompt.

Node.js command prompt

You should see this window:


In the command prompt type

npm -g install weinre

You should see it getting a number of packages.

3. Prepare to launch Weinre (pronounced Winery by many)

Before we launch weinre, we need some information. A port number and IP/hostname.

For LAN debugging, use an ip address or a machine name, for outside of the LAN, you’re going to have to use a fixed IP or accessible DNS name. On a command line use “ipconfig” to determine your IPv4 address.

You can pick a port number (in my examples below I used 1234), and Windows will prompt you to unblock the port (but if you run into trouble, configure it manually).

4. Launch Weinre

In your node command prompt, type

weinre --httpPort xxxx --boundHost y.y.y.y

Where xxxx is the port number of your choice (8080 if you don’t specify it) and y.y.y.y is your IP address (or accessible DNS name).

You should see some output like this, and probably a firewall rule request will popup (ok it).


5. Prepare your HTML app

In your HTML App, put the following line of code whereever you like (preferably early).


6. Run your app in the windows phone emulator (or ADT/iOS Simulator)

7. To view your mobile app’s browser styles/DOM and change them via Chrome

Open Chrome and type in


You should be able to now use page inspection, Elements, console but not debug javascript. 😦

One thought on “Debugging CSS in Mobile Phone Applications – live

  1. Pingback: My website

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s