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

firebuglogo   How To Install Firebug on IE, Safari, Chrome & OperaFirebug 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.

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

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.

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

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.

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

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?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

18 Comments -

Rarst

Interesting one but very limited, comparing to normal Firebug. “Inspect” barely works in Opera and CSS is in computed style only which is hard to decipher.

Jorge Sierra

Yeah, if you’re having problems with the inspector, you can use the HTML tree to navigate. It makes it a bit easier to inspect, but yes you’re right it provides the computed style.

Zachary

Can’t you use a try/catch statement in some way to debug code entered by the user?

try {
eval(usercode);
}
catch(e) {
alert(“Error:”+err.description);
}

Jorge Sierra

You could certainly do that to debug an error that is being thrown. However, if you’re running into logic errors where all the syntax is correct and no errors are thrown, it makes it much easier to have a debugger to put in stops and step through the code.

Mike Dunham

I would suggest downloading a copy of the script and then changing the URL (whichever way you decide to use this technique) to refer to your local copy. Then there’s no performance hit for having to download an external asset, you can use it offline, and you aren’t chewing up getfirebug.com’s bandwidth.

php programmer ukraine

Thank you, great tool for html-coders that tired to fix crossbrowser code!

misleading marty

the title of this post is misleading. firebug lite is not firebug.

social bookmarking service

I’m using firebug in firefox n it’s awesome, But I wonder how to setup firebug lite for IE6 n IE7. Does anyone know ?

Jorge Sierra

Just add the bookmarklet to your bookmarks (it is above the first browser screenshot in the article). Add it to your favorites, visit a webpage, and then click the bookmark. It will load Firebug Lite into your browser. I’ve tried it in IE6 and it works without issue.

Lawrence Sanderson

But Opera already comes with a firebug like app called ‘Dragon fly’ you can navigate to it via: Tools > Advanced > Developer Tools

cooljaz124

Firebug is working perfectly on Firefox – Ultra slow in Chrome and never think when it will work on IE.My opinion.

Wat about you all ?

Federico Capoano

Wow, this was cool man!
If it just worked properly!! :-)

el7cosmos

i think its better running on firefox…

ytzong

日,是个标题党

Richard Castera

Incredible! Thanks for sharing!

Tony

I really hoped this would be awesome, but the computed style for css development just doesn’t compare to the live stylesheet editing view in regular Firebug.

Timothy Hatcher

You are better off using the Web Inspector in Safari and Chrome.

http://trac.webkit.org/wiki/WebInspector

karachi

It’s not working for in IE