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.
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.
@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.
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.
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
@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.
[...] 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. [...]
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
@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.
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
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.
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!!!
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?
in IE 6 I get Access denied when I click on clear
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?
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.
Thanks for the great bookmarklet! Works fine for me in IE7.
[...] Firebug in IE for any web site [...]
Like Adam,
When I click on the bookmarklet, the firebug box
appears on the bottom, but the status bar is stuck on
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.)
@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.
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
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.