SeanTierney

Using Firebug on Mobile Safari

May 9, 2013 Interactive Design / Development 0

If you are a developer for all things interactive, like I am, you may have had requests from clients to create a responsive website that works on just about any device a user may have in their pocket, bag, or even buried in a closet. You may have also run into issues with trying to get things working perfectly in one browser or another, but especially on Mobile Safari. Well, there is a tool to help you out…Firebug!

“But Firebug is an extension for full fledged browsers, running on your computer!” you say…well, I am here to tell you and more importantly SHOW YOU that you can run it on your iOS device to help you make sense of those annoying div’s that just don’t want to do what you tell them to do.

So here we go…

Step 1.
Open http://seantierney.com on your iPad and click on the bookmark icon to the left of the URL bar

1

3

Step 2.
Rename the bookmark you are about to create to “Firebug”

4

Step 3.

Copy the following code snippet:

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');

Step 4.

Open the bookmarks window, and press “Edit”, then select the “Firebug” bookmark that you created above

5

6

Step 5.

Remove the original bookmarked URL that you find in the second field, and paste in the code snippet that you copied above

7

8

9

10

Step 6.

That’s it! Open a page on your iPad and then click on the bookmark to start Firebug. Select and inspect items like you would on your desktop.