How to Install Firebug in Major Browsers and iOS Devices

By . in Web Design. Updated on .

Firebug is a Firefox add-on with cool tools to inspect web page element, debug and develop web pages. There is, however, no way you can have these tools on other web browsers apart from Firefox.

Development of a similar tool for other browsers may take hard work, but it will be of great help if you could get Firebug to work on other browsers too, considering that everyone has their preferred browsers.

Well, here is where Firebug Lite comes in to solve your needs. Firebug Lite is a simpler version of Firebug but it can be used on Opera, Chrome, Safari, iPad and iPhone while retaining similar options and features.

Installing Firebug Lite on Opera, Safari & Chrome

With Firebug Lite, there isn’t any installation necessary. Written in JavaScript, you can bookmark a Firebug Lite link and it will be ready for page inspection. So what you need to do is to simply bookmark the link below (you can also drag the link to your browser’s bookmark bar).

Firebug Lite

If you are using Chrome browser, the bookmark should appear as below, if your bookmark bar is visible.

Firebug Bookmark

That’s it, your Firebug Lite should now work when you need to use it.

Using Firebug Lite on Opera, Safari & Chrome

Now you can use Firebug Lite to inspect practically any web page. For this example, we will use Wikipedia.org.

When the web page is loaded, click on the Firebug Lite bookmark you saved earlier and you will see a consol box appear at the bottom of the web page.

Firebug Consol

If we close up, this is what you will see on the bottom left of the page.

Firebug Consol Closeup

Now you can see the (+) and the (-) at the starting point of many lines. The (+) means there are more lines closed under the one-liner of html, and if you highlight the line, you will see which part of the page it represents.

Highlighted lines

But if you want to make it easier to spot the lines represented by any text, photo, link or any other elements on the web page itself, click on the ‘Inspect’ button.

Inspect

Now you can hover your mouse cursor to any part of the elements available on the web page, and you will see the html line highlighted. This makes it easier for you to do some inspection.

Inspect Highlighted

Installing Firebug Lite on iPad or iPhone

Bookmarklets doesn’t really go well with iPad and iPhone. To have Firebug Lite installed on iPad and iPhone, here’s how:

  1. Bookmark this page on your iPad or iPhone.
    2. Firebug Bookmark iPad
  2. Rename the bookmark to "Firebug".
    3. Firebug Bookmark Rename
  3. Select and copy all the script below 
    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. Go to bookmark option and press "Edit". Then select "Firebug" bookmark.
    5. Firebug Bookmark Edit
  5. Remove the original URL and paste the bookmarklet.
    6. Firebug Bookmark Paste
  6. Choose “Done” on your keyboard.
  7. Now, try to open any website and select "Firebug" bookmark and you’ll see a functioning Firebug at the bottom of your iPad screen.
    8. Firebug Bookmark Paste

Conclusion

Firebug Lite is by far good enough to do quick page inspection. You can view html, css and any script used to build the webpage. Although Chrome has its own Web Developer extension, Firebug Lite does not disappoint by a mile.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail