How To Install Firebug on IE, Safari, Chrome & Opera

Ads by Google

install firebug ieFirebug is a web developer’s best friend. It is a Firefox add-on that makes it very easy to debug and develop web pages. It provides you with a way to inspect page elements and perform many other functions as well. But what about Firebug on other browsers?

Installing Firebug on IE, Safari, Chrome or Opera

Firebug Lite makes it possible to install Firebug into any web browser! You should be able to use Firebug with Internet Explorer, Opera, Safari, Chrome, and any other browser that supports JavaScript. Firebug Lite is written in JavaScript, so you can include it on a webpage with the following code:

<script type='text/javascript'
     src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Or even better you can use this bookmarklet:

Firebug Lite

Firebug Lite provides you with the same inspections capability that regular Firebug does. You can click the Inspect button and hover over sections of the page to view the computed style and DOM properties for the tag selected.

firebug for ie

Ads by Google

The Inspect button functionality does seem to have some issues, so another way to inspect elements is to navigate the HTML tree. To do that, click the + signs on the tree view to expand the HTML, and when you see the element you want to inspect, click on the line of code for it in the HTML. On the right side, you can view the computed style and the DOM (Document Object Model) properties for the element.

Firebug Lite also has the JavaScript console, which allows you to execute JavaScript. You can write one line at a time, or in the expanded view you can write many lines at once and then run the code.

firebug lite - firebug for safari

Although you cannot edit the CSS for the highlighted element, Firebug Lite does provide a mechanism for editing CSS. It is somewhat of a “CSS console” for lack of a better term, where you can write your own CSS code and see what the results will look like.

firebug-lite-css-editor

Of course, with a name like Firebug Lite you can’t expect it to have all of the features of Firebug. Unfortunately, it does not include any JavaScript debugging (I can’t even imagine how difficult it would be to write a JavaScript debugger in Javascript). Unfortunately, you’re still stuck with whatever JavaScript debugging tools you can find for your browser. It does at least provide you with the convenience of being able to easily view the code for script files that were loaded in the page.

Firebug Lite also lacks the layout features in regular Firebug, where it shows you the coordinates for the element being inspected, as well as the padding, border size, and margins.

All in all it is better to have Firebug Lite for other browsers than no Firebug at all. If you are trying to debug layout and viewing issues in other browsers, it is definitely a nice tool to try out.

Have you ever used Firebug Lite? Did you use Firebug on IE, Safari, Chrome or Opera before? If so, what are your favorite features?

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Google Chrome Mastery
Google Chrome Mastery
33 Members
Mozilla Firefox Fans
Mozilla Firefox Fans
30 Members
Best Mobile Browsers
Best Mobile Browsers
26 Members
Safari Browser Tips
Safari Browser Tips
17 Members
Internet Explorer (IE) Tips
Internet Explorer (IE) Tips
4 Members
Ads by Google
Comments (18)
Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.