How to Debug Assignments

1. Open the "developer tools" inside your browser (this tutorial is based on Chrome, but Firefox (and all other modern browser) are virtually identical in this regard):

2. Navigate to the "Console" tab (in Firefox these may be separate, stand-alone tools, rather than tabs). Even without any doing from you, the console already displays helpful information, such as error messages. In the example below I mis-spelled the name of a function:

3. The console also allows you to print anything you like by inserting the console.log() function into your script. Among other things this is useful to see the values of variables. In the example below I wanted to to checkout the values of this.s and this.v over time. I inserted an empty console.log() call to force a newline and make the output more readable:

4. We can also debug our code step-by-step. Navigate to the "Sources" tab (in Firefox this may be called "Debugger" (and it may be a stand-alone tool)). In your code, insert the command debugger; where you want execution to pause. In the example below I want to pause right before I'm updating this.s and this.v, so I can step through the code line by line and see their values changing live. All my local variables' values are displayed in real-time on the right-hand side under the "Local" tab. Above it you'll find the well-known debugging controls "run", "step over", "step in", and "step out":

5. While I'm inside the debugger I can switch back to the console and execute any JavaScript code I like. The code behaves the same as if I'd have written it into my script at the currently debugged line. This is useful for experimenting and seeing the effects of code before adding it to your script: