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.
This entry was posted on Wednesday, December 6th, 2006 and is filed under bookmarklets, browsers, firebug, firefox, IE, JavaScript, tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
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…
[...][...]…
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.
September 5th, 2008 at 9:09 am
[...] console for IE phpied.com » Blog Archive » Firebug console for IE Firebug console for [...]
September 14th, 2008 at 4:09 am
It seems there is no console.clear() for Firebug 1.2 …
February 16th, 2009 at 7:09 am
[...] was something like that in IE. The following links may be of your interest : – Firebug Lite – Firebug console for IE / phpied.com – IE team ports FireBug to IE8 | Elegant Code My periodic table contains only 1 element : [...]
June 2nd, 2010 at 10:14 pm
I have good application programming knowledge, recently wanted to learn web designing and programming. This is on of the quickest tool which I used right after this article… believe me it did not disappoint me.
Thanks for such useful article…
July 20th, 2010 at 12:28 pm
Hello,
Firebugger is a new free service which enables the firebug extension into Internet Explorer and all major browsers, our Firebug for IE can be found here:
http://www.firebugger.com
January 12th, 2011 at 4:26 am
Doing some searching as well as noticed your website appears a little all messed up in my K-meleon web browser. However fortunately barely anybody utilizes this any more but you may want to consider this.
September 28th, 2011 at 3:34 pm
just because my friend hack my facebook acount to
November 17th, 2011 at 2:25 am
Thanks for another informative blog. Where else could I am getting that type of info written in such an ideal means? I’ve a undertaking that I am simply now running on, and I have been at the look out for such information.
January 15th, 2012 at 2:19 pm
fonts…
[...]Firebug console for IE / Stoyan’s phpied.com[...]…
January 16th, 2012 at 8:41 pm
Your blog is bookmarked, so I dont lose it again.
January 16th, 2012 at 9:31 pm
Adword…
[...]Firebug console for IE / Stoyan’s phpied.com[...]…
January 20th, 2012 at 3:47 pm
The objective of this procedure should be to manage the planning as well as inspecting repair off equipments and models even though applying procedure for production business. The …play playstation vita
July 26th, 2012 at 4:59 pm
Just one of the most beautiful nature films I have ever seen. I especially liked it because it shows wolves as they are, and why they are important to the ecosystem, therefore, they should be protected everywhere, including Alaska.
July 30th, 2012 at 8:24 pm
Can this be used in a .NET environment?
May 22nd, 2013 at 7:20 am
This article will help you decide which brand is better for your needs by comparing Dell and Toshiba’s design, reliability, customer service and price. Of course there are advantages and disadvantages, Dell Inspiron Ling Yue 11z keyboard spacing is small, large palm of male users in the operating room or on the slightly crowded. Dell’s Latitude products are considered to be a high-end business laptop, so the hardware inside is more powerful.
May 22nd, 2013 at 7:21 am
A few examples of scene modes include portrait, kids and pets, night snapshot, indoor, fireworks, and much more. 1 megapixels utilizing six times optical in addition to four times digital zoom together with picture stabilization zoom. This camera is capable of shooting Full HD video with the resolution of upto 1920×1080 pixels 24 fps.