孔子说:工欲善其事,必先利其器。
老子说:孔子说的对。
针对前端开发人员,谷歌浏览器的好处自然不言而喻,其强大的调试工具更是提供了很多便利,现将开发工具常用的快捷键整理如下,欢迎交流。
本页介绍 Chrome DevTools 中所有键盘快捷键的参考信息。一些快捷键全局可用,而其他快捷键会特定于单一面板。
您也可以在提示中找到快捷键。将鼠标悬停在 DevTools 的 UI 元素上可以显示元素的提示。 如果元素有快捷键,提示将包含快捷键。
访问 DevTools |
在 Windows 上 |
在 Mac 上 |
打开 Developer Tools |
F12、Ctrl + Shift + I
|
Cmd + Opt + I
|
打开/切换检查元素模式和浏览器窗口 |
Ctrl + Shift + C
|
Cmd + Shift + C
|
打开 Developer Tools 并聚焦到控制台 |
Ctrl + Shift + J
|
Cmd + Opt + J
|
检查检查器(取消停靠第一个后按) |
Ctrl + Shift + I
|
Cmd + Opt + I
|
全局键盘快捷键
下列键盘快捷键可以在所有 DevTools 面板中使用:
全局快捷键 |
Windows |
Mac |
显示一般设置对话框 |
?、F1
|
? |
下一个面板 |
Ctrl + ]
|
Cmd + ]
|
上一个面板 |
Ctrl + [
|
Cmd + [
|
在面板历史记录中后退 |
Ctrl + Alt + [
|
Cmd + Opt + [
|
在面板历史记录中前进 |
Ctrl + Alt + ]
|
Cmd + Opt + ]
|
更改停靠位置 |
Ctrl + Shift + D
|
Cmd + Shift + D
|
打开 Device Mode |
Ctrl + Shift + M
|
Cmd + Shift + M
|
切换控制台/在设置对话框打开时将其关闭 |
Esc |
Esc |
刷新页面 |
F5、Ctrl + R
|
Cmd + R
|
刷新忽略缓存内容的页面 |
Ctrl + F5、Ctrl + Shift + R
|
Cmd + Shift + R
|
在当前文件或面板中搜索文本 |
Ctrl + F
|
Cmd + F
|
在所有源中搜索文本 |
Ctrl + Shift + F
|
Cmd + Opt + F
|
按文件名搜索(除了在 Timeline 上) |
Ctrl + O、Ctrl + P
|
Cmd + O、Cmd + P
|
放大(焦点在 DevTools 中时) |
Ctrl + +
|
Cmd + Shift + +
|
缩小 |
Ctrl + -
|
Cmd + Shift + -
|
恢复默认文本大小 |
Ctrl + 0
|
Cmd + 0
|
按面板分类的键盘快捷键
Elements
Elements 面板 |
Windows |
Mac |
撤消更改 |
Ctrl + Z
|
Cmd + Z
|
重做更改 |
Ctrl + Y
|
Cmd + Y、Cmd + Shift + Z
|
导航 |
向上键、向下键
|
向上键、向下键
|
展开/折叠节点 |
向右键、向左键
|
向右键、向左键
|
展开节点 |
点击箭头 |
点击箭头 |
展开/折叠节点及其所有子节点 |
Ctrl + Alt + 点击箭头图标
|
Opt + 点击箭头图标
|
编辑属性 |
Enter、双击属性
|
Enter、双击属性
|
隐藏元素 |
H |
H |
切换为以 HTML 形式编辑 |
F2 |
|
Styles 边栏
Styles 边栏中可用的快捷键:
Styles 边栏 |
Windows |
Mac |
编辑规则 |
点击 |
点击 |
插入新属性 |
点击空格 |
点击空格 |
转到源中样式规则属性声明行 |
Ctrl + 点击属性
|
Cmd + 点击属性
|
转到源中属性值声明行 |
Ctrl + 点击属性值
|
Cmd + 点击属性值
|
在颜色定义值之间循环 |
Shift + 点击颜色选取器框
|
Shift + 点击颜色选取器框
|
编辑下一个/上一个属性 |
Tab、Shift + Tab
|
Tab、Shift + Tab
|
增大/减小值 |
向上键、向下键
|
向上键、向下键
|
以 10 为增量增大/减小值 |
Shift + Up、Shift + Down
|
Shift + Up、Shift + Down
|
以 10 为增量增大/减小值 |
PgUp、PgDown
|
PgUp、PgDown
|
以 100 为增量增大/减小值 |
Shift + PgUp、Shift + PgDown
|
Shift + PgUp、Shift + PgDown
|
以 0.1 为增量增大/减小值 |
Alt + 向上键、Alt + 向下键
|
Opt + 向上键、Opt + 向下键
|
Sources
Sources 面板 |
Windows |
Mac |
暂停/继续脚本执行 |
F8、Ctrl + \
|
F8、Cmd + \
|
越过下一个函数调用 |
F10、Ctrl + '
|
F10、Cmd + '
|
进入下一个函数调用 |
F11、Ctrl + ;
|
F11、Cmd + ;
|
跳出当前函数 |
Shift + F11、Ctrl + Shift + ;
|
Shift + F11、Cmd + Shift + ;
|
选择下一个调用框架 |
Ctrl + .
|
Opt + .
|
选择上一个调用框架 |
Ctrl + ,
|
Opt + ,
|
切换断点条件 |
点击行号、Ctrl + B
|
点击行号、Cmd + B
|
编辑断点条件 |
右键点击行号 |
右键点击行号 |
删除各个单词 |
Ctrl + Delete
|
Opt + Delete
|
为某一行或选定文本添加注释 |
Ctrl + /
|
Cmd + /
|
将更改保存到本地修改 |
Ctrl + S
|
Cmd + S
|
保存所有更改 |
Ctrl + Alt + S
|
Cmd + Opt + S
|
转到行 |
Ctrl + G
|
Ctrl + G
|
按文件名搜索 |
Ctrl + O
|
Cmd + O
|
跳转到行号 |
Ctrl + P + 数字
|
Cmd + P + 数字
|
跳转到列 |
Ctrl + O + 数字 + 数字
|
Cmd + O + 数字 + 数字
|
转到成员 |
Ctrl + Shift + O
|
Cmd + Shift + O
|
关闭活动标签 |
Alt + W
|
Opt + W
|
运行代码段 |
Ctrl + Enter
|
Cmd + Enter
|
在代码编辑器内
代码编辑器 |
Windows |
Mac |
转到匹配的括号 |
Ctrl + M
|
|
跳转到行号 |
Ctrl + P + 数字
|
Cmd + P + 数字
|
跳转到列 |
Ctrl + O + 数字 + 数字
|
Cmd + O + 数字 + 数字
|
切换注释 |
Ctrl + /
|
Cmd + /
|
选择下一个实例 |
Ctrl + D
|
Cmd + D
|
撤消上一个选择 |
Ctrl + U
|
Cmd + U
|
Timeline
Timeline 面板 |
Windows |
Mac |
开始/停止记录 |
Ctrl + E
|
Cmd + E
|
保存时间线数据 |
Ctrl + S
|
Cmd + S
|
加载时间线数据 |
Ctrl + O
|
Cmd + O
|
Profiles
Profiles 面板 |
Windows |
Mac |
开始/停止记录 |
Ctrl + E
|
Cmd + E
|
控制台
控制台快捷键 |
Windows |
Mac |
接受建议 |
向右键 |
向右键 |
上一个命令/行 |
向上键 |
向上键 |
下一个命令/行 |
向下键 |
向下键 |
聚焦到控制台 |
Ctrl + `
|
Ctrl + `
|
清除控制台 |
Ctrl + L
|
Cmd + K、Opt + L
|
多行输入 |
Shift + Enter
|
Ctrl + Return
|
执行 |
Enter |
Return |
Device Mode
Device Mode 快捷键 |
Windows |
Mac |
双指张合放大和缩小 |
Shift + 滚动
|
Shift + 滚动
|
抓屏时
抓屏快捷键 |
Windows |
Mac |
双指张合放大和缩小 |
Alt + 滚动、Ctrl + 点击并用两个手指拖动
|
Opt + 滚动、Cmd + 点击并用两个手指拖动
|
检查元素工具 |
Ctrl + Shift + C
|
Cmd + Shift + C
|