Chrome DevTools 中键盘快捷键的参考。
此文章是 Chrome DevTools 中键盘快捷键的参考。
将鼠标悬停在 DevTools 的 UI 元素上以显示其工具提示。如果元素有快捷方式,工具提示会包含它。
用于打开 DevTools 的键盘快捷键
要打开 DevTools,请在光标聚焦在浏览器视口上时按以下键盘快捷键:
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
打开您上次使用的任何面板 | Command+ Option+I | F12或Control+ Shift+I |
打开控制台面板 | Command+ Option+J | Control+ Shift+J |
打开元素面板 | Command+ Shift+C或Command+ Option+C | Control+ Shift+C |
全局键盘快捷键
大多数(如果不是全部)DevTools 面板中都提供以下键盘快捷键。
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
显示设置 | ?或Function+F1 | ? 或者 F1 |
聚焦下一个面板 | Command+] | Control+] |
聚焦上一个面板 | Command+[ | Control+[ |
切换回您上次使用的任何停靠位置。如果 DevTools 在整个会话中一直处于默认位置,则此快捷方式会将 DevTools 取消停靠到单独的窗口中 | Command+ Shift+D | Control+ Shift+D |
切换设备模式 | Command+ Shift+M | Control+ Shift+M |
切换检查元素模式 | Command+ Shift+C | Control+ Shift+C |
打开命令菜单 | Command+ Shift+P | Control+ Shift+P |
切换抽屉 | Escape | Escape |
正常重装 | Command+R | F5或Control+R |
硬重装 | Command+ Shift+R | Control+F5或Control+ Shift+R |
在当前面板中搜索文本。在审计、应用程序和安全面板中不受支持 | Command+F | Control+F |
在Drawer 中打开Search选项卡,可让您在所有加载的资源中搜索文本 | Command+ Option+F | Control+ Shift+F |
在“源”面板中打开文件 | Command+O或Command+P | Control+O或Control+P |
放大 | Command+ Shift++ | Control+ Shift++ |
缩小 | Command+- | Control+- |
恢复默认缩放级别 | Command+0 | Control+0 |
运行代码段 | 按Command+O打开Command Menu,键入!后跟脚本的名称,然后按Enter | 按Control+O打开Command Menu,键入!后跟脚本的名称,然后按Enter |
元素面板键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
撤消更改 | Command+Z | Control+Z |
重做更改 | Command+ Shift+Z | Control+Y |
选择当前所选元素上方/下方的元素 | Up Arrow / Down Arrow | Up Arrow / Down Arrow |
展开当前选择的节点。如果节点已经展开,这个快捷方式选择它下面的元素 | Right Arrow | Right Arrow |
折叠当前选择的节点。如果节点已经折叠,这个快捷方式选择它上面的元素 | Left Arrow | Left Arrow |
展开或折叠当前选定的节点及其所有子节点 | 按住Option然后单击元素名称旁边的箭头图标 | 按住Control+Alt然后单击元素名称旁边的箭头图标 |
在当前选择的元素上切换编辑属性模式 | Enter | Enter |
进入编辑属性模式后选择下一个/上一个属性 | Tab/ Shift+Tab | Tab/ Shift+Tab |
隐藏当前选中的元素 | H | H |
在当前选定的元素上切换编辑为 HTML模式 | Function+F2 | F2 |
样式面板键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
转到声明属性值的行 | 按住Command然后单击属性值 | 按住Control然后单击属性值 |
循环浏览颜色值的 RBGA、HSLA 和十六进制表示 | 按住Shift然后单击值旁边的颜色预览框 | 按住Shift然后单击值旁边的颜色预览框 |
选择下一个/上一个属性或值 | 单击属性名称或值,然后按Tab/ Shift+Tab | 单击属性名称或值,然后按Tab/ Shift+Tab |
将属性值增加/减少 0.1 | 单击一个值,然后按Option+ Up Arrow/ Option+Down Arrow | 单击一个值,然后按Alt+ Up Arrow/ Alt+Down Arrow |
将属性值增加/减少 1 | 单击一个值,然后按Up Arrow/Down Arrow | 单击一个值,然后按Up Arrow/Down Arrow |
将属性值增加/减少 10 | 单击一个值,然后按Shift+ Up Arrow/ Shift+Down Arrow | 单击一个值,然后按Shift+ Up Arrow/ Shift+Down Arrow |
将属性值增加/减少 100 | 单击一个值,然后按Command+ Up Arrow/ Command+Down Arrow | 单击一个值,然后按Control+ Up Arrow/ Control+Down Arrow |
循环显示角度值的度数 (deg)、梯度 (grad)、弧度 (rad) 和转弯 (turn) 表示 | 按住Shift然后单击值旁边的角度预览框 | 按住Shift然后单击值旁边的角度预览框 |
将角度值增加/减少 1 | 单击值旁边的角度预览框,然后按Up Arrow/Down Arrow | 单击值旁边的角度预览框,然后按Up Arrow/Down Arrow |
将角度值增加/减少 10 | 单击值旁边的角度预览框,然后按Shift+ Up Arrow/ Shift+Down Arrow | 单击值旁边的角度预览框,然后按Shift+ Up Arrow/ Shift+Down Arrow |
将角度值增加/减少 15 | 单击值旁边的角度预览框,然后按Shift,在角度时钟叠加上单击/鼠标滑动 | 单击值旁边的角度预览框,然后按Shift,在角度时钟叠加上单击/鼠标滑动 |
源面板键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
暂停脚本执行(如果当前正在运行)或恢复(如果当前暂停) | F8或Command+\ | F8或Control+\ |
跳过下一个函数调用 | F10或Command+' | F10或Control+' |
进入下一个函数调用 | F11或Command+; | F11或Control+; |
跳出当前功能 | Shift+F11或Command+ Shift+; | Shift+F11或Control+ Shift+; |
暂停时继续执行某一行代码 | 按住Command然后单击代码行 | 按住Control然后单击代码行 |
选择当前选定框架下方/上方的调用框架 | Control+ ./ Control+, | Control+ ./ Control+, |
保存对本地修改的更改 | Command+S | Control+S |
保存所有更改 | Command+ Option+S | Control+ Alt+S |
去线 | Control+G | Control+G |
跳转到当前打开文件的行号 | 按Command+O打开命令菜单,键入:后跟行号,然后按Enter | 按Control+O打开命令菜单,键入:跟随的行号,然后按Enter |
跳转到当前打开文件的一列(例如第 5 行,第 9 列) | 按Command+O打开命令菜单,键入:,然后是行号,然后是另一个:,然后是列号,然后按Enter | 按Control+O打开命令菜单,键入:,然后是行号,然后是另一个:,然后是列号,然后按Enter |
转到函数声明(如果当前打开的文件是 HTML 或脚本)或规则集(如果当前打开的文件是样式表) | 按Command+ Shift+ O,然后输入声明/规则集的名称,或从选项列表中选择它 | 按Control+ Shift+ O,然后输入声明/规则集的名称,或从选项列表中选择它 |
关闭活动选项卡 | Option+W | Alt+W |
代码编辑器键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
删除最后一个单词中的所有字符,直到光标 | Option+Delete | Control+Delete |
添加或删除代码行断点 | 将光标放在该行上,然后按Command+B | 将光标放在该行上,然后按Control+B |
转到匹配的括号 | Control+M | Control+M |
切换单行注释。如果选择了多行,DevTools 会在每行的开头添加注释 | Command+/ | Control+/ |
选择/取消选择光标所在的下一个单词。每个事件同时突出显示 | Command+ D/ Command+U | Control+ D/ Control+U |
性能面板键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
开始/停止录音 | Command+E | Control+E |
保存录音 | Command+S | Control+S |
载入录音 | Command+O | Control+O |
内存面板键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
开始/停止录音 | Command+E | Control+E |
控制台面板键盘快捷键
行动 | 苹果电脑 | 视窗/Linux |
---|---|---|
接受自动完成建议 | Right Arrow 或者 Tab | Right Arrow 或者 Tab |
拒绝自动完成建议 | Escape | Escape |
获取之前的声明 | Up Arrow | Up Arrow |
获取下一条语句 | Down Arrow | Down Arrow |
聚焦控制台 | Control+` | Control+` |
清除控制台 | Command+K或Option+L | Control+L |
强制多行输入。请注意,DevTools 默认应该检测多行场景,所以现在通常不需要这个快捷方式 | Command+Return | Shift+Enter |
执行 | Return | Enter |
展开已记录到控制台的对象的所有子属性 | 按住Alt然后单击展开 | 按住Alt然后单击展开 |
Chrome DevTools 中键盘快捷键的参考。相关推荐
- Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件 键盘事件 在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值 键盘事件 在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
- Chrome for Mac键盘快捷键!
转自:冰萧的csdn博客(他转自google的官方文档) ⌘-N 打开新窗口. ⌘-T 打开新标签页. ⌘-Shift-N 在隐身模式下打开新窗口. 按 ⌘-O,然后选择文件. 在 Google Ch ...
- Chrome for Mac键盘快捷键!来自Google Chrome官网!
转自: http://support.google.com/chrome/bin/answer.py?hl=zh-Hans&answer=165450 标签页和窗口快捷键 ⌘-N 打开新窗口. ...
- javascript 中键盘快捷键(键盘事件)
如果想要在javascript中使用快捷键,可以利用, event.ctrlKey.event.shiftKey.event.altKey 来进行判断. 对应的是ctrl shift 与alt 按键. ...
- Chrome浏览器常用键盘快捷键介绍
标签页和窗口快捷键 Ctrl + n 打开新窗口 Ctrl + t 打开新的标签页,并跳转到该标签页 Ctrl + Shift + t 重新打开最后关闭的标签页,并跳转到该标签页 Ctrl + Tab ...
- Chrome DevTools:在 Profile 性能分析中显示原生 javascript 函数
本文翻译自 Chrome DevTools: Show native functions in JS Profile,中文版首发在我的知乎专栏 V8 源码及周边. 在 Chrome DevTools ...
- 脱离996,Chrome DevTools 面板全攻略!!!(收藏)
李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 justwe7.github.io/devtools/console/console.html 一起食用 ...
- 你不知道的 20+ Chrome Devtools 技巧!
你不知道的 20+ Chrome Devtools 技巧! 谷歌Chrome是目前开发者使用的最流行的网络浏览器之一.根据StatCounter的统计,截至2019年9月,谷歌Chrome浏览器在全球 ...
- Chrome Devtools 高级调试指南
From ( Chrome Devtools 高级调试指南 ):https://juejin.cn/post/6844903961472974855 chrome devtools 设置黑色主题:ht ...
- chrome怎样编辑html页面大小,使用Chrome DevTools实时编辑HTML和CSS
我们来看看Chrome DevTools中的便捷实时编辑功能,以及它如何帮助您调试HTML和CSS,使您的前端更流畅. Chrome DevTools是一款内置于Chrome浏览器中的强大的Web开发 ...
最新文章
- Android获取内部和SDCard的存储空间
- Java 继承 执行顺序
- 一个JavaBean和DTO转换的优秀案例
- 拒绝某个用户或组应用组策略
- java进入编程界面_java – 编程到界面是什么意思?
- 惩罚、补偿、正则化、约束的联系和区别
- React ref的转发
- Python实现AES加密进行PKCS5Padding的填充
- 2022爱分析·营销服务一体化实践报告
- PM981/PM981a安装黑苹果-VM Ware教程
- Eureka工作原理
- 1080 端口被占用
- 【IO专栏】Java OIO NIO通信对比分析【002】
- 详细分析 Vue3 文档
- 人才测评之计划能力,如何提高计划能力?
- x265探索与研究(一):x265下载安装与配置
- 使用Python来操作邮箱
- 苏宁大造818发烧节,玩得是哪招?
- [RK3128][Android 6.0] u-blox GPS芯片 MAX-7Q调试记录
- 索尼Android电视 安装第三方软件,解答索尼电视如何安装第三方软件
热门文章
- CVPR 2022 NTIRE 高动态范围成像(HDR)比赛冠军方案
- Java将JSON对象或JSON数组转list对象
- 华为模拟器eNSP直连路由静态路由配置实验
- 笔记本触摸板手势使用
- win10安装mysql初始化失败怎么办_Win10系统安装SQL2000失败 初始化错误该怎么解决?...
- R 语言 optim 使用
- Isilon上数据是如何存放的?
- html微博登录代码,微博第三方登陆js实现
- 新创建了用户没有计算机图标,w10我的电脑图标没了怎么办
- python多条件求和_使用sumifs进行多条件求和