Work
SubscribeFirebug 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.
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.
You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D19613624.-%3B)
Remy,
Contact me if a change is made and you want me to try again.
[...] Firebug in IE for any web site - [...]
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.
@tj - I think you may be missing the point of this particular post.
So, in IE:
Right click the big "Firebug Bookmarklet" link and Add to Favourites (best done in favourites bar)
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
[...] 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 [...]
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.
[...] 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 [...]
@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.
[...] 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 [...]
[...] Firebug in IE for *any* web site [...]
thanks, i was looking for that for a while now
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
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?)
@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()[...] 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 [...]
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
@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.
I am very exciting about using this mechanism, but I must be doing something wrong here. When I click the bookmarklet from my Links toolbar, I get the following message:
'document.getElementsByTagName(...).0' is null or not an object
I assume this means I am missing something from my code. Do I still need to include the "debug = true" code in my pages?
Sorry if this is an ignorant question. Thanks.
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?
@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.