This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021
How -to-use- Chrome – Devtools-like -a-pro
Web development, daily contact with Chrome DevTools, even surfing, will be habitual Ctrl+Shift+C open the console look ~
This one contains 20 Chrome DevTools tips for a more professional and Dope item ~(●’◡’●) ~
At the end of the article blind guess this few you do not know 🐶
1. Specify the forward
In the Sources panel, Ctrl + O to raise the input box, : line number: enter, you can jump to the specified position;
2. Expand all child nodes
In the Elements panel, mouse over the DOM node and Alt + click to expand all the child nodes of the node.
3. Use CSS selectors to search the DOM
In the Elements panel, press CTRL + F to search for CSS classes;
4. Event monitoring and jump
You can see the Event Listeners in the Elements panel, and then click Show Function Definition to jump to the Event.
5. Run custom Snippets
Sources > Snippets, create, type the name, type the code, click snippet to run;
6. Device simulation sensor
Can simulate touch screen, geographic coordinates, acceleration, etc.;
7. Import the file mapping
In the Sources panel, right-click in the Sources window and select Add Folder to Workspace to import the Network Resources to be mapped. Right-click the file and select Map to Network Resources to change the code to view the effect.
8. Drag and drop selection
In the Sources panel, hold Alt and drag the mouse to select one at a time.
9. Quickly edit elements
In the Elements panel, directly select the DOM tag and double-click it to edit it quickly.
10. Change the DevTools location
You can change the location of the DevTools window by placing it left, right, down, or on its own
Get the element with $0
In the Console panel, type $0 to print the selected element in the Elments panel;
12. Skip to Elements
Go to Elements from the Console and right-click Reveal in Elements Panel.
13. Customize your color palette
Click on the color switch icon in the style to open a custom color palette; You can also choose Material Design, more on Material Design;
14. Trigger pseudo classes
I believe we will use this bug debugging ~
15. Media enquiries
Media inquiries, this is not to explain, daily ~
16. Network Film Strip
The Film Strip displays rendered screenshots of the page from start to finish, like a movie Film. You can click on the screenshots and view them in the Timeline view.
17. Copy the Response
Right click on the Request link in the Network panel and you can Copy many things, or Copy Response in different forms!
18. Multiple cursor selection
In the Sources panel, use Ctrl + click to add multiple cursor selections, or use Ctrl + U to undo the previous selection;
19. Copy the image to Base64 encoding
Operate as shown in figure ~
20. Set the slow curve
Bezier curves can be set in the Styles panel
Summary: U1S1, some of the use is a little bit common, but there are some really unknown, such as importing files for mapping, running custom Snippets, copying images to Base64, etc., it is basically useless, it is a kind of learning to eliminate the blindness. (Applause)
I am Anthony Nuggets, the public account of the same name, every day a pawn, dig a gold, goodbye ~