Improve Your Chrome DevTools Workflow With These Tips

这些提示可改善您的Chrome DevTools工作流程

1.切换类 (1. toggle classes)

Go to .cls tab and toggle the classes

转到.cls选项卡并切换类

2.滚动查看 (2. scroll to view)

Are you going through HTML and don’t know where the particular thing is on the page? Well, just scroll that into view!

您是否正在浏览HTML，但不知道特定内容在页面上的什么位置？ 好吧，只需将其滚动到视图中即可！

3.创建并运行代码片段 (3. Create and run code snippets)

Do you want to run some javascript code, but the code is too big and pasting that into console feels weird? Well, you can create code snippets and run that snippet!

您是否要运行一些javascript代码，但是代码太大，将其粘贴到控制台中感觉很奇怪？ 好了，您可以创建代码段并运行该代码段！

4.添加类别和自动建议 (4. Adding classes and auto-suggestion)

When you add a class using the .cls tab, it suggests similar classes that exist in the CSS, which quickly lets you compare them

当您使用.cls标签添加类时，它会建议CSS中存在类似的类，从而可以快速比较它们

5. designMode (5. designMode)

Edit everything directly by turning on the designMode

通过打开designMode直接编辑所有内容

That’s all folks!

那是所有人！

Hope you find one or two new things that can improve your dev tools workflow. Cheers!

希望您发现一两个可以改善开发工具工作流程的新事物。 干杯!

翻译自: https://levelup.gitconnected.com/5-lesser-known-features-of-chrome-devtools-1ff3cd2a7518