Posted by Melissa Penta on December 22, 2011

How to use Firebug on your iPad and iPhone

One of the toughest obstacles when debugging your code is not being able to update it live on your browser and see what is going on when it is going on. If you are a developer, you most likely heard of the life saving tool called Firebug – a plugin for Firefox (and Chrome also has a Lite version) where you can inspect, debug and change code on the fly. But did you know that you can use firebug on your iPad and iPhone? Martin Kool shares his technique for using a javascript bookmarklet to open Firebug right on your Safari browser. I believe that web development debugging for the iPad just got easier.

Here is how you do it (from martinkool.com):

1. Surf to this page on your iPad or iPhone and bookmark it
2. Rename the bookmark to “Firebug”. As you can see, the URL is uneditable right now
3. Tap on this textarea
   javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,’script’):F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F[e](‘head’)[0]||F[e](‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,'setAttribute’,'getElementsByTagName’,'FirebugLite’,’4′,’firebug-lite.js’,'releases/lite/latest/skin/xp/sprite.png’,'https://getfirebug.com/’,'#startOpened’);
4. Tap it again, choose “Select All” followed by “Copy”
5. Edit the Firebug bookmarklet, remove the URL and paste the bookmarklet
   Choose “Done” (on the virtual keyboard) and you’re all set

Opening the bookmarklet on any webpage should bring up the familiar plugin at the bottom of your screen.

Check out the original post from Martin Kool

Topics: development, iPad, iPhone, mobile, technology