banner
Bai

Bai

写代码菜的一批 🤣
twitter
telegram
tg_channel
pixiv
github
bilibili
whatsapp

開発効率を向上させるChromeデベロッパーツールショートカットキー参考【記事インポートテスト】

本文只介绍 Chrome 一些主要和常用的快捷键,在其它浏览器的开发者工具中可类比,大部分快捷键作用都相同,只有个别差异。

全局(所有面板)#

功能快捷键描述
打开开发者工具F12 / Ctrl + Shift + I普通打开
打开 ConsoleCtrl + Shift + J打开工具并进入 Console 面板
检查元素Ctrl + Shift + C进入 Elements 面板后开始选取页面元素
开发者工具设置?/F1开发者工具的所有相关设置
切换上一个面板Ctrl + [向左切换一个面板
切换下一个面板Ctrl + ]向右切换一个面板
切换工具停靠位置Ctrl + Shift + D即整个工具相对于浏览器的停靠位置,具体在悬浮、左侧、右侧、底部哪两个间切换,取决于最近两次操作
切换设备模式Ctrl + Shift + M普通模式和响应式设备编辑模式间切换
切换抽屉工具栏Esc切换显示工具底部的弹出式工具栏,如 Console 等
刷新网页F5/Ctrl + R普通刷新页面,会读取 memory cache 和 disk cache
强制刷新Ctrl + F5/Ctrl + Shift + R禁用缓存刷新,类似于勾选 disable cache 后刷新
当前面板中搜索Ctrl + F当前面板中搜索文本,如 Elements, Console 等
所有资源中搜索Ctrl + Shift + F在当前网页加载的所有资源(Sources)中搜索文本
按文件名搜索Ctrl + O/Ctrl + P同样搜索所有资源,只是搜索对象限制在文件名称上
放大字体Ctrl + +放大整个开发者工具的字体与图形(不包括网页)
缩小字体Ctrl + -缩小开发者工具字体与图形的尺寸
恢复字体大小Ctrl + 0将开发者工具的字体与图形尺寸恢复默认大小

Elements(元素)面板#

功能快捷键描述
撤消更改Ctrl + Z撤销对 HTML 内容的修改
重做更改Ctrl + Y恢复撤销前的修改
展开节点(右方向键)展开当前折叠的 HTML 元素节点
折叠节点(左方向键)折叠当前展开的 HTML 元素节点
递归展开节点Alt + →递归地展开当前折叠的 HTML 元素节点
递归折叠节点Alt + ←递归地折叠当前展开的 HTML 元素节点
编辑节点属性Enter编辑所在元素节点的属性值(第一个属性的)
编辑下个属性Tab按下 Enter 编辑属性后,按 Tab 可以依次切换到后面的属性
编辑上个属性Shift + Tab切换到当前元素节点的上一个属性值进行编辑
隐藏节点H在页面中隐藏当前元素节点,实质是设置 visibility: hidden !important; 样式
编辑 HTMLF2以 HTML 的形式编辑当前元素节点内容,类似于右键菜单的 Edit as HTML
编辑源样式Ctrl + 点击Style(样式)栏中,Ctrl + 鼠标点击 CSS 规则(选择器、属性或属性值)时,会跳转到源文件的相应位置
切换颜色类型Shift + 点击Shift + 点击样式颜色值左边的取色框时,色值类型会在 #, rgb(), hls() 之间切换
增 / 减数值/(上、下方向键)单次增 / 减大小为 1 单位
0.1 倍增 / 减值Alt + ↑/Alt + ↓单次增 / 减 0.1 倍单位值
10 倍增 / 减值Shift + ↑/Shift + ↓单次增 / 减 10 倍单位值
100 倍增 / 减值Ctrl + ↑/Ctrl + ↓单次增 / 减 100 倍单位值

Console(控制台)面板#

功能快捷键描述
清空输出Ctrl + L清空控制台的历史输出
聚焦输入Ctrl + ` (反引号)把输入焦点聚焦到控制台输入框中,其它面板中使用则打开 Console 抽屉栏
接受建议Enter/接受代码提示的第一个建议项
切换命令/切换上 / 下一条历史输入命令
运行代码Enter回车运行输入的代码
换行输入Shift + Enter由于直接回车是运行代码,所以想换行输入需要加 Shift

Sources(资源)面板#

功能快捷键描述
执行脚本F8/Ctrl + \切换执行或暂停脚本
单步执行F10/Ctrl + '(Debugger 栏中 )单步调试脚本
单步进入F11/Ctrl + ;单步进入调试(遇到函数就跳入)
单步跳出Shift + F11/Ctrl + Shift + ;单步跳出调试(跳出当前函数)
下个调用帧Ctrl + .(英文句号)调试时切换到调用栈(Call Stack 栏)中当前帧的下面一帧
上个调用帧Ctrl + ,(英文逗号)调试时切换到当前调用的帧上面一帧(当前为栈顶则忽略)
输出变量值Ctrl + Shift + E在控制台输出编辑器中所选中的变量的值
观察变量值Ctrl + Shift + A将编辑器中选中的变量值添加到 Watch 栏中
切换断点Ctrl + B当焦点位于代码编辑器中时,用于切换当前行是否设置为断点
切换启用断点Ctrl + Shift + B切换当前行的断点是否启用(不会删除断点)
切换启用全部断点Ctrl + F8切换所有设置的断点是否启用
编辑断点Ctrl + Alt + B编辑当前行的断点类型(Breakpoint, Conditional Breakpoint, Logpoint)

代码编辑器(Sources 面板中)#

功能快捷键描述
切换注释Ctrl + /为当前行或选中内容添加 / 取消注释
保存修改Ctrl + S保存对文件的修改(需要先启用侧栏的 Overrides 功能)
保存所有更改Ctrl + Alt + S保存编辑器打开的所有文件,同样需要启用 Overrides
转到匹配括号Ctrl + M跳转到与当前光标位置的括号匹配的另一个括号处
添加匹配项Ctrl + D跳转并添加选择下一个与选择文本匹配的文本
撤销匹配项Ctrl + U返回并撤销选择一个匹配项,与 Ctrl + D 相反
转到行Ctrl + G跳转到指定行数
转到成员Ctrl + Shift + O跳转到当前文件中的指定成员函数
上个编辑处Alt + -跳转到上一个光标位于的编辑位置
下个编辑处Alt + +跳转到下一个编辑位置
关闭活动标签Alt + W关闭当前编辑的标签(文件)
增 / 减 CSS 值Alt + ↑/Alt +↓编辑 CSS 源文件时,可对当前数值增 / 减 1 一个单位
10 倍增 / 减 CSS 值Alt + PageUp↑/Alt + PageDownCSS 中对当前数值增 / 减 10 一个单位
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。