This article will ignore some too basic knowledge and details continue to update, welcome to pay attention to ~

This article introduces the use of the Sources panel, screenshot below:

The left panel

  1. Page Indicates that all loaded resources are grouped into folders by domain name.

  2. Snippets are not lost because of refresh, use: Add => Save (CTRL + S)=> Run (Run)=> Remove (Remove)

Note: The following can be understood

  • Filesystem & OverridesLocal folders can be loaded
  • Content scriptsExtension tool scripts, such as Baidu translation plug-ins

Js debug

Everyone knows how to use it.

Right-click the line number to see other debug menus

  1. Add Conditional breakPoint: Allows you to enter an expression that returns a value to determine whether the line of code is paused or not

  2. Blackbox Script: The inside of code that does not follow code, such as a third-party framework. In general, the proper use of f10, F11, f12 does not require this

The right side of the panel

  1. Watch variable monitoring: After adding a variable, the value of the variable is always monitored. If there is no value in the current scope, < not availble > is displayed.

  2. Call Stack: omitted

  3. Scope Scope: Displays the Scope of the breakpoint. The levels are as follows:

  • LocalVariables under the scope when the current scope is expanded
  • Closure (x)The closure scope, where x is the function name
  • ScriptLabel scope
  • GlobalThe global scope Window

  1. Breakpoints: Omitted

  2. XHR/fetch Breakpoints request Breakpoints: ajax and fetch requests can both Breakpoints here and display the Call Stack in the Call Stack for easy tracking

  3. DOM Breakpoints are the HTML Breakpoints listed in the previous article

  4. Global Listeners are events bound to the Window object

  5. Note That click events of a specified type, such as Mouse/click, are blocked

Refer to the link

CompileYouth