Chrome 开发者工具(DevTools)中所有快捷方式列表
jopen
10年前
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,C |
来源: http://9iphp.com/web/javascript/chrome-devtools-shortcuts.html