JavaScript Debugging

Errors will always occur whenever you write some new computer code.

JavaScript Debugging

Writing JavaScript without a debugger is challenging.

Your code may contain syntax errors or logical errors, which are difficult to diagnose.

Generally, if JavaScript code contains errors, nothing may happen. There will be no error messages, and there will be no information available to find errors.

Generally, every time you try to write new JavaScript code, errors may occur.

JavaScript Debugger

Finding errors in programming code is called code debugging.

Debugging is not simple. But fortunately, all modern browsers have built-in debuggers.

Built-in debuggers can be opened or closed, forcing error reports to be given to the user.

Through the debugger, you can also set breakpoints (the location where code execution is interrupted) and check variables during code execution.

Generally, you can start the debugger in the browser by pressing F12 and then selecting 'Console' from the debugger menu.

console.log() method

If your browser supports debugging, you can use console.log() Display JavaScript values in the debugging window:

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

Try it yourself

Tip:Please visit our JavaScript Console reference manual for more information about the console.log() method.

Set a breakpoint

In the debugging window, you can set breakpoints in JavaScript code.

At each breakpoint, JavaScript will stop executing so that you can check the values of JavaScript.

After checking the value, you can resume code execution.

debugger keyword

debugger The keyword stops JavaScript execution and calls (if any) the debugging function.

This is the same functionality as setting a breakpoint in the debugger.

If the debugger is not available,debugger The statement has no effect.

If the debugger is open, this code will stop running before executing the third line.

Example

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

Try it yourself

Debugging Tools of Mainstream Browsers

Usually, you can enable debugging through the F12 key in the browser and select 'Console' in the debugger menu.

If not, please follow the following steps:

Chrome

  • Open the browser
  • From Menu, select Tools
  • From Tools, select Developer Tools
  • Finally, select Console

Firefox Firebug

  • Open the browser
  • Go to the web page: http://www.getfirebug.com
  • According to the following instructions: How to Install Firebug

Internet Explorer

  • Open the browser
  • From Menu, select Tools
  • From Tools, select Developer Tools
  • Finally, select Console

Opera

  • Open the browser
  • Please visit the web page: http://dev.opera.com
  • According to the following instructions: How to Install Firebug Lite

Safari Develop Menu

  • Click Safari Menu, Preferences, Advanced
  • Check 'Enable Developer Menu in Menu Bar'
  • When the new option 'Developer' appears in the menu, select 'Show Error Console'

Did you know?

Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.

The first known computer bug was a real insect (a bug) that got stuck in an electronic device.