Inspect element and JavaScript console on Android and iOS devices with weinre

From time to time a developer needs to run some JS, or to check out the source of a page that is loaded, on a tablet or a smartphone. The first thing you’ll notice that Chrome has no developer tools on mobile. Fear not, remote access is possible.

Enter weinre (WEb INspector REmote). With weinre you’ll get the Chrome Developer Tools on your desktop - for every device that opens your specific web page.

Lets install and start weinre, and we’ll see how it works.

Installation: #

First you’ll need node and npm installed. After that, install weinre with

npm -g install weinre

Running: #

After weinre is installed, start the ‘server’ on your machine with

weinre --boundHost 127.0.0.1 --httpPort 9090

Change the IP address and the port to your needs.

And one last and very important step, include the following snippet in your relevant web app template:

<script src="http://127.0.0.1:9090/target/target-script-min.js#anonymous"></script>

This little JS script helps the web app loaded on the device to be accessed from your desktop machine.

How does it work? #

When the web app is loaded, the script connects with the ‘server’ and provides the information needed to the embedded Chrome Developer Tools.

Next, go to http://127.0.0.1:9090/client/#anonymous and under Targets you’ll get a list of devices that have opened the page with the JS script included.

Now, select a target, and then click the tab that you need (Elements, Console, etc…).

The following screenshot (from the weinre page) is an example with the Elements tab opened:

Alternatives? #

Of course there are alternatives. Most popular and feature complete is Adobe Inspect, but I found it to be too heavy. Too much setups and apps have to be installed to get it working. With weinre it’s just the server and a single JS import statement in the web app template.