PlayBook's LEET Web Inspector

I’ve been playing with my new BlackBerry PlayBook for a day now and by far the most impressive feature I’ve come across is the PlayBook Browser’s web inspector. It’s awesome. RIM really raises the bar for every other mobile OS I’ve tried developing for.

Trying to create and design mobile HTML5 apps has always been a pain in the ass to say the least. In iOS you’re basically flying blind. You can use Safari with a small window on the desktop to kind of simulate mobile safari but it’s just not the same–good luck debugging touch interaction. The PlayBook on the other hand gives you full access to the same WebKit web inspector we’ve come to love on the desktop. And it’s fully interactive.

To enable it you have to set up your PlayBook for development: Go to the PlayBook device’s Settings > Security and then select Development Mode. You’ll need to password protect the device to enable dev mode. Next, open the browser and swipe down from the top edge and select the browser’s Settings > Privacy and Security > Enable Web Inspector.

When enabled it will present you with an IP address. Write that down. Also, if you’re a true web developer you can probably appreciate RIM’s choice of port number.

NOTE: with the web inspector enabled anyone on the same network will be able to access the inspector’s URL and thus be able to see the pages you’re looking at. Keep it disabled on a public network and don’t browse your banking site.

Now go to your desktop’s web browser (which of course has to be on the same WiFi network) and enter that url. You’ll be presented with a link to the current browser page which will bring up the WebKit web inspector.

Click and inspect anything your want content and keep an eye on your PlayBook, it will reflect any changes you make on-the-fly just the way your desktop web browser would. Now that some good stuff.