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.
I recommend you download the tweaked firebug.js on to your own server for piece of mind†
To use the bookmarklet, drag the link below in to your links toolbar in IE.
If you use your own version of firebug.js – change the following block in the bookmarklet’s code to point to your code:
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.
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).
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
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.