Firebug in IE for *any* web site

As a web developer, I’m constantly using Firebug, but when it comes to testing in IE it’s a nightmare if there’s any bugs.

Firebug does provide a ‘lite‘ version, but you have to have in it in every page you want to debug.

Well, not anymore.

Although the lite version of Firebug is nowhere near the fully featured Firefox version, it does allow me to do some interrogation of the DOM and objects I’ve created.

So I tweaked the lite version and now I can load the Firebug lite in to any page I want via a bookmarklet.

Installing

I recommend you download the tweaked firebug.js on to your own server for piece of mind

† If I was being malicious I could change the hosted JavaScript to post cookie data to another web site if I wanted. I’m not malicious – but it’s worth keeping in mind!

To use the bookmarklet, drag the link below in to your links toolbar in IE.

Firebug Bookmarklet

If you use your own version of firebug.js – change the following block in the bookmarklet’s code to point to your code:

http://remysharp.com/wp-content/uploads/2007/03/firebug.js

Safari

Currently I can’t get the bookmarklet to work for Safari (though I’ve found 99.9% of the time, if the JS works in Firefox, it will work in Safari). It’s because I can’t target the contents of the iFrame…yet.

How it was done

In the interest of understanding what I did, I thought I’d quickly drop an explanation – and perhaps Joe Hewitt may consider adding the tweaked version.

getFirebugConsoleiFrame()

I created a new function to return the Firebug console’s HTML content. This meant I didn’t have to source the console’s content (an iFrame) from another domain (which would lead to obvious permission problems).

createFrame()

I removed the setting of the ‘src’ attribute on the iFrame (as discussed above), and once the iFrame was loaded in to the DOM, I could change it’s HTML using

consoleFrame.contentWindow.document.write(getFirebugConsoleiFrame());

I tell you: I don’t think I’ve used ‘.write’ since the early 2000s – but it did the trick in IE.

Any comments, suggestions or problems let me know.

