JavaScript debugging


When writing JavaScript, it would be a pain without debugging tools.

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 difficult to find.

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


Note Usually, errors will occur when you write a new JavaScript code.

JavaScript debugging tools

Finding errors in program code is called code debugging.

Debugging is hard, but luckily, many browsers have built-in debugging tools.

Built-in debugging tools can be started or closed, and serious error messages will be sent to the user.

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

To enable the debugging tool in the browser, generally 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 JavaScript values ​​on the debug window:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Set breakpoints

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

At each breakpoint, the execution of JavaScript code will be stopped so that we can check The value of a JavaScript variable.

After the check is completed, the code (such as the play button) can be re-executed.

debugger keyword

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

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

The debugger statement will not work if no debugging is available.

Enable debugger and the code stops executing before the third line.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>

<body>
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

Debugging tools for major browsers

Usually, to enable debugging tools in a browser, 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 the tool in the menu.

  • Select Developer Tools among tools.

  • Finally, select Console.

Firefox Browser

  • Open the browser.

  • Visit page:
    http://www.getfirebug.com.

  • Follow the instructions:
    Install Firebug.

Internet Explorer browser.

  • Open the browser.

  • Select the tool in the menu.

  • Select Developer Tools among tools.

  • Finally, select Console.

Opera

  • Open the browser.

  • Opera’s built-in debugging tool is Dragonfly. For detailed instructions, please visit the page:
    http://www.opera.com/dragonfly/.

Safari

  • Open the browser.

  • Right-click the mouse and select Inspect Element.

  • Select "Console" in the window that pops up at the bottom.