JavaScript Debugging


When writing JavaScript, it would be a painful thing if there is no debugging tool.


JavaScript Debugging

It is difficult to write JavaScript programs without debugging tools.

Your code may contain syntax errors and logic errors. Without debugging tools, these errors are more difficult to find.

Usually, if there is an error in JavaScript, there will be no prompt message, so you can't find the location of the code error.

NoteUsually, you will make mistakes in the process of writing new JavaScript codes.

JavaScript Debugging Tools

Looking for errors in the program code is called code debugging.

Debugging is difficult, but fortunately, many browsers have built-in debugging tools.

The built-in debugging tool can be started or closed, and serious error messages will be sent to the user.

With debugging tools, we can set breakpoints (where the code stops executing), and can detect variables while the code is executing.

The browser to enable the debugging tool is generally to press the F12 key and select "Console" in the debugging menu.


console.log() Method

If the browser supports debugging, you can use the console.log() method to print the JavaScript value on the debugging window:

Example

a = 5;
b = 6;
c = a + b;
console.log(c);

 Try It! 


Set Breakpoint

In the debug window, you can set breakpoints for JavaScript code.

At each breakpoint, the execution of JavaScript code is stopped so that we can check the value of JavaScript variables.

After checking, you can re-execute the code (such as the play button).


debugger Keyword

The debugger keyword is used to stop the execution of JavaScript and call the debugging function.

This keyword has the same effect as setting a breakpoint in the debugging tool.

If no debugging is available, the debugger statement will not work.

Open the debugger, the code stops execution before the third line.

Example

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

Try It! 


Debugging Tools for Major Browsers

Usually, the browser to enable the debugging tool is generally to press the F12 key and select "Console" in the debugging menu.

The steps for each browser are as follows:

Chrome Browser

  • Open the browser.

  • Select "More Tools" in the menu .

  • Select "Developer Tools" in "More Tools" .

  • Finally, select Console.

Screenshot 2021-12-02 170302.png

Or you can right-click the mouse and select "Inspect" , as shown in the figure below:

Screenshot 2021-12-02 170716.png

Firefox Browser

  • Open the browser.

  • Right-click the mouse and select "Inspect" .

Screenshot 2021-12-02 171318.png

Safari Browser

  • Open the browser.

  • Right-click the mouse and select the check element.

  • Select "Console" in the pop-up window at the bottom.

Microsoft Edge Browser

  • Open the browser.

  • Right-click the mouse and select "Inspect" .

Screenshot 2021-12-02 171713.png

Opera Browser

  • Open the browser.

  • Click on the upper left corner, select "Developer Tools" , and select "WEB Inspector" .


        Or, you can do the simpler way is: right click the mouse and select "Inspect"