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

编程

更新时间：2024-09-16110

admin管理员组
文章数量:1395937

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`
地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎)

本文标签：开发者快捷方式工具列表 chrome

版权声明：本文标题：Chrome 开发者工具(DevTools)中所有快捷方式列表内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1726435623a1096276.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。