正文
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
|
右键点击控制台：
，然后选择“更多工具”–“开发者工具”。
模仿元素伪状态(
添加新的样式选择器
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)
