BlackBerry OS 7 Web Inspector: Easily Debug BlackBerry Websites & WebWorks Browser Apps

Web Inspector BlackBerry 3 Web Inspector

I use Web Inspector all the time to work on BerryReview and other projects on my desktop and I was really glad to see it included on the BlackBerry PlayBook. I knew that RIM managed to stick it into BlackBerry 7 and I finally got a chance to use it this weekend. In case you have never heard of Web Inspector before then here is a brief explanation. Web Inspector is a feature in WebKit (usually only desktop clients) which allows you to view and edit the page source, CSS, live DOM hierarchy, script debugging, profiling and much much more. For example, you can see what it would look like if you changed the text color or you can navigate what your script has done to the DOM.

 Web Inspector

Back to the topic at hand. I needed to debug a JavaScript error on the mobile version of BerryReview along with an issue with our CDN that did not show images or styling sometimes on BlackBerrys. I had tried debugging this issue on my Bold 9930 when it launched but the Web Inspector did not work that well in the early builds.

Web Inspector2

Now on my BlackBerry Curve 9350 I have to say Web Inspector is the easiest way to debug and test any mobile web apps or websites for BlackBerry. It is essentially like having the Chrome or Safari WebKit based Web Inspector tool for BlackBerry. From what I understand it even works with the BlackBerry 7 simulator so you don’t need a BlackBerry 7 device. There are a few tricks to get it running so read below:

 Web Inspector BlackBerry 3 Web Inspector BlackBerry 4

To setup Web Inspector on your BlackBerry 7 device:

  1. Fire up the BlackBerry browser
  2. Hit the menu button and select options from the menu
  3. scroll down to where it says “Enable Developer Tools” and click the checkbox
  4. Hit the menu button and select save
  5. You will now need to hit the menu button again and select Developer Tools –> Enable Web Inspector
  6. You will then get a popup that shows you what the IP address will be fore your remote Web Inspector session
  7. You will then need to fire up Safari (Chrome sometimes works) and type in that exact URL including the IP address and port number
  8. You will then see a list of the open tabs on your BlackBerry Browser in terms of links
  9. Click on any of these tabs to fire up Web Inspector! Just make sure to turn it off when you are done and be aware that anybody on the same Wi-Fi network as you can access these pages and the data on them while it is running!

Web Inspector BlackBerry 2 Web Inspector BlackBerry 1

Let us know if it works for you! I am amazed how responsive it is and how fast it is. Even when you hover over elements on the DOM it hovers them on the BlackBerry browser. Changes are instant. Great work from the Torch Mobile team on this one!

Web Inspector4

Web Inspector3

BlackBerry© is a registered Trademark of BlackBerry Limited. BerryReview is in no way affiliated with BlackBerry Limited though sometimes their lawyers send us love letters...

Copyright © 2007-‘2024’ BerryReview LLC