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

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

 

 

转自第七城市，侵权立删。