Browser Developer's Tools

  1. Firefox
    1. Install
    2. Open and enable Console
    3. Enter the buggy page
  2. Internet Explorer
    1. Enable Debugging
    2. Try it
  3. Other browsers
    1. Google Chrome
    2. Safari
    3. Opera
    4. IE<8

By default, browsers hide JavaScript errors. Right, a visitor doesn’t want to know about them, if he isn’t into JavaScript.

For develpers, there are great tools to see errors and debug scripts, in all major browsers.

Firefox

To develop in firefox, there is a tool named Firebug.

Install

Grab it at:

  1. http://getfirebug.com

Install it and restart the browser.

Firebug should show up in the right-bottom corner of the browser:

Open and enable Console

Click on the bug icon to open Firebug.

The Console functionality is initially disabled, so we need to click and enable it:

Enter the buggy page

Make sure Firebug is open, and then visit a buggy page: bug.html.

You can see it’s source by pressing Ctrl-U or going to menu View -> View Source.

Firebug Console should show you the error:

Obviously, there is no variable or function lalala.

Click on it to get to the source code. Enable the panels you need. Enjoy.

P.S. Firebug also opens on F12

Internet Explorer

In IE starting with version 8, there is a similar native debugger, disabled by default.

Enable Debugging

Go to menu Tools -> Internet Options:

Switch to Advanced tab and scroll until you see checked Disable Script Debugging item. Uncheck it:

Try it

Now, visit the buggy page: bug.html.

A window should open suggesting you to start debugging. Press “Yes” and enjoy.

Other browsers

Google Chrome

Go to menu Tools -> Developer Tools.

Safari

In Safari, you should first enable the Develop Menu.

Go menu Preferences, tab Advanced:

Check the “Show Develop menu” option.

Then you need to enable menu in Preferenes -> Show Menu bar.

Now the tools become available through the Menu bar, under Develop item:

Opera

In Opera, you need to enable Show Menu bar first. The developer tools are called “Opera Dragonfly” and available under Tools -> Advanced menu:

IE<8

For IE<8, there is Microsoft Script Debugger, available in several flavours:

MS Office
Doesn’t install by default, you have to check the option when instaling MS Office, search it under Script Editor.
MS Visual Studio
The debugger is available if web-development components are installed. No need to install C# etc.
MS Script Debugger Express
A piece of crap.

Visual Studio is the best option for IE<8.

Also, there is Internet Explorer Developer Toolbar for page inspection. You’ll need it for IE7 and (oh) IE6.

See also:

Tutorial

Donate

Donate to this project