panel

Element

View the DOM tree on the left and the style information on the right

  • : hov. CLS adds pseudo classes, and adds classes

  • Computed allows you to see the final style, as well as the rules in effect

  • EventListeners View the events bound to the DOM node

  • toggle device toolbar

    • Switching resolution

    • Switch the DPR

Source

What is a breakpoint

To put it simply, breakpoint debugging is to set a breakpoint on a line of the program. When debugging, the program will stop when it runs to this line, and then you can debug step by step. During debugging, you can see the current value of each variable.

scenario

  • Line-of-code: Know the specific areas of the DevTools code to dot;

  • Conditional line-of-code: knows the specific area to be marked in the DevTools code and sets Conditional conditions to execute breakpoints only if it is true;

  • DOM: Adds in the body to detect the addition, deletion, and attribute changes of nodes or their children;

  • XHR: click when the XHR URL contains specific content;

  • Event Listener: when a specific Event is triggered

  • Exception: Indicates when an Exception is thrown

  • Function: when a particular Function is called

debug(fn)

  • Debugger: Manually typing when desired in written code;

Step through

  • Call Stack Displays the current call Stack

  • Watch examines a variable

  • Skip the current breakpoint and Resume Script Execution

  • Step over the current execution statement, does not enter function details when it encounters a function

  • Step Into the currently executing function

  • Step out Steps out the current execution function

  • Deactive BreakPoints Disables all breakpoints

Other skills

  • Settimeout: For example, with HoverPopup, the mouse disappears as soon as it leaves

  • Hijacking data: e.g. Object.defineproperty, Proxy, when you don’t know where the data is being changed

  • Conditional breakpoint: breakpoint for specific conditions, or for console.log

  • Log Point

Network

Panel is introduced

  • Controls. Use these options to control the appearance and functionality of the Network panel.

  • Filters. Use these options to control which resources are displayed in the Requests Table. Tip: Hold Cmd (Mac) or Ctrl (Windows/Linux) and click Filters to select multiple filters at once.

  • The Overview. This chart shows a timeline of resource retrieval times. If you see multiple vertical lines stacked together, these resources are being retrieved simultaneously.

  • Requests the Table. This table lists each resource retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Click the name of the resource to display more information. Tip: Right-click on any table title outside of Timeline to add or remove columns of information.

  • The Summary. This pane tells you at a glance the total number of requests, the amount of data transferred, and the load time

The toolbar

  • disable cache

  • preserve log

  • Network Status Modification

See the time

Click the Timing TAB to see a detailed breakdown of the individual resource request lifecycle. The life cycle shows the time spent in the following categories:

  • Queuing

  • Stalled

  • If applicable, DNS Lookup, Initial Connection, and SSL Handshake

  • Request sent

  • Waiting (TTFB)

  • Content Download

It is important that more detailed processes take time if the network is abnormal

Console

skills

  • Console. trace prints the current call stack

  • Copy copy

  • $_ last result

  • 0−0-0−5 Indicates the last five DOM nodes selected

Memory

Panel is introduced

  • Red circle 1 is the manually triggered GC

  • Currently allocated memory

Simply determine whether memory leaks occur

  1. It needs to be carried out in traceless mode to eliminate interference such as plug-ins

  2. Do it in some scenario that could cause a memory leak, and then manually trigger the GC to see how the footprint is.

  3. If there is a memory leak, you can run the Take snapshot command to generate snapshots on key nodes and compare the snapshots to find out what occupies the memory

Take the following code for example

var a = []; function add() { for (let i = 0; i < 10000; i++) { a.push({ a: '1' }); }}Copy the code

Initial memory, take a snapshot

After calling add() 10 times and making a snapshot,

On the second snapshot, select comparison mode

You can see a lot of new content taking up

Application

View storage related, such as cookies, localstorage

Task manager

View the TAB memory, CPU, and network usage