前言
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 |
| 地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎) |
参考自：Specs' Blog-9IPHP,就爱PHP
模仿元素伪状态(
添加新的样式选择器
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)
暂无评论