The other key that is most used by every front-end practitioner besides F5 is F12.

Today, big god (@ small fish 2) recommend me a website, just know Chrome still have all sorts of SAO pose.

The website is umaar.com/dev-tips/

I have read all of them, and it is useful to list a few people who I did not know before.

1. Has online toning ever bothered you?




2 source code quickly locate to a line! ctrl + p




3. When the interface fails, the elder brother in the background will respond to you?




4. You’re still unwrapping the DOM? Alt + Click




5. Did you make a mistake and interrupt?




6. How often do you forget where you bind events?




7. Do you have to change the code at the break point?




8. The most intuitive way to look at the DOM hierarchy?




9. Look for specific requests. Is the filter used?




10. Is it inconvenient to adjust the DOM structure in Elements?




11. Want to know, where is the code of some image loading? Initiator!!!!!




12. Don’t want to load a file?





Many do not list, can look at the beginning of the website. Look at a few functions my computer (Win10) is not, should be related to Chrome version.

There are a lot of features in developer tools, and sometimes they don’t need to be used at all.

Developers.google.com/web/tools/c…

Chinese version:

www.css88.com/doc/chrome-…


= = = = = = = = = = = = = = = = = = = = = =

Supplement:

See comments asking what GIF maker software is.

Searched, should be www.techsmith.com/, looking at the explanation, said software is too professional.

But I’ve used two nice little apps that are very easy to get started with:

  • Record the screen: www.cockos.com/licecap/
  • Screen to enlarge: docs.microsoft.com/zh-cn/sysin…

The effect is as follows:


In this paper, to the end.