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

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

转载于:https://www.cnblogs.com/xiaoweiy/p/5625255.html

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

Chrome 开发者工具官方中文文档
传送门 Chrome开发者工具官方中文文档 Chrome开发者工具详解前端学习front-end-study系列 Elements面板(https://zhuanlan.zhihu.com/p/24 ...
屏幕分辨率测试工具（舍弃）---chrome开发者工具devTools(强烈建议系统学习)
2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://w ...
在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
请参阅：Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
Chrome开发者工具Network标签页中观察到的set-cookie jsessionid是什么东西
在Chrome开发者工具里经常能观察到HTTP响应里包含的字段: Set-Cookie: JSESSIONID= XXX 之后,就能在客户端cookie里观察到JSESSIONID=后面的值. 根据G ...
chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存？
目录 chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...
Chrome开发者工具中Elements(元素）断点的用途
2019独角兽企业重金招聘Python工程师标准>>> SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行J ...
Chrome开发者工具-阅读列表
Chrome的开发者工具是Chrome浏览器内置的编辑和调试利器,熟练使用chrome开发者工具是成为前端修炼的必由之路,来,来,来,一起提高. Chrome开发者工具不完全指南 chrome 开发者 ...
Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...
浏览器原理 20 # Chrome开发者工具：利用网络面板做性能分析
说明浏览器工作原理与实践专栏学习笔记 DevTools Chrome 开发者工具(简称 DevTools)是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中.它提供了通过界面访 ...