提升开发效率的 Chrome 开发者工具快捷键参考
文章出自个人博客 https://knightyun.github.io/2020/05/23/tools-devtool-shortcut,转载请申明
本文只介绍 Chrome 一些主要和常用的快捷键,在其它浏览器的开发者工具中可类比,大部分快捷键作用都相同,只有个别差异。
全局(所有面板)
功能 | 快捷键 | 描述 |
---|---|---|
打开开发者工具 |
F12 / Ctrl + Shift + I
|
普通打开 |
打开 Console |
Ctrl + 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; 样式
|
编辑 HTML |
F2
|
以 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 + PageDown
|
CSS 中对当前数值增/减 10 一个单位 |
技术文章推送 手机、电脑实用软件分享
提升开发效率的 Chrome 开发者工具快捷键参考相关推荐
- Mac打开safari、chrome开发者工具快捷键
mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 参考:Mac下safari.chrome打开开发者工具快捷键
- SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类
本教程的前面一系列步骤,我们或多或少已经使用了 Chrome 开发者工具来学习 SAP UI5 应用的开发,比如通过 Elements 标签页查看 SAP UI5 XML 视图里定义的控件,运行时生成 ...
- 提升开发效率的十个工具
Git 之前也有过不少版本控制的工具.有好的,也有糟糕的.不过它们都或多或少地误入歧途了. 这时候Git出现了.一旦你用上了这个神奇的工具,很难相像你还会碰到比它更好的了. 还没用过Git?试一下吧. ...
- SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之三十七 - 使用 Chrome 开发者工具 Console 面板进行元素审查试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- 使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
Chrome 开发者工具是前端开发工程师工具箱里使用频率最高的工具之一. 本文通过一个具体的例子,给大家分享笔者工作中,是如何通过 Chrome 开发者工具,分析一个网站的实现明细. 下图是 SAP ...
- VueUse——一个提升开发效率的Vue3工具库,让你早早下班
VueUse--一个大大提升开发效率的Vue3工具库,让你早下班 关注微信公众号"前端大侦探"了解更多精彩内容! 前言 VueUse是一个基于 Composition API 实现 ...
- Chrome开发者工具一个有用的快捷键组合:Ctrl+Shift+E
看一个例子:选中下面的高亮代码: 同时按下Ctrl+Shift+E,被选中的代码就会自动被粘贴到Chrome开发者工具控制台上并执行:
最新文章
- 2.4.4.1、Django新建APP(acounts)
- 1.第一个java程序,Hello world
- Server 2008 R2多用户远程桌面连接授权,解决120天过期问题
- JUC里面的相关分类|| java并发编程中,关于锁的实现方式有两种synchronized ,Lock || Lock——ReentrantLock||AQS(抽象队列同步器)
- JavaScript之面向对象学习四原型对象的动态性
- 驱动精灵2007_畅玩Steam的Win10游戏掌机发布! |莱莎2新战斗动画,肉腿致命驱动~...
- 二叉树前序中序后续线索树_二叉树的先序,中序,后序遍历以及线索二叉树的遍历...
- 夫学须静也freeeim
- mysql--SQL编程(关于mysql中的日期) 学习笔记2
- 巨杉数据库完成数亿元D轮融资,引领金融级分布式数据库发展
- ABP中使用Redis Cache(1)
- opencv-python人脸识别初探
- php mysql cpu使用率_Mysql CPU占用高的问题解决方法小结
- 推荐几个高质量的软件测试实战项目
- POJO类与javaBean类的区别
- PostgreSQL数据库——Pigsty
- 美国加州计算机专业大学排名,USNews美国计算机专业大学排名
- 甲基化芯片Beta值意义详解,以及minfi包使用
- 愿以三生烟火,换君一世迷离
- IFM分量包络解调分析MATLAB,[原创]数据包络分析(DEA)简介
热门文章
- tableView cell 中如果有文本框点击自动滚动不被键盘挡住
- 怎么使用hsqldb 和 mybatis 构造单元测试
- EOS Platform 7.2 安装
- 【redis】 windows 32x 64x
- atitit,it人怎么样才容易事业成功?? 有以下五种性格的人容易成功
- 自定义手势--输入法手势技术
- [新闻]MacBook Pro新版上市
- 计算机c语言期末答案,大学计算机C语言期末考试试题A.doc
- 【elasticsearch系列】安装elasticsearch-head插件
- 初创企通过哪里报名可参与赛事活动