The development tools

VScode for Chrome

To set breakpoints

In the HTML source code referenced by js in VScode, Alt+B shortcut opens the default browser, mine is chrome. Press F12 or right-click to enter developer mode. Select Source, then select your OWN HTML Source code, click the breakpoint line number to set, F5 refresh to start breakpoint debugging.

Breakpoint debugging

As shown in figure:

1Indicates that the script continues running until the next breakpoint is hit or the location icon is clicked again to pause if the script is not finished running.

2Function by function, you can quickly get the results of each function.

3Indicates execution inside a function.

4Run out of the current function.

5Run step by step.

6Disable or activate breakpoints.

7Pause the script.

View the results

There are three ways to view the result of a variable value:

  • Step by step to the target position, hover the mouse on the variable, you can view the value of the variable
  • Step by step to the target location, click Scope and Local or Closure (outer)
  • Step by step to the target location and enter the variable name on the Console to view