Debug your Javascript code for free

Debugging with Visual Studio
Firebug is only a debugger. You can edit pages on the fly, but it is not an IDE (integrated development environment) and those edits are lost once you close the page. A more integrated alternative is Microsoft’s Visual Web Developer, even for projects that do not use ASP.Net. For this the free Visual Web Developer Express edition is fine.

Run Visual Web Developer and start a new website. Choose the Empty Web Site template, add a new HTML page and code your Javascript. Click Run or press F5 to start debugging.

At this point Visual Studio will prompt you to create a web.config file to enable debugging. Let it do so. It may also display a dialogue stating that debugging is disabled in internet Explorer. You have to run IE, select Tools, Internet Options, Advanced, and uncheck Disable Script Debugging. Then exit IE and try debugging again.

There are several strong features. Visual Studio has its own internal web server, which is a secure and simple way of debugging .Net or static websites. Set a breakpoint in your code and try the application. The debugger is in Visual Studio, not IE, and you get full features including variable inspection, watches, call stack and an immediate window where you can type Javascript code and access the DOM.

Visual Studio also supports the debugger statement, which works like a breakpoint. Press F11 to step into code, or F10 to step over. It is not quite as feature-rich as Firebug; there is no way to write to the output window and no timings to profile your code. That said, Visual Studio is a decent HTML-authoring environment, from a developer as opposed to a designer perspective, and has a CSS editor and an HTML document outline that speeds code navigation.

The Visual Studio editor has error detection and code completion for built-in types. It formats your code subject to the rules in Formatting and Validation, available from a right-click menu in the editor. It is highly customisable, right down to settings for individual tags.

There are problems with Visual Studio for Javascript debugging. One is that you are debugging IE and while you can preview your application in other browsers, you lose the debugging integration. Since IE is quirkier than other browsers, this makes it hard to use for all your debugging.

There is an annoyance: browsing the web with IE’s debugging enabled can result in continual error dialogues. IE8 is better in this respect, because Visual Studio can enable and disable debugging on the fly, so you can still browse with debugging disabled.