Firebug console for IE
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.
Firebug - no words to describe how cool it is, really. After the recent new release (1.0. beta) the number of features is overwhelming. I for one can't live anymore without it, seriously.
One of the things I noticed on the website is the ability to use the Firebug console in other browsers than Firefox. I don't know if this existed before version 1.0 but if it did, it was the best kept secret. I am so addicted to the console in Firefox, I use it all the time to tweak a few things here and there when I'm working on a page. Recently I was looking for something similar for IE, but couldn't find it. Lo and behold, it was right under my nose.
So, here's the page that describes how to use Firebug in IE (and others). Basically you unzip the Firebug Lite files somewhere on your server and then you include firebug.js in your pages. But why stop there? And isn't it possible to avoid including this script on every page (and forgetting to remove once you're done, or removing it prematurelly since a page, just like a painting, is never really finished). Bookmarklets to the rescue!
I wanted to host the Firebug files on my hard-drive and then use a javascript dynamic include to load firebug.js via a bookmarklet. This way I would be able to load the firebug console every time I want it, on any page. Unfortunatelly IE's security policy won't allow it. Then?
Solution
The solution I came up with is:
- you copy the Firebug Lite files somewhere on your server
- you call a bookmarklet that will load firebug.js
- you hit F12 and you have a console!
This procedure has to be repeated for every domain you're working on, because of the security policy that won't allow cross-domain frame scripting. You can have one copy for your http://localhost and one for every domain. To ease the creation of bookmarklets that load firebug.js, I came up with a Firebug bookmarklet generator.
In action
- I copied Firebug Lite files (get the .zip) on this server (phpied.com), they are here.
- I (and you can try the same) generate a bookmarklet, using the bookmarklet tool
- Add the generated bookmarklet to the favorites
- Go to any page on phpied.com
- Click the new favorite
- Hit F12 to show/hide the console
Here's how (a readable version of) the generated code looks like:
javascript:(function(){ var firebug_js = document.createElement('script'); firebug_js.setAttribute('type', 'text/javascript'); firebug_js.src = 'http%3A//www.phpied.com/files/firebug/firebug.js'; document.getElementsByTagName('head')[0].appendChild(firebug_js); firebug_js.onreadystatechange = function () { if (firebug_js.readyState == 'complete') { console.open() } } })()
Minor improvement to the console
The Firebug Lite console executes the code you type, but doesn't show it again when you use the up/down arrows, the way it does in Firefox. So I added this feature (copying from myself), you can replace the firebug.js you download with my version.
Not sold yet?
Here's a screenshot of the console in action, I used it to change my photo on the homepage.
Go ahead, please
I strongly encourage everyone to try this out. Firebug is a beautiful thing and using even a bit of it in IE is great.
Post this entry to: » del.icio.us » Digg » Furl » Newsvine » reddit » Y!
December 7th, 2006 at 8:17 am
[…] Einige Funktionen lassen sich übergreifend auch in anderen Browsern nutzen bzw. also in jede Website integrieren, da der Entwickler eine JavaScript-Library Firebug-Lite bereit stellt. Wie man das macht, wird anschaulich in diesem Tutorial erläutert, in dem Firebug im IE genutzt wird. […]
December 7th, 2006 at 2:31 pm
Wow, Firebug looks pretty awesome. I'd heard the name before but for whatever reason had not checked it out until now. The feature set is impressive… installing now! Thanks for the tip.
December 9th, 2006 at 7:08 am
[…] Firefox ile birlikte kullandığımız FirefBug eklentisinin IE ye uyarlanmış halide çıkıyor . Link […]
February 8th, 2007 at 7:37 am
I've tried that firefox.js in IE but when I enter commands (as described in the Command Line API) I only get "undefined".
Even a clear(); does not work.
The only thing that worked, was $('some_id') which returned a#some_id in that case…
Any suggestions what I#m doing wrong? It's a pitty I can't find command line examples anywhere in the web… :/
Chris
February 8th, 2007 at 8:28 am
Ok, it seems I have to type console.clear(); …
But still console.debug('test()') won't set a breakpoint to my function test();
Help anybody?!
February 8th, 2007 at 9:02 am
Well, it's Firebug Lite, so it's very limitted compared to the full blown version. I don't think you can debug with it in IE. But you can still try some pieces of JS code.
For debugging JS in IE, try the biult-in debugger - Tools->Options->Advanvced, uncheck the two "Disable script debugging" options.
February 26th, 2007 at 12:56 am
[…] Here are two bookmarklets that could make your life easier when trying to figure out why in IE a page behave as wrong as it behaves. For Firefox we have Firebug, so none of this is necessary. For IE we have also Firebug lite (see my post), but you need some setup before you can use it. With this thing here you can mess up any page you see on the web, not only yours […]
March 5th, 2007 at 9:01 am
If your using Firebug Lite … just use console.dir(object) … and you'll get a pretty dom tree.
March 13th, 2007 at 11:23 am
[…] phpied.com » Blog Archive » Firebug console for IE (tags: javascript ie firebug bookmarklet tools web firefox) […]
March 22nd, 2007 at 5:42 am
Actualy it seems there is only one step to full Firebug implementation - Inspection and stuff. Great Work!
March 30th, 2007 at 1:25 am
[…] Firebug Console for IE […]
April 10th, 2007 at 9:35 am
How we use Firebug if for popup pages in IE7 where the popup page is not made by us and it is remote. some times i just want to know how certain javascript works on others page how i can make Firebug work on such pages ?
May 20th, 2007 at 11:27 am
See at : http://iescripts.org/view-scripts-17p1.htm
You must install IE7Pro (free) before
June 21st, 2007 at 9:36 pm
Hi FremyCompany,
Thank you for posting the link.
The ieScripts website seems to be very useful.
I'll be checking out the Firebug lite script right now.
Best,
Antonie
July 26th, 2007 at 2:32 pm
Suggestions on a CSS debugger for IE?
July 26th, 2007 at 3:30 pm
well, microsoft's developer toolbar is very helpful
http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
September 13th, 2007 at 8:29 am
[…] http://www.phpied.com/firebug-console-for-ie […]
September 29th, 2007 at 8:17 pm
[…] Firebug (firefox, or firebug lite [bookmarklet] for other browsers) […]
November 23rd, 2007 at 6:16 am
Was trying both IE Developer Toolbar and Firebug Lite on IE 6 n 7.
IE Developer Toolbar does not seems to show any debugging on javascript.
Unless i miss something out.
For FireBug in IE, i simply cannot troubleshoot my problem on Jquery.
any suggestion or url?
December 20th, 2007 at 3:16 pm
phpied.com » Blog Archive » Firebug console for IE…
[…][…]…
February 9th, 2008 at 5:36 pm
I'm actually using firebug in firefow, i wonder if there is a version for ie7. Does anyone know ?
March 28th, 2008 at 11:17 am
Neat trick, but not terribly useful for *real* work. No console object in JS, or inspection, no logging. It's not Firebug Lite, it's Firebug Crippled. What we need is a *real* IE Firebug. Unfortunately, as far as Google is concerned, no tool even comes close.
And don't even mention those "Developer Toolbar" plugins. Those things are worthless jokes. Useful if all you need to do is browse the HTML DOM, or look at styles, oh, and have $$$ to spend since the real features are locked out.