Chrome DevTools提供了一些内置的快捷键，开发者利用这些快捷键可以节省常工作中很多日的开发时间。下面列出了每个快捷键在Windows/Linux及Mac中的对应键。其中一些快捷键对于DevTools全局可用，而另一些则只能在单个面板中使用。
打开DevTools
你可以通过以下任何一种方式来访问DevTools：
- 打开浏览器右上角的Chrome菜单
，然后选择“更多工具”–“开发者工具”。
- 在页面任何元素处点击右键，然后选择“审查元素”。
| |
Windows / Linux |
Mac |
| 打开开发者工具 |
F12 , Ctrl + Shift +I
|
Cmd + Opt + I
|
| 切换审查元素模式与浏览器窗口模式 |
Ctrl + Shift + C
|
Cmd + Shift +C
|
| 打开开发者工具并定位到控制台 |
Ctrl + Shift + J
|
Cmd + Opt + J
|
| Inspect the Inspector ( undock first one and press ) |
Ctrl + Shift + I
|
Cmd + Opt + I
|
所有面板
| |
Windows / Linux |
Mac |
| 显示设置对话框 |
? , F1
|
? |
| 下一个面板 |
Ctrl + ]
|
Cmd + ]
|
| 上一个面板 |
Ctrl + [
|
Cmd + [
|
| 最后一个面板 |
Ctrl + Alt + [
|
Cmd + Opt + [
|
| 第一个面板 |
Ctrl + Alt + ]
|
Cmd + Opt + ]
|
| 更改停靠位置(测试发现与添加书签冲突) |
Ctrl + Shift + D
|
Cmd + Shift + D
|
| 打开设备(Device)模式 |
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 + O
|
Cmd + O , Cmd + O
|
| 放大 (当DevTools获得焦点时) |
Ctrl + +
|
Shift + +
|
| 缩小 |
Ctrl + -
|
Shift + -
|
| 恢复默认文字大小 |
Ctrl + 0
|
Shift + 0
|
Elements面板
| |
Windows / Linux |
Mac |
| 撤销更改 |
Ctrl + Z
|
Cmd + Z
|
| 重做 |
Ctrl + Y
|
Cmd + Y , Cmd + Shift + Z
|
| 导航 |
Up , Down
|
Up , Down
|
| 展开/折叠节点 |
Right , Left
|
Right , Left
|
| 展开节点 |
Single-click on arrow |
Single-click on arrow |
| 展开/折叠节点及其子元素 |
Ctrl + Alt + Click on arrow icon
|
Opt + Click on arrow icon
|
| 编辑属性 |
Enter , Double-click on attribute
|
Enter , Double-click on attribute
|
| 隐藏元素 |
H |
H |
| 切换编辑HTML |
F2 |
|
右键点击元素你可以：
- 更改元素状态(
:active , :hover , :focus , :visited )；
- 元素上设置断点(更改子元素、更改属性及删除节点)；
- 清空控制台
样式侧边栏(Style Sidebar)
| |
Windows / Linux |
Mac |
| 编辑规则 |
Single-click |
Single-click |
| 插入新属性 |
Single-click on whitespace |
Single-click on whitespace |
| 定位到样式属性定义处 |
Ctrl + Click on property
|
Cmd + Click on property
|
| 定位到属性值定义处 |
Ctrl + Click on property value
|
Cmd + Click on property value
|
| 循环颜色值(rgba,hsl等) |
Shift + Click on color picker box
|
Shift + Click on color picker box
|
| 编辑上/下一个属性 |
Tab , Shift + Tab
|
Tab , Shift + Tab
|
| 增加/减小值 |
Up , Down
|
Up , Down
|
| 每次以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 + Up , Alt + Down
|
Opt + Up , Opt + Down
|
模仿元素伪状态( :active , :hover , :focus , :visited )
添加新的样式选择器
Sources 面板
| |
Windows / Linux |
Mac |
| 暂停/恢复脚本运行 |
F8 , Ctrl + /
|
F8 , Cmd + /
|
| Step over next function call |
F10 , Ctrl + \'
|
F10 , Cmd + \'
|
| Step into next function call |
F11 , Ctrl + ;
|
F11 , Cmd + ;
|
| Step out of current function |
Shift + F11 , Ctrl + Shift+ ;
|
Shift + F11 , Cmd + Shift+ ;
|
| Select next call frame |
Ctrl + .
|
Opt + .
|
| Select previous call frame |
Ctrl + ,
|
Opt + ,
|
| Toggle breakpoint condition |
Click on line number ,Ctrl + B
|
Click on line number ,Cmd + B
|
| Edit breakpoint condition |
Right-click on line number |
Right-click on line number |
| Delete individual words |
Alt + Delete
|
Opt + Delete
|
| Comment a line or selected text |
Ctrl + /
|
Cmd + /
|
| Save changes to local modifications |
Ctrl + S
|
Cmd + S
|
| Save all changes |
Ctrl + Alt + S
|
Cmd + Opt + S
|
| Go to line |
Ctrl + G
|
Ctrl + G
|
| Search by filename |
Ctrl + O
|
Cmd + O
|
| Jump to line number |
Ctrl + P + :<number>
|
Cmd + P + :<number>
|
| Jump to column |
Ctrl + O + :<number> + :<number>
|
Cmd + O + :<number> + :<number>
|
| Go to member |
Ctrl + Shift + O
|
Cmd + Shift + O
|
| Close active tab |
Alt + W
|
Opt + W
|
| Run snippet |
Ctrl + Enter
|
Cmd + Enter
|
Don’t pause on exceptions
Pause on All exceptions (including those caught within try/catch blocks)
Pause on uncaught exceptions (usually the one you want)
代码编辑快捷键
| |
Windows / Linux |
Mac |
| 跳转到匹配位置 |
Ctrl + M
|
| 跳转到指定行 |
Ctrl + P + :<number>
|
Cmd + P + :<number>
|
| 跳转到指定列 |
Ctrl + O + :<number> + :<number>
|
Cmd + O + :<number> + :<number>
|
| 切换注释 |
Ctrl + /
|
Cmd + /
|
| 选择下一个出现位置 |
Ctrl + D
|
Cmd + D
|
| 撤销上一次操作 |
Ctrl + U
|
Cmd + U
|
TimeLine 面板
| |
Windows / Linux |
Mac |
| 启动/停止记录 |
Ctrl + E
|
Cmd + E
|
| 保存timeline数据 |
Ctrl + S
|
Cmd + S
|
| 加载timeline数据 |
Ctrl + O
|
Cmd + O
|
Profiles 面板
| |
Windows / Linux |
Mac |
| 启动/停止记录 |
Ctrl + E
|
Cmd + E
|
Console 控制台
| |
Windows / Linux |
Mac |
| Accept suggestion |
Right |
Right |
| 上一个命令/行 |
Up |
Up |
| 下一条命令/行 |
Down |
Down |
| 控制台获取焦点 |
Ctrl + `
|
Ctrl + `
|
| 清空控制台 |
Ctrl + L
|
Cmd + K , Opt + L
|
| 多行输入 |
Shift + Enter
|
Ctrl + Return
|
| 执行 |
Enter |
Return |
右键点击控制台：
- XMLHttpRequest 记录： 打开 查看 XHR 的日志
- 导航处切换保存日志
- 过滤：隐藏与显示脚本文件的信息
- 清空控制台：清空控制台所有信息
Screencasting
| |
Windows / Linux |
Mac |
| Pinch zoom in and out |
Alt + Scroll , Ctrl + Click and drag with two fingers
|
Opt + Scroll , Cmd + Click and drag with two fingers
|
| Inspect element tool |
Ctrl + Shift + C
|
Cmd + Shift + C
|
Emulation
| |
Windows / Linux |
Mac |
| Pinch zoom in and out |
Shift + Scroll
|
Shift + Scroll
|
其他Chrome快捷方式
下面是一些浏览器中非常有用的额外的快捷方式(附： 所有Windows/Linux/Mac快捷方式 )
| |
Windows / Linux |
Mac |
| 查找下一个 |
Ctrl + G
|
Cmd + G
|
| 查找上一个 |
Ctrl + Shift + G
|
Cmd + Shift + G
|
| 打开一个隐身模式的新窗口 |
Ctrl + Shift + N
|
Cmd + Shift + N
|
| 切换是否显示书签栏 |
Ctrl + Shift + B
|
Cmd + Shift + B
|
| 打开历史记录页面 |
Ctrl + H
|
Cmd + Y
|
| 打开下载记录页面 |
Ctrl + J
|
Cmd + Shift + J
|
| 打开浏览器任务管理器 |
Shift + ESC
|
Shift + ESC
|
| 标签页历史下一页 |
Alt + Right
|
Opt + Right
|
| 标签页历史上一页 |
Backspace , Alt+ Left
|
Backspace , Opt+ Left
|
| 选中地址栏 |
F6 , Ctrl + L ,Alt + D
|
Cmd + L , Opt + D
|
| 地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎) |
Ctrl + K , Ctrl +E
|
Cmd + K , Cmd + E
|
转自第七城市，侵权立删。