General article
copy
You can use the global copy() method to copy any resource you can from the console, which is a normal copy operation. $_ is a reference to the result of the last execution.
Shortcuts and general tips
Switch the layout display of the DevTools window
When DevTools is used, it is displayed at the bottom of the page. If you want to switch it to the right, you can use the shortcut CTRL + Shift + D.
Increase/decrease
When adjusting styles, we use up and down arrows to increase or decrease the value of a style. The up/down arrows increase/decrease by 1, the up/down arrows combine Shift to achieve a span of 10, CTRL to achieve 100, and Alt to achieve a span of 0.1.
Elements, logs, sources & network
Each of the first four main panels in DevTools supports [CTRL] + [F] shortcuts, and you can use the corresponding query method to find information.
Console, Network, and Source can also be case-sensitive.
screenshots
A screenshot of a Dom node can be achieved through the Command menu without the help of other tools.
First of all, select the DOM you want to Capture the image, Ctrl+Shift+ P, enter screen, select Capture node screenshot to Capture the DOM page we selected, Capture full size screenshot can Capture the complete current page.
Quick switch panel
DevTool uses a two-panel layout in the form of:
Element panel + Resource panel, which often aligns different panels horizontally or vertically, depending on the available portion of the screen. Open Command with Ctrl+Shift+ P and type Layout in the menu
Layout of the resource panel.
Quick topic switch
CTRL + Shift + P to switch between a bright theme and a dark theme.
The console article
The console in the $
In Chrome’s Elements panel, $0 is a reference to our currently selected HTML node. $1 is a reference to the last node we selected, and so on, $2 is a reference to the node we selected before that, and so on, all the way up to $4. To verify this, select a DOM in the elements panel and type $0 in the console.
The “debugger” in the console
Console.log () is one of the most common methods we use during debugging. Sometimes, we print the same value of the object in cosole.log() after modifying some property in the object, and then console.log() again. Why does this happen? The console saves the contents of the object as references before printing them. WebKit’s console.log does not take a snapshot of the object immediately. Instead, it stores a reference to the object and then takes a snapshot when the code returns to the event queue. That is, the WebKit kernel’s Chrome console reads one layer of data by default, and when you click expand, it goes to the heap to read the properties and the next layer of data.
So how do we debug?
1. Use the Debugger breakpoint
2. Use json.stringify () to process the printed results
Conditional breakpoints in console
You can edit a conditional breakpoint. Right-click the line number and select Add Conditional BreakPoint… (Add conditional breakpoint)
The following is an example:
Several methods in console are introduced
console.arrest()
When the first argument we pass in is “false,” console.assert prints the value that follows it.
let a = null;
console.arrest(a, ‘a is empty’)
You don’t have to say let a = null; if(! a) {console.log(‘a is empty’)}
The console. The log {}
For example, const name= ‘zhang SAN’;
const age = 10;
const id = 1;
console.log({name,age,id});
console.table
If it is an array or an object, it can be displayed as a list through console.table.
console.dir
In some cases, we need to view the details of a DOM, but console.log() can only get the basic structure of the DOM. In this case, we can use console.dir() to print out all the information about the currently selected DOM.
Time stamp the log
CTRL + Shift + P Open Command, enter time, and select Show timestamp to add time information to the printed information.
Monitoring execution time
-
Console.time () – Starts a timer
-
Console.timeend () – Ends the timer and prints the result on the console
console.time()
setTimeout(()=> {
console.timeEnd()
}, 1000).
You can see the following result in the control state:
The network article
In most cases, we look at the Network panel to see the request status of each interface. That is, we can hide two resource request world panels by clicking area 3 to see more requests of area 1.
The request filtering
You can match requests with strings, re’s, request methods, request states, and so on.
Resend the XHR request
In practice, we will encounter a situation where the request interface succeeds, but the response data is not visible. Then we can get the response data by re-sending the request.
XHR/fetch the breakpoint
There are scenarios where we need to restock an already sent request, and we can use the XHR/ FETCH breakpoint.
Click + to fill in the field for the URL you want to intercept, or we can select Any XHR or fetch for all requests.
Panel element techniques
Hide elements by ‘h’
Select the element you want to hide and click H to hide the DOM element.
Dom drag and drop
Sometimes, if you want to see how a DOM looks somewhere on the page, you can simply select the DOM on Elements and drag and drop it under any DOM element. Combine control+ up arrow/down arrow to move the DOM up and down.
Dom editor
Right-click dom and select Edit as HTML to Edit the current DOM, which can be undone by CTRL + Z.
Dom breakpoint
Sometimes, we will modify the DOM in JS, and we want to capture where the current DOM has been modified by using dom breakpoints.
- Select Subtree Modifications: Listen for any events that a node within it is being removed or added to
- Select Attribute Modifications: Listens for events when a value is added, removed, or modified from a currently selected node
- Select Node Removal: Listen for the event when the selected element is removed