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 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.
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?
(By) Jorge Sierra is a geek of all trades. Be sure to check out his blog, GeekLad
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.
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.
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);
}
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.
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.
Thank you, great tool for html-coders that tired to fix crossbrowser code!
the title of this post is misleading. firebug lite is not firebug.
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 ?
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.
But Opera already comes with a firebug like app called ‘Dragon fly’ you can navigate to it via: Tools > Advanced > Developer Tools
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 ?
Wow, this was cool man!
If it just worked properly!!
i think its better running on firefox…
日，是个标题党
Incredible! Thanks for sharing!
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.
You are better off using the Web Inspector in Safari and Chrome.
http://trac.webkit.org/wiki/WebInspector
It’s not working for in IE