Debugging web pages remotely using a PlayBook tablet

In  a previous post I explained how you can use weinre to remotely “debug” web pages that run on your mobile devices. If you are familiar with weinre then you also know its biggest limitations: no JavaScript debug support and CSS styles introspection.

Now there is no need to be sad if you happen to have a PlayBook device. If so, then you are back in business. What do I mean by that? I mean full access to Web Inspector/Developer Tools goodies while browsing web pages on the PlayBook tablet. Yes, including JavaScript debugging and CSS introspection.

A question or a doubt might pop in at this point … how this could this be possibly useful for developing web applications that run on mobile devices when Android and iOS devices have the greatest market share? Relax my friend, no need to lose your faith :D Because iOS, Android, and PlayBook default browsers are all based on WebKit. Although there are some differences between them I think they are close enough that you can get lots of value out of using the PlayBook device as the “debug” mobile platform. It also performs fine, at least today. I mean it is not too far off from the latest mobile phones or tablets.

So let me guide you through the steps you need to complete if you want to remotely debug web pages using a PlayBook.

1. Get a PlayBook

The most important step is actually getting a device :D. You might be able to buy a used one for a good price. I think it is a good investment if you plan to (or  you already) do lots of mobile web development.

2. Connect the PlayBook and your computer to the same WiFi network

This is another important step. The PlayBook browser has Web Inspector support. While you can use it directly on the device I bet my 2 cents that it is far more convenient to use it on your computer. So this is the reason you need to connect them to the same network

3. Enable Web Inspector on your PlayBook

Set up a password for your PlayBook if you haven’t already set one (Settings > Security > Password). Then open the browser application and go to Settings. Select Privacy & Security and then enable Web Inspector (it will ask for your password when enabling this option).

Once you enter the password a message window will give you the IP and port number of the PlayBook Web Inspector. Write down this info because you will need it.

4. Load the page you want to debug/profile

Now it is time to get serious. So open the web page you want to debug in the PlayBook browser. Please note that it is possible to open up a web page hosted on your computer web server (remember that the PlayBook and your computer are connected to the same network; so if you have a web server running on your computer you will be able to access it from your tablet).

5. Start Web Inspector

You can do this in two different ways. If you are a masochist you could use the Web Inspector on the PlayBook: open a new tab in your browser and type in this URL http://localhost:1337. You will see a page that has an entry for each opened tab in your browser (the URL must be opened after you enable Web Inspector in order to be listed). Here is an image to get an idea:

And here is the Web Inspector running for the first tab on my PlayBook on the PlayBook if you know what I mean:

But probably the sane way to do it is to run the Web Inspector remotely on your computer. So open a browser and type in the URL you got from Step 3. Once it is loaded you can select the tab you want to debug. And once you select the tab the Web Inspector should be displayed. From now onit is business as usual: you can access Elements, Resources, Scripts, Timeline, Profiles, Storage, Audits, and Console. You can debug the JavaScript code, audit the page for performance, and all sorts of magical things.

Here are screenshots with the Web Inspector running on my machine and the page I am debugging on the PlayBook. In the Web Inspector I selected a DIV element and you can see that the element was highlighted in the PlayBook browser.

Word of warning: it might take a while for the Web Inspector to initialize on your machine. Be patient and don’t give up.

Conclusions

If you are not excited by this amazing workflow then there must be something wrong with you (or you are not a web developer and then it is OK :D). Again it might not be the perfect solution. I mean in a perfect world you’d have something similar for each mobile platform. Until then don’t whine too much and do your work with what you got!

Here is a screencast that takes you through the setup steps of the PlayBook Web Inspector and shows a simple debugging session. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *