原文地址, 灰常全面
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 + : Cmd + P + :
Jump to column Ctrl + O + : + : Cmd + O + : + :
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 + : Cmd + P + :
跳转到指定列 Ctrl + O + : + : Cmd + O + : + :
切换注释 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
地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎)