Chrome指令——浏览器调试器命令大全

Chrome操作指南——入门篇（四） command

用过vscode中的Command Palette的同学肯定能够体会到，通过键入相应的指令就可以执行相应的操作，是多么一键美妙的事情。而在chrome的devtool中也有类似的功能，并且其指令之丰富，丝毫不逊色于vscode。

今天，我们就来一起看看这些指令，并了解它们的用法，相信你看完本篇文章后，一定会爱上它。

一、指令概述

在devtool中，指令分为两大类：

• 内置指令： 这些指令是chrome内置的，不需要安装任何扩展就可以使用。
• 扩展指令： 这些指令是通过扩展来实现的，需要安装相应的扩展后才能使用。

二、内置指令

内置指令有很多，这里只列出一些常用的指令：

• 打开devtool： Ctrl+Shift+I（Windows）/Command+Option+I（Mac）
• 切换devtool面板： Ctrl+Shift+J（Windows）/Command+Option+J（Mac）
• 刷新页面： Ctrl+R（Windows）/Command+R（Mac）
• 后退： Alt+Left（Windows）/Command+[（Mac）
• 前进： Alt+Right（Windows）/Command+]（Mac）
• 停止加载： Esc
• 放大： Ctrl++（Windows）/Command++（Mac）
• 缩小： Ctrl+-（Windows）/Command+-（Mac）
• 重置缩放： Ctrl+0（Windows）/Command+0（Mac）
• 查找： Ctrl+F（Windows）/Command+F（Mac）
• 替换： Ctrl+H（Windows）/Command+H（Mac）
• 转到行： Ctrl+G（Windows）/Command+G（Mac）
• 复制： Ctrl+C（Windows）/Command+C（Mac）
• 剪切： Ctrl+X（Windows）/Command+X（Mac）
• 粘贴： Ctrl+V（Windows）/Command+V（Mac）
• 删除： Del（Windows）/Backspace（Mac）
• 重做： Ctrl+Y（Windows）/Command+Y（Mac）
• 撤销： Ctrl+Z（Windows）/Command+Z（Mac）

三、扩展指令

扩展指令也非常丰富，这里只列出一些常用的扩展指令：

• Lighthouse： 一个可以对网页进行性能、可访问性和SEO等方面的分析的扩展。
• Web Developer： 一个可以添加各种开发工具到chrome的扩展，比如Color Picker、DOM Inspector、JavaScript Console等。
• React Developer Tools： 一个专门用于React开发的扩展，可以帮助你调试React应用。
• Redux DevTools： 一个专门用于Redux开发的扩展，可以帮助你调试Redux应用。
• Vue.js devtools： 一个专门用于Vue.js开发的扩展，可以帮助你调试Vue.js应用。

四、使用指令

要使用指令，你只需要在devtool中输入指令，然后按回车键即可。例如，要打开devtool，你只需要在chrome的地址栏中输入devtools，然后按回车键即可。

五、总结

以上就是chrome中的一些常用指令，希望你能够熟练掌握它们，并将其应用到你的日常开发工作中。