Open the command menu Menu
Windows：ctrl + shift + p
MAC：command + shift + p
Order
dock to under Adjust the docking position of the console to the bottom
undock the console to stand alone
screenshot capture full screen
capture capture node screenshot node screenshot
Query the Dom tree
Windows：ctrl + f
MAC：command + f
Find nodes, such as div
copy style
Select the copy css style in the right-click copy
panel
Computed
Click show all to see the attributes inherited from the parent element
Click group to divide according to layout and text style
Layout
Layout, what grid, flexbox
uses elastic layout are listed
Click this small box to switch the various properties of the elastic layout
Event Listeners
The bound events are listed
Properties
node properties
DOM Breakpoints
A way to interrupt the code,
right-click a node, click Break on
subtree
. The child nodes in this node are modified. The js running pause
attribute
attribute of this node is modified. Pause
node removel
This node is deleted, pause
Once selected, it will appear on the right.
Another way to break code:
Select the following monitoring, choose which one, and it will be interrupted when encountering this operation.
If the frame is used, it will be transferred to the frame code after interruption. If you don’t want to jump to the frame,
there is a Call Stack on the right, and there is an Add script to ignore list. Click to ignore this file.
Accessibility
Build accessible pages, just for the blind
$0
the currently selected element
$1
the last selected label
console.clear()
clears the entire console
· console.time() writes the code behind console.timeEnd()
judges the code execution time
console.table() puts objects in it
and can be listed into a table
The process of changing observations
Enter the value to be observed in the box below
debugging
1. Add a: debugger to the code, then it will pause to that line, and then you can debug step by step, and the value will be displayed later.
2. Click the line number to break the point (breakpoint), click the pause playback button, it will jump to the line of the next breakpoint.
fold
If you don't want to read part of the content, you can fold it up. Open Meun, enter enable code folding
monitor a variable
Watch
Network
Here you can filter resources
. Check Preserve log to keep historical records, and then display the request sent by the previous page. 
Check Disable cache to remove the browser cache.
No throtting throttle, simulate user network environment, 3G or others.
A throttle can be customized.
This can set the network.
After clicking, you can choose User agent, not to change the kernel, but to change the header of the sent webpage to the string below. Sometimes the backend will do special processing according to the header sent by the frontend.
Click this button to download the interaction data between the browser and the server, let the customer download the file, send it over, and then import it on your computer, so that you can simulate the state of the customer visiting this page at that time.
Summary of web page requests.
Application
Storage
localStorage.setItem(‘name’,‘jack’)
localStorage.getItem(‘name’)
localStorage.clear(‘name’)
document.cookie = ‘username=john’
设置一条cookie