如何调试js文件

来源于&＃xff1a;http://stackoverflow.com/questions/988363/how-can-i-debug-my-Javascript-code

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

本身主要使用chrome浏览器&＃xff0c;

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

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

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.

The second option is to add a breakpoint directly into the code from the browser&＃39;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&＃43;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&＃43;Option&＃43;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.

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&＃43;Shift&＃43;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&＃39;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.