Firebug console for IE

December 6th, 2006. Tagged: bookmarklets, browsers, firebug, firefox, IE, JavaScript, tools

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:

  1. you copy the Firebug Lite files somewhere on your server
  2. you call a bookmarklet that will load firebug.js
  3. 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

  1. I copied Firebug Lite files (get the .zip) on this server (phpied.com), they are here.
  2. I (and you can try the same) generate a bookmarklet, using the bookmarklet tool
  3. Add the generated bookmarklet to the favorites
  4. Go to any page on phpied.com
  5. Click the new favorite
  6. 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.

firebug-ie-console.png

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.

Tell your friends about this post: Facebook, Twitter, Google+

38 Responses

  1. [...] 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. [...]

  2. 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.

  3. [...] Firefox ile birlikte kullandığımız FirefBug eklentisinin IE ye uyarlanmış halide çıkıyor . Link [...]

  4. 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

  5. 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?!

  6. 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.

  7. [...] 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 [...]

  8. Two bookmarklets for debugging in IE

    If your using Firebug Lite … just use console.dir(object) … and you’ll get a pretty dom tree.

  9. [...] phpied.com » Blog Archive » Firebug console for IE (tags: javascript ie firebug bookmarklet tools web firefox) [...]

  10. Actualy it seems there is only one step to full Firebug implementation – Inspection and stuff. Great Work!

  11. [...] Firebug Console for IE [...]

  12. 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 ?

  13. See at : http://iescripts.org/view-scripts-17p1.htm

    You must install IE7Pro (free) before

  14. 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

  15. Suggestions on a CSS debugger for IE?

  16. well, microsoft’s developer toolbar is very helpful
    http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

  17. [...] http://www.phpied.com/firebug-console-for-ie [...]

  18. [...] Firebug (firefox, or firebug lite [bookmarklet] for other browsers) [...]

  19. 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?

  20. phpied.com » Blog Archive » Firebug console for IE…

    [...][...]…

  21. 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.

  22. [...] console for IE phpied.com » Blog Archive » Firebug console for IE Firebug console for [...]

  23. It seems there is no console.clear() for Firebug 1.2 …

  24. [...] 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 : [...]

  25. 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…

  26. 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

  27. 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.

  28. just because my friend hack my facebook acount to

  29. 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.

  30. fonts…

    [...]Firebug console for IE / Stoyan’s phpied.com[...]…

  31. Your blog is bookmarked, so I dont lose it again.

  32. Adword…

    [...]Firebug console for IE / Stoyan’s phpied.com[...]…

  33. 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

  34. 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.

  35. Can this be used in a .NET environment?

  36. 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.

  37. 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.

  38. Beautiful design! What’s it called?

Leave a Reply