Some practical tips from Chrome DevTools
Drag and drop elements from the elements panel
References the selected elements in the Elements panel in the console
Use the results of the last operation in the console
Modify the state of the element and add CSS
Find the location of the CSS property definition
Save the modified CSS styles to a file
A screenshot of a single element
Use shift-Enter in the console (execute multiple consecutive lines of input)
Cleaning console
Jump…
Listening expression
XHR/FETCH debugging
Debugging of DOM modifications
——————————————— — (gorgeous dividing line)
Drag and drop elements from the elements panel
From the elements palette, you can drag and drop any element to any other part of the page.
Selected elements in the reference elements panel in the console
Select the element in the elements panel and you can reference it in the console with $0. Magic
Surprise and this kind of operation (works)
Use the results of the last operation in the console
Enter $_ in the console to reference the result of the last operation
He wanted $? Even more amazing (works)
Modify the state of the element and add CSS
We all know that. Just take a screenshot
Let’s see the next one
Find the location of the CSS property definition
Use cmd-click(Ctrl-click on Windows) to click on the CSS properties in an element panel to jump to the Source Panel.
All right, all right (works)
Save the modified CSS styles to a file
Modify the styles on the right side of the Elements panel, and then use the method above to jump into the Source Panel to see the CSS source file. Right click on the file name and save as locally
A screenshot of a single element
Select an element and press cmd-shift-p(or crtl-shift-p on Windows) to open the Command Menu and then enter “Screenshot” and select Capture node screenshot
Interesting feature, unfortunately I failed the experiment… (66.0.3359.139 Chrome version, you can try), in fact, there are two other screenshot capture full siz screenshot, Screenshot from capture screenshot is when the document displays the area I succeeded
Use shift-Enter to execute multiple consecutive lines of input in the console
Multi-line input execution, saying nothing, useful (works)
Use shit+ Enter every newline
Cleaning console
Use Ctrl-L or cmd-k to clean up.
Jump…
In the source panel
- Cmd-o (Ctrl-o on Windows) Displays all files loaded on the current page
-
Cmd-shift-o (ctrl-shift-o in Windows) Displays the symbol table (properties, functions, and classes) of the current file.
-
Ctrl-g to the specified line of the current file
Close test work
Listening expression
Add an expression to the Debug session instead of manually evaluating it
In Source Panel, if you don’t have the Console, right-click -> Evaluate in Console
XHR/FETCH debugging
Add breakpoints in XHR/FETCH Breakpoints on the right side of the Source Panel.
In addition, THE Event Listener Breakpoint can bring too many breakpoints, such as: Animation (Animation), Canvas, Clipboard, DOM Mutaion, keyboard, oh too many, you can personally try
Debugging of DOM modifications
Right-click on the selected element and select Break on to open up subtree modifications, which means that breakpoints are triggered if scripts modify child elements, Atrribute modification, and Node removal
Article tail benefits presented
Useful commands in the command line opened by cmd-shfit-p (there are more to explore)
- Show layers Check the rendering status of the current page, the status of the composite layer (see Taobao for the composite layer), the specific scope of the drawing, and so on to check the performance
- The Show Perfomance Monitor is as its name suggests
- The Show Frame per Second (FPS) meter is as its name suggests
- Show Paint Flashing les shows the repainted area of the current page