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%3D62749661.-%3B)
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