With some advice from Khan Academy's Pamela, we have found an effective way to debug a program in the Khan Academy environment.
- Open your Khan Academy program in Google Chrome.
- Insert the following code at the top of your program:
/* jshint debug:true */ debugger;
- Right-click in the code area and select Inspect element.
- Select the Sources tab. This will open the source tab ga.js
- Now you need to make some small edit in your code, e.g. insert a newline. This forces the source of your program to load into the debugger. The tab for your source code will have a name of the form VMxxx where xxx is some integer.
There are some cases where it is a bit tricky to set a breakpoint so try the following:
- Set a breakpoint on a line that is part of your main/outer level program, (i.e. not in a function).
- or, take 1 step into (or over) to get control into your program code.
- You don't seem to be able to set a breakpoint within a function or method until after the function has been parsed or passed by as the program is run/loaded for the first time.
- After you have reached a breakpoint that is past (lower down in the program), you can then set a breakpoint inside a function or method higher up in the program.
- Set the breakpoint on a line of code inside the curly brackets of a function.
It is quite easy to inspect variables or object properties that are local to a function or object prototype.
If you need to inspect a variable at the outer global level of your program, it can be quite difficult to find, therefore recommend using watch.
Sometimes when you press the run button, it doesn't respond. Take care to hit the arrow properly and if it doesn't work straight away, keep trying!
It does work pretty well.