Pinterest Stumbleupon Whatsapp
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?

  1. karachi
    January 12, 2010 at 11:02 am

    It's not working for in IE

  2. Timothy Hatcher
    January 8, 2010 at 9:20 am

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

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

  3. Tony
    January 8, 2010 at 7:43 am

    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.

  4. Richard Castera
    January 8, 2010 at 6:43 am

    Incredible! Thanks for sharing!

  5. ytzong
    January 8, 2010 at 4:21 am

    日,是个标题党

  6. el7cosmos
    January 8, 2010 at 4:07 am

    i think its better running on firefox...

  7. Federico Capoano
    January 8, 2010 at 3:34 am

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

  8. cooljaz124
    January 8, 2010 at 2:23 am

    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 ?

  9. Lawrence Sanderson
    January 8, 2010 at 2:09 am

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

  10. social bookmarking service
    August 26, 2009 at 8:17 pm

    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
      August 27, 2009 at 6:58 am

      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.

  11. misleading marty
    July 13, 2009 at 12:28 pm

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

  12. php programmer ukraine
    April 12, 2009 at 11:45 pm

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

  13. Mike Dunham
    March 16, 2009 at 10:36 am

    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.

  14. Zachary
    March 14, 2009 at 5:20 pm

    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
      March 14, 2009 at 7:40 pm

      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.

  15. Rarst
    March 14, 2009 at 2:31 pm

    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
      March 14, 2009 at 7:33 pm

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *