How to Debug Javascript
Method 1 of 2:
Using the Debugger; Statement
-
Determine if debugger; is the correct tool for this situation. Ask yourself:- Do I need to look at this in great detail?
- Do I want to know the values, and the path the program is taking?
- Can I effectively test this through the developer window?
-
Before the problem area, enter the statement: debugger; -
Open your browser's developer tools by right clicking and selecting inspect element. This will be browser specific, but they should all work very similarly. -
Once inside of developer tools, run your code again. This time it will stop at the debugger; statement. -
Step through your program, line-by-line, by pressing F10. -
Repeat the process as necessary. You may have to restart your program to trigger the debugger; again. -
Once you've used the debugger to solve the problem, be sure to remove the statement when you're done.
Method 2 of 2:
Using an Alert();
-
Determine if alert(); is the correct tool for this situation. Ask yourself:- Do I only need to know if a certain part of the program is running?
- Do I only want to know one value, and timing is not important?
-
After the problem area, enter the statement: alert();- Note that this alert will print, "This is an alert." To the screen. This could be any value.
-
Run your code as normal.- Once this point is reached, it will create a popup on your screen with whatever information put into the argument of alert();
-
Use the information from the alert(); to solve the issue.- Is alert(); printing what I expect it to?
- Is alert(); printing at all?
-
Repeat the process as necessary. You may have to restart your program to trigger the alert(); again. - Be certain to remove the alert(); statement when you're done.
Share by
Lesley Montoya
Update 05 March 2020











