«
»

Javascript console in IE

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

This entry was posted on Saturday, October 18th, 2008 and is filed under bookmarklets, browsers, firebug, IE, JavaScript. 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

4 Responses to “Javascript console in IE”

  1. Scoutmagazine Says:
    November 6th, 2009 at 11:48 pm

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

  2. Ryan Connelly Says:
    May 26th, 2010 at 10:30 am

    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. Slavka Says:
    January 23rd, 2011 at 3:15 pm

    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. ps3 ylod Says:
    August 20th, 2011 at 12:48 pm

    brilliant post please make more in the future like this

Leave a Reply