如何调试js文件

来源于：http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code

http://stackoverflow.com/documentation/javascript/642/debugging

本身主要使用chrome浏览器，

 

所以调试主要是使用F12，然后在js文件里面增加“debugger;”

 

 

There is a debugger keyword in JavaScript to debug the JavaScript code. Put debugger; snippet in your JavaScript code. It will automatically start debugging the JavaScript code at that point.

For example:

Suppose this is your test.js file

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();
When the browser runs the web page in developer option with enabled debugger, then it automatically starts debugging from the debugger; point.
There should be opened the developer window the browser.

 

Breakpoints pause your program once execution reaches a certain point. You can then step through the program line by line, observing its execution and inspecting the contents of your variables.

There are three ways of creating breakpoints.

1. From code, using the debugger; statement.
2. From the browser, using the Developer Tools.
3. From an Integrated Development Environment (IDE).

Debugger Statement

You can place a debugger; statement anywhere in your JavaScript code. Once the JS interpreter reaches that line, it will stop the script execution, allowing you to inspect variables and step through your code.

Developer Tools

The second option is to add a breakpoint directly into the code from the browser's Developer Tools.

Opening the Developer Tools

Chrome or Firefox

1. Press F12 to open Developer Tools
2. Switch to the Sources tab (Chrome) or Debugger tab (Firefox)
3. Press Ctrl+P and type the name of your JavaScript file
4. Press Enter to open it.

Internet Explorer or Edge

1. Press F12 to open Developer Tools
2. Switch to the Debugger tab.
3. Use the folder icon near the upper-left corner of the window to open a file-selection pane; you can find your JavaScript file there.

Safari

1. Press Command+Option+C to open Developer Tools
2. Switch to the Resources tab
3. Open the "Scripts" folder in the left-side panel
4. Select your JavaScript file.

Adding a breakpoint from the Developer Tools

Once you have your JavaScript file open in Developer Tools, you can click a line number to place a breakpoint. The next time your program runs, it will pause there.

Note about Minified Sources: If your source is minified, you can Pretty Print it. In Chrome, this is done by clicking on the {} button in the bottom right corner of the source code viewer.

IDEs

Visual Studio Code (VSC)

VSC has built-in support for debugging JavaScript (see https://code.visualstudio.com/docs/editor/debugging).

1. Click the Debug button on the left or Ctrl+Shift+D
2. If not already done, create a launch configuration file (launch.json) by pressing the gear icon.
3. Run the code from VSC by pressing the green play button or hit F5

Adding a breakpoint in VSC

Click next to the line number in your JavaScript source file to add a breakpoint (will be marked red). To delete the breakpoint, click the red circle again.

TIP: You can also utilise the conditional breakpoints in browser's dev tools. These help in skipping unnecessary breaks in execution. Example Scenario: You want to examine a variable in a loop exactly at 5th iteration.