这是我参与8月更文挑战的第9天,活动详情查看:8月更文挑战
前言
九边大大在《向上生长》中曾提及:“一个人掌握了复杂工具,才真正具备了能力。人的能力只有和工具叠加起来,才能形成效果叠加”,我深以为然。工具带来的效率提升不言而喻,我们有幸出生在这个各类工具都已经发展得相对成熟的年代,在前人种的大树下乘凉。那么,对 Chrome 这个大树,你的认识有多少?DevTools 的每个面板都认识了吗?Chrome 内置的 Command 用过几个?Chrome 可能远比你想象中强大!
Command
这里首先想介绍的是 Command。打开 DevTools 后,Ctrl + Shift + P
打开 Command 面板,第一次打开 Command 的同学,你可能会有发现新大陆的感觉。这里集成了很多快速操作的方法。
面板中有的,它有
首先是很多面板中能找到的功能,也会同时提供 Command 的调用方式。比起在面板中苦苦寻觅,使用 Command 直接搜索关键词会更方便呐~ 习惯用命令的同学你一定会喜欢的。
以切换主题色为例,你可以在可视面板中找到 Settings - Performance - Appearance - theme 进行设置:
你也可以使用 Command: Ctrl + shift + P
,输入 theme,是的,然后咱就看到它了。
再比如切换显示面板、清除 console 历史、设置颜色格式等,command 都提供了相应的指令。习惯用键盘的同学,完全可以用 command 进行这些操作。
面板中没有的,它也有
如果你觉得上面那些面板里也能找到的东西不算啥,Command 里边还有很多被隐藏起来的功能呢!
截图
chrome 内置的截图功能你玩过了嘛?仍然是那个熟悉的 Ctrl + Shift + P
,输入 capture
,我们可以看到 chrome 内置了几种截图方式:自选区域截取、整页截取(比滚动切图更高效!)、可视区截取、节点截取。骄傲地告诉妈妈,咱再也不用借助第三方的截图工具啦~
切换布局
还是 Ctrl + Shift + P
,输入 layout
,左右布局、上下布局任君选择~
Command 命令类型
Command 集成了非常丰富的方法,按标签可以分为:
Panel
、Drawer
、Appearance
、Console
、Debugger
、Elements
、Global
、Grid
、Help
、Mobile
、Navigation
、Network
、Performance
、Rendering
、Resources
、Screenshot
、Sensors
、Settings
、Sources
。
需要查找功能的时候也可以借助这些关键字快速找到想要的功能。Command 的介绍就先到这里啦,更多的功能可以在实践中慢慢发现吧!下一篇咱们聊聊 console,console 又会给我们带来什么样的惊喜呢?可以期待一下~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!