-
Notifications
You must be signed in to change notification settings - Fork 4
How to Debug Assignments
Dennis Bautembach edited this page Mar 19, 2021
·
4 revisions
- Open the "developer tools" inside your browser (this tutorial is based on Chrome, but Firefox (and all oder modern browser) are virtually identical in this regard):
- 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:
- 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 ofthis.s
andthis.v
over time. I inserted an emptyconsole.log()
call to force a newline and make the output more readable:
- 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 updatingthis.s
andthis.v
, so I can step through the code line by line and see their values changing live. All my local variable's 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":
- 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: