javascript debugging in HTML file

Question

How can I put break points in an HTML page in javascript functions to see values of variables as lines get executed. What is the easiest way of doing so?

thanks

Answer 1

You should get Firebug.

Answer 2

Use the keyword "debugger;" to attempt invoking a hard breakpoint.

As long as your browser has Javascript Debugging enabled, then the debugger; statement will tell it to do it's thang and you'll be in a step-by-step debugger.

The Firebug extension for Firefox is by far the easiest, but Internet Explorer's new built-in "Developer Tools" option is quite nice too. Firebug I must say is easier and more polished, but I often must validate in a pile of different browsers and in some cases only Internet Explorer like when debugging the interaction of client-side Javascript and a custom ActiveX control.

The "debugger;" statement always seems to be the golden key to quickly get in to a debugger across platforms and browsers without jumping through a bunch of burning hoops.

So you might have some block of Javacscript like the following, and the browser would invoke the line-by-line debugger on "debugger;" like it was a breakpoint...

var a = 5;

var b = 6;

debugger;

a = b;

Answer 3

In Google Chrome browser press 'Ctrl+Shift+i' buttons.

In IE browser:
- Download Microsoft Javascript debugger.
- In browser goto "Tools->Internet Options->Advanced" and remove "V" from "Disable script debugger" check-box.
Enjoy.

Answer 4

alert(variable);

This is what I do, it pretty much works exactly like a breakpoint. When you press 'OK' the script continues.