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

Firebug 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.

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.

Ads by Google

Beta-alumina ceramics www.ionotec.com
Supplier of tubes and discs Experts in ceramic joining

High Quality CX4 Cables www.tmcscsi.com
We Stock 10 Lengths From 0.5M To 15M. Guaranteed Lowest Price

Alumina Processing www.cytec.com
Cytec is a leading manufacturer of Alumina Processing Chemicals.

Thermal Spray Equipment www.plasmapowders.com
Powder Thermal Spray Equipment In stock; ready to ship worldwide

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.

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.

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?