chrome devtools的5个鲜为人知的功能
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