JavaScript debugging

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.

JavaScript debugging tools

Finding errors in program code is called code debugging.

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

The 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.

For debugging JavaScript programs, using console.log() is a better way than alert(). The reason is that the alert() function blocks the execution of the JavaScript program. , thus causing side effects; console.log() only prints relevant information in the console, so it does not cause similar concerns.

What is console.log()?

Except for some very old versions of browsers, most browsers today have built-in debugging functions; even if they do not have debugging functions, they can be supplemented by installing plug-ins. For example, older versions of Firefox do not have built-in debugging tools. In this case, you can add debugging capabilities by installing the Firebug plug-in. On browsers with debugging capabilities, a member variable named console will be registered in the window object, which refers to the console in the debugging tool. Information can be printed in the console by calling the log() function of the console object. For example, the following code will print "Sample log" in the console:

The code is as follows: window.console.log("Sample log");

The above code can Ignore the window object and directly abbreviate it as:

The code is as follows: console.log("Sample log");

console.log() can accept any string, number and JavaScript object. Similar to the alert() function, console.log() can also accept newline character n and tab character t. The debugging information printed by the console.log() statement can be seen in the browser's debugging console. The behavior of console.log() may vary in different browsers.

      
  
 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。 
  

debugger keyword

debugger keyword is used to stop executing 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.

Debugging tools of major browsers

Usually, to enable debugging tools in browsers, you usually 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 Tools from the menu. Select Developer Tools in 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 Tools from the menu. Select Developer Tools in 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.