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