How to Use Firebug on Your iPhone and iPad

Posted, 6th March 2015

While working on a site this week, I noticed fonts were appearing different on my iphone than what I seeing on my desktop computer. Wouldn’t it be fantastic if you could use firebug on your iphone so you can check what is actually going on in your mobile browser? Well, you can!one1!!! Big thanks to Joe Hewitt the creater of Firebug, it has helped make my job and may others jobs easier for years.

Here is how you do it.

1. First thing is first, load the page up on your device and bookmark it.

2. Rename the bookmark to ‘Firebug’

3. Copy this code

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. Edit the Firebug bookmark and remove the url

5. Paste the code in its place and save the bookmark.

6. Whenever you want to use check out what is going on with your CSS on a site, just click the Firebug bookmark!

iphonefirebug

That should be it. If it helped let me know in the comments.