46 Responses to “Firebug in IE for *any* web site”

  1. This isn’t working for me in IE7 – It would sure be helpful if it did :) I can’t drag the link to the link bar for some reason. Right clicking and bookmarking doesn’t work either.

  2. @Daemach – try clicking on the actual link. Then dragging the icon in the address bar in to your links toolbar.

    Alternatively if that doesn’t work either – bookmark a random page and have it appear in the links toolbar. From there, right click the new bookmark and select properties.

    Copy the ‘Firebug Bookmarklet’ link address and paste it in to the URL property. That should do the trick I hope.

  3. Sweet! Thanks for sharing. I’m so going to use this bookmarklet!

    The only thing I’m missing is the ability to bring the previous/next line, typed in the console with the arrow keys. Check how I modified firebug.js to add this functionality.

    Source is here: http://www.phpied.com/files/firebug/firebug.js
    Check the onKeyDown() function.
    I also had to add:
    evaled_lines: [],
    evaled_lines_pointer: 0
    to window.console in the beginning. Those store all previously evaluated lines and the pointer to the current one, so that you can go prev/next.

  4. Great, thanks.
    I planned to do it myself and didn’t find the time. Then asked Joe about it, but he said it’s a great idea, but didn’t seem to do anything about it.
    It’s good to see it bothered someone else enough to implement it.

    a few comments, though:
    However, I found some problems, andI don’t know if it relats to you or to Joe’s original Firebug Lite:
    When I click the close button, I can show the console again by using F12 or Ctrl-Shift-L, but not using the bookmarklet again. I would expect the bookmarklet to notice that is was run once on the page, and display the console after it was closed.

    When added to http://www.google.com, a scrollbar is added, and the console’s command line is a bit below the screen, and I have to scroll down to see it.

    In Firebug, issuing a command like “alert(document.title)” don’t show a result, but Firebug lite shows “undefined”. I guess htis has nothing to do with you…

    Thanks again,
    splintor

  5. @Stoyan – I’ve added your changes to the firebug.js hosted on my server, so it now supports using the cursor to go through the history of commands.

    @Splintor – on your suggestion, I’ve tweaked the bookmarklet to open the console if it’s already been loaded once. You can either use the link above and replace your existing bookmarklet or change:

    void(null)

    to

    void(window.console.open())

    On the other two points, I suspect they’re issues within Firebug lite, as I’ve seen that on the Firebug lite demo page.

  6. [...] Update: A better version of what I was trying to do is here. It works around the cross-domain permission problems in IE by not loading a page in the frame, but putting there the actual content. [...]

  7. Hi, just thought I’d let you know that although the bookmarklet doesn’t seem to work on Safari 1.3 it works fine on Safari 2.0.4. Here’s a screenshot: http://img.photobucket.com/albums/v215/thegooddale/firebug-safari.png

  8. @Yansky – you’re right, it flat out doesn’t work in Safari. That’s odd. I doubt if that’s caused by my making it a bookmarklet, since I only changed the iframe to load from local code rather than remote HTML.

    I’ll see if I can raise it on the forum for Firebug, maybe someone knows of a fix.

  9. I was reading through the excellent tutorial by Encytemedia and one of the commenters posted a really good workaround for Safari. I’m not sure if you could put it into your bookmarklet, but it’s hand to know if you need to debug in Safari.

    The link: http://encytemedia.com/blog/articles/2006/05/12/an-in-depth-look-at-the-future-of-javascript-debugging-with-firebug#comment-728

  10. I am trying to use this with IE 6.0.2900…
    I get the following error when I run the bookmarklet:

    Line: 2
    Char: 1
    Error: ‘window’ is undefined
    Code: 800A1391
    Source: Microsoft JScript runtime error

    Any help/suggestions you could provide would be appreciated.

  11. I can’t get it to work on http://fs.ataclosings.com/Filesystem/david/docControl.aspx

    it just gets stuck “Downloading data http://getfirebug.com/firebug/firebug.css…

    But it works fine on everything else. Anyone have any idea as to why?

    aside from that problem this is a great tools! Thanks!!!

  12. I take that back…it works now. I just changed the course of the css file to one on my server.

    Now the problem is that the position of the lovely firebug is not at bottom:0, but rather 176px or so BELOW bottom:0; weird…i know….something in my page must be throwing it off and i can’t figure out how to get the firebug to ignore screwed up page formating.

    Could someone let me know if firebug render’s correctly when visiting http://fs.ataclosings.com/Filesystem/david/docControl.aspx
    and if not…how the heck can i fix this?

  13. in IE 6 I get Access denied when I click on clear

  14. When I click on the bookmarklet, the firebux box appears o n the bottom, but the status bar is stuck on “Downloading data http://getfirebug.com/firebug/firebug.css…

    Any ideas?

  15. To pah:

    You probably made the same mistake that I originally did: you must have made a bookmark to the Javascript file. Don’t. What you should bookmark instead is a “javascript:” type link that injects a script element, for loading the Javascript file, into the current page. It’s the (huge) link that says “Firebug Bookmarklet”, and that you probably mistook for an intermediate title. I know I did.

  16. Thanks for the great bookmarklet! Works fine for me in IE7.

  17. [...] Firebug in IE for any web site [...]

  18. Like Adam,
    When I click on the bookmarklet, the firebug box
    appears on the bottom, but the status bar is stuck on

    “Downloading data
     http://getfirebug.com/firebug/firebug.css…“
    

    This happens not only on my site but also on this page (on remysharp.com).

    I checked that http://getfirebug.com/firebug/firebug.css exists (it does), and that the script does not include those trailing dots (…) (it does not).

    David had the same problem, but apparently fixed it – he wrote “I just changed the course of the css file to one on my server.”

    Can the css file really be any css file? Should I copy the firebug.css file to my server? Since the file exists at getfirebug.com, is this really the problem?

    I have now tried what David did – I copied firebug.css to my website and, using Notepad++, I changed http://getfirebug.com/firebug/firebug.css to http://imagiscape.ca/web/firebug.css in firebug.js. (I did not make a typing error or cut off the > or < tags surrounding the url. The file saved properly.)

    Now when I click the bookmarklet, I get:

    Internet Explorer cannot load .
    Unspecified Error

    Help? Help Adam! Help me! Help others!

    (P.S. I’m trying to find why my blog’s footer appears near the top in IE – at least in IE7.)

  19. @Jonathan – I’m not completely convinced the problem is to do with the CSS.

    I’ve added a couple of tweaks to the firefox.js file, in particular, after we write to the iframe, I close the handle – which I suspect is the guilty code that leave the page look like it’s still loading.

    I’ve given it a try in IE7 and it doesn’t come up with “loading” anymore. Can you give it a try too?

    Thanks.

  20. Remy,
    Hi, I added the Firebug Bookmarklet to my Links again (from near the top of this page), and using IE7, I now get:

    [BLANK]

    within the Firebug frame – both for my blog and for this page.

    (I’m delighted this works for many people. I have resolved my immediate need for debugging a site which displays bizarrely in IE, but I still look forward to this tool working for me when I next need it.)

    Thanks,
    Jonathon

  21. Remy,
    Contact me if a change is made and you want me to try again.

  22. [...] Firebug in IE for any web site – [...]

  23. can somebody please provide a step by step instruction on how to implement this script. a zipped file with a sample script will do just fine.

  24. @tj – I think you may be missing the point of this particular post.

    So, in IE:

    1. Right click the big “Firebug Bookmarklet” link and Add to Favourites (best done in favourites bar)

    2. Click on the new bookmark.

    That’s it.

    If you want to install it specifically and permanently on a page, have a look at getfirebug.com

  25. [...] the architecture of other sites, and Jash makes it easy to do this in multiple browsers. It’s possible to tweak Firebug Lite to do something similar, but I appreciate that bookmarklet support works out of the box for [...]

  26. hmmm.. doesn’t seem to do much.. so i have a bookmark to above link.

    on any page i click that link it opens a window at bottom of browser (like firebug).. which has clear on one side and close on the other and empty box.. nothing else.

  27. [...] necesitaba modificar el HTML de los proyectos para hacer posible la ejecución de Firebug Lite. Usando un poco de Javascript nos es posible hacer la modificación sobre cualquier página y tener una versión muy limitada de Firebug, pero que nos puede ayudar a [...]

  28. @Peter, have you tried to type anything in to the bottom of the white box? You’ll find that it’s the actual console.

    Have a play here: http://getfirebug.com/lite.html if you need some help.

  29. [...] necesitaba modificar el HTML de los proyectos para hacer posible la ejecución de Firebug Lite. Usando un poco de Javascript nos es posible hacer la modificación sobre cualquier página y tener una versión muy limitada de Firebug, pero que nos puede ayudar a [...]

  30. [...] Firebug in IE for *any* web site [...]

  31. thanks, i was looking for that for a while now

  32. Hi Remy,
    My status bar says “Done – but with errors”, but the console shows nothing.
    Actually, sometimes it shows (after a long time):
    “Access is Denied” line 651, which is:
    script type=”text/javascript” src=”http://www.cocomment.com/js/cocomment.js”.

    Why does the console not display the errors, and why does it display “Access is Denied”?

    (If I get it working properly, is it possible that it will help me identify a plugin conflict? I’m trying to find why:
    - some images have stopped appearing – such as country flags for translation links, and post-ratings’ stars.
    - If the post is short, my sidebar now goes out of the side to the center and then left.
    - there are bullet points now in my sidebar (especially near the bottom of the sidebar).
    I de-activated all my newly-installed plugins but these quirks still appear.)

    Thanks

  33. Where can we find what kind of things can be typed in the bottom of the white box? Everything I try yields the message “undefined”.

    (P.S. I fixed 2 of my 3 problems, but still the images of country flags and post-ratings’ stars are not displaying. What can I do to diagnose that?)

  34. @Jonathon – I think what you’re seeing is the default response from Firebug.

    I’m not 100% sure here, but I believe what happens is Firebug evaluates your statement, and prints the return value from it. If there’s no return value it will print ‘undefined’.

    You can use console.log to write to the log. Also running simple tests such as the following will also output to the log (rather than capturing in a variable):

    "example".toUpperCase()

  35. [...] necesitaba modificar el HTML de los proyectos para hacer posible la ejecución de Firebug Lite. Usando un poco de Javascript nos es posible hacer la modificación sobre cualquier página y tener una versión muy limitada de Firebug, pero que nos puede ayudar a [...]

  36. Is there a version of firebug for IE with most functionality available for firefox?
    I would like to do some profiling without using jslex or such solution. I am also seeking to detect leaks (I have used drip and sieve), but it would be nice if it was integrated into IE as a plugin

  37. @intrader – as far as I know, Firebug lite doesn’t support any profiling as yet. I know there’s a beta version of Firebug (for FF) available, so there may be work being done on the lite version…but until then I suspect it’s going to be a mish-mash of tools.

    Hopefully an MS coder out there hears your request and builds the whole lot in a plugin for IE – that would be awesome.

  38. Hey Remy, I have the console field displaying, but no other options. Is that all firebug lite is? I thought you could view the DOM, update styles, etc?

  39. @Royce – no – you don’t need ‘debug=true’ – that’s only required if you pre-load Firebug Lite.

    @Chris – Sadly not. That said, IE8 does have a lot of this information available in the developer toolbar.

    For documentation and features, check out Joe Hewitt’s Firebug Lite page.

  40. All the links to firebug lite on Joe’s page are broken, and the library file referenced in the script element doesn’t resolve either. Did he discontinue it?

  41. @Michael – I’ve revived the CSS missing from the firebug bookmarklet via @Jonathan’s copy.

  42. Am I the only one who cant get this working? I drag the bookmark onto my ie6 page and the bottom part appears, but all I can see is two options to clear and close. Is this because I am using multiple ie?

  43. Sorry to appear dumb … I also get what I believe is the console window with “Clear” and “Close” links at the top. I’ve not used this feature with Firebug in Firefox – how does it work, and can I use it to inspect elements or temporarily edit HTML attributes?

  44. It seems like Firebug Lite ( http://getfirebug.com/lite.html) is now having its own version of this script… Cheers for the project thought!

  45. Hey Remy, great script..
    I think the problem you had with safari is that it’s caching about:blank or whatever empty page (no src as per your script) . I had the same problem, adding a random ID (and in my case changing back to the old one) solved the problem. See http://www.cjboco.com.sharedcopy.com/post.cfm/442dc92cd1c0ca10a5c35210b8166882.html

    Cheers

  46. The simplest way to debug javascript in Internet explorer IE+, Safari and the other browsers is to insert the following code to your html file, before any other script, in the head:

    this will start firebug lite, no mater of used browser and it always start the latest version of firebug.

    Just remember to remove the code when the script is debuged!

    And YES it REALLY WORKS!

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight