HomeProgramJavaScript

How to Debug Javascript

The ability to debug code is an essential tool in any programmer's arsenal. Debugging will give you inside information into how your program is functioning, in real-time, as it runs. Javascript offers a unique but familiar method of...
Method 1 of 2:

Using the Debugger; Statement

  1. How to Debug Javascript Picture 1How to Debug Javascript Picture 1
    Determine if debugger; is the correct tool for this situation. Ask yourself:
    1. Do I need to look at this in great detail?
    2. Do I want to know the values, and the path the program is taking?
    3. Can I effectively test this through the developer window?
  2. How to Debug Javascript Picture 2How to Debug Javascript Picture 2
    Before the problem area, enter the statement: debugger;
  3. How to Debug Javascript Picture 3How to Debug Javascript Picture 3
    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.
  4. How to Debug Javascript Picture 4How to Debug Javascript Picture 4
    Once inside of developer tools, run your code again. This time it will stop at the debugger; statement.
  5. How to Debug Javascript Picture 5How to Debug Javascript Picture 5
    Step through your program, line-by-line, by pressing F10.
  6. How to Debug Javascript Picture 6How to Debug Javascript Picture 6
    Repeat the process as necessary. You may have to restart your program to trigger the debugger; again.
  7. How to Debug Javascript Picture 7How to Debug Javascript Picture 7
    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();

  1. How to Debug Javascript Picture 8How to Debug Javascript Picture 8
    Determine if alert(); is the correct tool for this situation. Ask yourself:
    1. Do I only need to know if a certain part of the program is running?
    2. Do I only want to know one value, and timing is not important?
  2. How to Debug Javascript Picture 9How to Debug Javascript Picture 9
    After the problem area, enter the statement: alert();
    1. Note that this alert will print, "This is an alert." To the screen. This could be any value.
  3. How to Debug Javascript Picture 10How to Debug Javascript Picture 10
    Run your code as normal.
    1. Once this point is reached, it will create a popup on your screen with whatever information put into the argument of alert();
  4. How to Debug Javascript Picture 11How to Debug Javascript Picture 11
    Use the information from the alert(); to solve the issue.
    1. Is alert(); printing what I expect it to?
    2. Is alert(); printing at all?
  5. How to Debug Javascript Picture 12How to Debug Javascript Picture 12
    Repeat the process as necessary. You may have to restart your program to trigger the alert(); again.
  6. Be certain to remove the alert(); statement when you're done.
How to Debug Javascript Picture 13How to Debug Javascript Picture 13
4.5 ★ | 2 Vote
alertdebuggerstatementprogram

You should read it

Maybe you are interested

JavaScript