Debugging Javascript

Chrome is the best, so we'll use that.

Starting up

Right-click on the page and select Inspect Element OR Click the ≡ symbol and go to More Tools, Developer Tools.

Viewing the code and setting breakpoints

If there's an error, it'll be highlighted in red in the Console tab.  To the right, you can see the file that had the problem; click on it to view the code.

An error message in Chrome's console

If you don't see any error messages but still want to examine the code to put in breakpoints --select the Sources tab: Sources tab in Chrome Javascript console

Then select the source file you want.

Selecting a source file in Chrome's console

Click on the line number of a piece of code to put a breakpoint on that line.

Adding a breakpoint to code in Chrome's console

Seeing the variables

They're under Scope Variables.  If you can't find them, it's likely because they're not in a function and are thus Global -- meaning they're lost among a host of built-in variables.  But you can find them.

Or you can write a Watch Expression so you can see a variable or a calculated expression conveniently (as shown).

Watches, Call Stack, and Scope Variables in Chrome's console

Editing the code

Don't bother editing the code -- it won't save it.  Edit in Expression and reload.

Running the program again

To do this, reload the page in the browser.