Javascript console in IE

October 18th, 2008. Tagged: bookmarklets, browsers, firebug, IE, JavaScript

I'm a sucker for consoles. The ability to quickly type some code and see it executed right then and there... priceless. That's why I'm a huge fan of Firebug's JavaScript console. But what about IE?

option 1 - Firebug lite

Firebug lite is a lighter version of the proper Firebug which runs in browsers other than Firefox. You "install" the bookmarklet and voila - JavaScript console and other goodies are available on any page.

You visit any page and click the "Firebug lite" bookmarklet...
firebug lite bookmarklet

... then you hack away in the shiny console!
firebug lite bookmaklet in action

option 2 - built-in MS script editor/debugger

If you do any javascript in IE, it's a good idea to have this debugger guy enabled. There's actually at least three different debuggers, but one of them is already installed without you lifting a finger. If you enable it, you can debug any time there's a JavaScript error on the page. It also features a console! You can't get to the console unless there's a JS error, so you may need to cause the error yourself. Here's the step-by-step scenario.

Go to menu Tools / Internet Options... / Advanced tab. Under the "Browsing" category uncheck the box that says "Disable Script Debugging"
set the IE options

Go to any page and cause an error, by typing in the address bar some non-existing property or some non-existing object for example. Like javascript:alert(a.a.a)
Go to anypage and cause an error

Non-surprisingly, you get an error, but now you have the option of debugging the error:
A error and a debug option

You're given a list of debuggers, in case you've installed more debuggers from MS. Select your debugger or just hit Yes:
pick a debugger

Just say OK here...
step into procedure

Click "Break"...
Break

Finally - a console! We're in! The console is the so-called "Immediate" window, which is not displayed by default. To see it go to menu Debug / Windows / Immediate. Then just start fiddling with the page. Type anything and hit enter to see it evaluated. You also list the properties of an object by typing its name, like document.images[0] or just document.
Fiddle with document.images[0]

Once you've had your fun, stop debugging:

Enjoy the results of your hard work, a.k.a. replacing some logo with a shot of your favorite book ;)
your fav book

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

10 Responses

  1. I’m still having this ‘console’ is undefined error whe I’m in youtube. Wish this would just go away. I have IE7.

  2. To cause ie to “break” on an exception, you can simply put a “debugger;” line in your code, and this will tell ie to load the debugger. You’ll of course need script debugging to be enabled first.

  3. I redefine most of console.xxx methods to put logs(warnings,timers) to
    This console work on IE6+, FF, Chrome, Safari, Opera.
    Press ‘~’ to show/hide them
    http://dez.in.ua/console/light.html
    http://dez.in.ua/console/

  4. brilliant post please make more in the future like this

  5. [...] Safari, Firefox, and Chrome should all be okay with this console window display. Some versions of Internet Explorer may cause trouble, but testing your code in another browser first is a safer bet. With Internet Explorer it’s [...]

  6. [...] Safari, Firefox, and Chrome should all be okay with this console window display. Some versions of Internet Explorer may cause trouble, but testing your code in another browser first is a safer bet. With Internet Explorer it’s [...]

  7. I wrote my own debugger and I have been using it for the past 10 years.

    I find it superior to every other one of every other browser.

    It’s for IE only. It’s called SplineTech JavaScript Debugger.

    It’s extraordinary fast and trivial to use.

    Check it out if you want: http://www.javascript-debugger.com

    Daniel

  8. @Daniel don’t use this website to spam about your products.

  9. Very helpful! Thank you.

  10. I will immediately clutch your rss feed as I can not to find your email subscription link or newsletter service. Do you have any? Kindly permit me recognize in order that I could subscribe. Thanks.

Leave a Reply