Sometimes I think that I am debugging like the old IE6 days where I had to put
alert in every line of the code to find out where the actual issue is. If you also came across the same, you know the pain.
Lately, Google chrome came for the rescue. They relieved this pain by introducing remote debugging support in chrome mobile. Chrome remote debugging was a real life saver, where we get the same chrome devtools connected to the webpage in mobile browser. And, We can debug like the way we do it in desktop browsers.
That is Awesome!
But still the problem of Android browser debugging remains the same. Chrome remote debugging can be connected to the webpages loaded inside Chrome browser ( mobile ) only. If we need to debug default browsers, we have to use any other debugging tool. Here, in this post, we’ll discuss about another wonderful remote debugging tool known as Weinre.
Weinre is available as an npm package. If you have configured npm in your system, let’s install weinre globally with the below command:
npm -g install weinre
You can find more instructions installing weinre HERE.
Now run the command
weinre --help to see all available options.
To run weinre in default configurations, use the command
Access localhost in mobile browser
The easiest way of accessing the dev machine is by using the IP address and port. Let’s say the application is running on port 9002. To open it in the browser, first, we have to find out the IP address of the system where the application is running. Use the command
ifconfig in OSX/Linux and
ipconfig in Windows to find out the IP address. Now navigate to the browser window and use the IP_ADDRESS:PORT to see the running application.
Accessing the local hostname in mobile devices is our first hurdle. I have found an excellent article about how to solve this issue. I don’t want to explain all of those here, so let’s follow this link:
Once you’re done, come back to check the next section.
Let’s start remote debugging
Let’s run weinre using a custom port and your IP address.
This will start the weinre server in port 1234.
Open the link
http://192.168.2.109:1234 in your browser. We’re mainly interested in the following links:
Add the target script to which-ever page you need to inspect and use the debug client user interface link. The debug client is very similar to the Chrome dev tools.
HTTPS Support ?
As of now, weinre target script doesn’t not support https. The problem with this is that if your site runs on https protocol and if you need to inject the weinre target script in any of the pages, the browser will block the script. Because the weinre script is loading through http protocol and the browser will not block any http resources if your website is https.
We can fix this problem by using another service called ngrok. Basically, ngrok is a tunneling proxy where it exposes a tunnel to any web server and port as a subdomain. Since ngrok supports https, it is fairly easy to get the weinre server tunneled through ngrok with htttps.
Let’s see how this is done:
Start the weinre server
Run ngrok pointing to the weinre server
This will output like this:
https://74bd4fb7.ngrok.com is your https tunnel to weinre server. Open your browser and navigate to
192.168.2.109:1234. Follow the set-up instructions given in that page after replacing
https://74bd4fb7.ngrok.com for https support.
target-min-script.js. To do that, find out the weinre path first:
Now in the editor, search for the following text
Replace it with the below one and save.
Now you can use weinre in https pages.
Weinre is really a powerful tool for remote debugging. Here in this guide, we saw how to configure and use weinre to debug local websites. I hope this will help someone who would be struggling to work with Android browsers. I would like also mention that there is an online hosted weinre server available. You can check it out http://debug.build.phonegap.com/. The only drawback is that it will not support https pages.
Thanks for reading. Let me know the feedback and any comments.