Uncommon but useful debugging tips for Chrome

dom

Add the selecteddomNodes for global variables need to be debugged convenientlydomThe scene of

Applicable to scenarios where there are multiple operations on the DOM

Force Node State (triggering) Status

Debug a state of the DOM

copy element

Copy the selected DOM information

style/class

Adds a class name to the selected element

Quickly add a class to the element

Changes the box model size of the element

Rapid change element size of the box model (margin/padding/width/height, etc.)

network

block specific request

Block specifies the request

Command + shift + p -> show request blocking

Change the user agent for the request

Change the user agent of the request

Shortcut key: Command + Shift + p -> Network Conditions To switch user Agent

javascript

Breakpoint, the act of breaking the browser (click, mouse, etc.)

Intercept the behavior of the browser

Quickly change the value of the intercepted variable

Double click to change the value of the intercept variable

Add watch expression

Add watch expression

Conditional breakpoints

Set the condition of the breakpoint

Quickly debug code snippets

Snippet code debugging without creating a specific page

Reference documentation

• Chrome DevTools