• 5 Lesser-known features of Chrome Devtools
  • Manan Tank
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: He Xue
  • Proofreader: Calali Xiny

Five little-known features of Chrome developer Tools

1. Switch the class name

Jump to the.cls TAB to switch class names

2. Scroll to view

Are you looking at HTML source code and unable to locate the corresponding element on the page? Hey, just scroll to the view!

3. Create and run code snippets

Do you want to run some javascript code, but feel weird pasting it to the console because it’s too much? Hey, you can actually create a code snippet and run it!

4. Add the class name and automatic suggestion

When you add a class name using the.cls TAB, it makes associations with similar classes that already exist in CSS so you can quickly compare them

5. designMode

With designMode, you can edit everything directly


All right, guys!

Hopefully you’ll find a new gadget or two to improve the workflow of your developer tools. Cheers!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.


The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.