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 ~