Chrome 开发者工具(DevTools)中所有快捷方式列表

jopen 10年前

Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间。下面列出了每个快捷键在Windows/Linux及Mac中的对应键。其中一些快捷键对于DevTools全局可用,而另一些则只能在单个面板中使用。

打开DevTools

你可以通过以下任何一种方式来访问DevTools:

  • 打开浏览器右上角的Chrome菜单 Chrome Menu,然后选择“更多工具”–“开发者工具”。
  • 在页面任何元素处点击右键,然后选择“审查元素”。

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

attributes-icon 模仿元素伪状态(:active,:hover,:focus,:visited)

plus 添加新的样式选择器

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

pause-gray Don’t pause on exceptions

pause-blue Pause on All exceptions (including those caught within try/catch blocks)

pause-purple 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