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.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

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:

/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.