Grow your CSS skills. Land your dream job.

Last updated on:

Use Firebug in Any Browser

Just include this script on the site and you'll get a Firebug console that pops up for debugging in any browser. Not quite as full featured but it's still pretty helpful! Remember to remove it when you are done.

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

Bookmarklet

Firebug Lite (drag that link to bookmarks bar)

Bookmarklet Code

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Reference URL

Comments

  1. Permalink to comment#

    Save the file linked in the upper code to the UserJS directory as a JS code with .js extension and you will be able to use it in every page you visit ( In Opera this worked, it should in others too. Yes, I know, Opera has its own developer tool. ).

  2. TeMc
    Permalink to comment#

    Very nice !

  3. Sreyo
    Permalink to comment#

    it worked in IE too….. Great!

  4. Ant

    It’s very bad comparing to original Firebug.

  5. Diego Crusius
    Permalink to comment#

    gah this is very interesting. Seems very useful. Can’t thank you enough.

  6. Nikita

    You make my day :)
    Soooo useful, I really hate the Developper tool in IE.

  7. Aaron Gaffney
    Permalink to comment#

    This is so awesome!

  8. It’s all good except as with all editors it won’t hold, I take out and
    replace Meta content, the one there is full of rubbish..
    refresh and it reverts back.. I have searched the net for 3 years
    looking for something on line and I sort of hoped this was it.
    Is there some little thing like here
    is it that simple, well what ever it is, it’s eluded me… and I’m
    slowly loosing the will to try anymore…
    all my blogs have $0.00 attached because I can’t change
    the Metadata, Please can you put me out of my misery.
    yours terry morris

  9. Permalink to comment#

    You guys should use this URL in your header to get the most recent (and stable) version of the script: http://getfirebug.com/firebug-lite.js

  10. Permalink to comment#

    Oh, also, in order to activate it in newer browsers like IE9 and Safari, you need to click F12.

  11. Donovan Rittenbach
    Permalink to comment#

    That’s cool. Wow.

  12. Felipe
    Permalink to comment#

    click f12?
    how do I click a keyboard key?
    are you serious?

    • Super Taco
      Permalink to comment#

      I think he meant “flick” not click, because snapping the F12 with thumb and index is possibly intended for more experienced users, but “flicking” the F12 key is something that just about anyone can manage.

  13. Sathish
    Permalink to comment#

    I have got few errors after including the script in my page :

    “Unable to get property ‘src’ of undefined or null reference (firebug-lite-compressed.js,68)”

    “Unable to get property ‘responseText’ of undefined or null reference (firebug-lite-compressed.js,71)”

  14. Harshavardhana

    This is better than IE Developer tool

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".