The sources of Chrome development tools

The sources panel is primarily used to view a list of resources for a Web site and debug JavaScript code

Familiarity with panels

Now that you've finished with the panel, here are some things to try out.

File list

Displays a list of resources referenced in the current page, as in the usual file tree.

Content Area

You can view the script for the open file in this area, or the breakpoint within the zone to break the specified execution line.

Breakpoint Mode:

1. Write Debugger in script

2. Mark breakpoints within the sources panel file.

Debugger

var num = 1; console.log (num); Debugger;

：

Callout Breakpoint:

Click the left button before the line of code below the breakpoint/or right-click to select "Add breakpoint".

：

You can also use Edit breakpoint to control the breakpoint condition by right-clicking on the line of code next to the breakpoint to manipulate the breakpoint state.

For example, a breakpoint is triggered only if num = 5 o'clock is satisfied.

When the breakpoint is executed, the script does not continue down, and the variable information is displayed by placing the mouse over the name of the variable you want to view.

Button Group Introduction

Continue: Continue executing the code until another breakpoint is encountered.

Step_over: In normal steps, you should execute the code in one line, in order to drill down into which code affects the variable being updated. If you call another function in your code, clicking on this button will not go into the function, but will simply skip over and leave the focus on the current function.

Step_into: Enters the called function and the debugger executes it into the first line in the function definition.

Step_out: After you have entered a function, clicking this button causes the rest of the function definition to run, and the debugger will execute it to the parent function.

Disable-breakpoints: Controls the breakpoint on/off button.

Pause-gray: A breakpoint is generated at the exception.

The elem here is wrong and should be ele, so the exception breakpoint is triggered.

Variable monitoring

Listen for variables that are added to the listener list, and on the right side of the panel are buttons that add variables and refresh the list of variables.

The values that are heard at the breakpoint are undefined,0,1.

Stack trace

The call stack is generally called, but it feels better to use a stack trace to describe it. The stack trace shows a complete execution path that causes the code to be paused, giving us an insight into the cause of the error.

In the FNC breakpoint, the panel displays the execution path of the FNC function, which is called from the FNA call FNB,FNB and then the FNA is called, and the stack trace list also has each step called in which file and in the first line of the file.

Scope

The scope content of the function where the current breakpoint is located.

The objects in the current scope are local parameters _obj and Global,this point to the window, and then we take the next step and look at the next breakpoint.

Now the scope object is the local object and Global,this points to obj.

Breakpoint List

Displays a list of breakpoints, showing the number of files/lines/rows of each breakpoint.

Dom Breakpoint List

Adds a breakpoint to the DOM, triggers a breakpoint when the specified condition is reached, truncates the execution of the JavaScript, and navigates to the breakpoint. Please refer to "Chrome developer elements" for details.

Request Breakpoint List

To reach the request to meet the filtering conditions to intercept the breakpoint, click on the right side of the Panel plus button, will jump out of "when URL contains" to fill in the filter conditions.

When a URL interception condition is met, a breakpoint is entered at the point where the request executes. The following is a different URL test that does not meet the criteria.

As expected, and did not enter the breakpoint.

Breakpoint-selectable Event listener list

Opens this list, where you can listen for events and enter breakpoints when the event is triggered, and the debugger stays on the line of the triggering event code. Just expand the list of events and select the event you want to listen to tick.

Code format

When the file is a compressed file, the code is often a line, click the button to display the canonical code format.

Code location

Displays the current focus in a few rows of columns.

Careful friends see this should be found, async and event Listeners (measured, as if with the Elements panel event Listeners corresponds not to) the introduction is not written. This part of Google a lot of information, feel is not the answer, including in the Chrome website of the dev tools introduction also just skipped, did not find the case, so the final conclusion. Would like to have friends to give a supplement ~ of course, the beast is also looking for the answer ...

The sources of Chrome development tools