谷歌浏览器开发者工具的快捷键详解

谷歌浏览器开发者工具的快捷键详解
孔子说:工欲善其事，必先利其器。

老子说：孔子说的对。

针对前端开发人员，谷歌浏览器的好处自然不言而喻，其强大的调试工具更是提供了很多便利，现将开发工具常用的快捷键整理如下，欢迎交流。

本页介绍 Chrome DevTools 中所有键盘快捷键的参考信息。一些快捷键全局可用，而其他快捷键会特定于单一面板。

您也可以在提示中找到快捷键。将鼠标悬停在 DevTools 的 UI 元素上可以显示元素的提示。如果元素有快捷键，提示将包含快捷键。

访问 DevTools
访问 DevTools 在 Windows 上在 Mac 上
打开 Developer Tools F12、Ctrl + Shift + I Cmd + Opt + I
打开/切换检查元素模式和浏览器窗口 Ctrl + Shift + C Cmd + Shift + C
打开 Developer Tools 并聚焦到控制台 Ctrl + Shift + J Cmd + Opt + J
检查检查器（取消停靠第一个后按） Ctrl + Shift + I Cmd + Opt + I
全局键盘快捷键
下列键盘快捷键可以在所有 DevTools 面板中使用：

全局快捷键 Windows Mac
显示一般设置对话框 ?、F1 ?
下一个面板 Ctrl + ] Cmd + ]
上一个面板 Ctrl + [ Cmd + [
在面板历史记录中后退 Ctrl + Alt + [ Cmd + Opt + [
在面板历史记录中前进 Ctrl + Alt + ] Cmd + Opt + ]
更改停靠位置 Ctrl + Shift + D Cmd + Shift + D
打开 Device Mode 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 + P Cmd + O、Cmd + P
放大（焦点在 DevTools 中时） Ctrl + + Cmd + Shift + +
缩小 Ctrl + - Cmd + Shift + -
恢复默认文本大小 Ctrl + 0 Cmd + 0
按面板分类的键盘快捷键
Elements
Elements 面板 Windows Mac
撤消更改 Ctrl + Z Cmd + Z
重做更改 Ctrl + Y Cmd + Y、Cmd + Shift + Z
导航向上键、向下键向上键、向下键
展开/折叠节点向右键、向左键向右键、向左键
展开节点点击箭头点击箭头
展开/折叠节点及其所有子节点 Ctrl + Alt + 点击箭头图标 Opt + 点击箭头图标
编辑属性 Enter、双击属性 Enter、双击属性
隐藏元素 H H
切换为以 HTML 形式编辑 F2
Styles 边栏
Styles 边栏中可用的快捷键：

Styles 边栏 Windows Mac
编辑规则点击点击
插入新属性点击空格点击空格
转到源中样式规则属性声明行 Ctrl + 点击属性 Cmd + 点击属性
转到源中属性值声明行 Ctrl + 点击属性值 Cmd + 点击属性值
在颜色定义值之间循环 Shift + 点击颜色选取器框 Shift + 点击颜色选取器框
编辑下一个/上一个属性 Tab、Shift + Tab Tab、Shift + Tab
增大/减小值向上键、向下键向上键、向下键
以 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 + 向上键、Alt + 向下键 Opt + 向上键、Opt + 向下键
Sources
Sources 面板 Windows Mac
暂停/继续脚本执行 F8、Ctrl + \ F8、Cmd +
越过下一个函数调用 F10、Ctrl + ’ F10、Cmd + ’
进入下一个函数调用 F11、Ctrl + ; F11、Cmd + ;
跳出当前函数 Shift + F11、Ctrl + Shift + ; Shift + F11、Cmd + Shift + ;
选择下一个调用框架 Ctrl + . Opt + .
选择上一个调用框架 Ctrl + , Opt + ,
切换断点条件点击行号、Ctrl + B 点击行号、Cmd + B
编辑断点条件右键点击行号右键点击行号
删除各个单词 Ctrl + Delete Opt + Delete
为某一行或选定文本添加注释 Ctrl + / Cmd + /
将更改保存到本地修改 Ctrl + S Cmd + S
保存所有更改 Ctrl + Alt + S Cmd + Opt + S
转到行 Ctrl + G Ctrl + G
按文件名搜索 Ctrl + O Cmd + O
跳转到行号 Ctrl + P + 数字 Cmd + P + 数字
跳转到列 Ctrl + O + 数字 + 数字 Cmd + O + 数字 + 数字
转到成员 Ctrl + Shift + O Cmd + Shift + O
关闭活动标签 Alt + W Opt + W
运行代码段 Ctrl + Enter Cmd + Enter
在代码编辑器内
代码编辑器 Windows Mac
转到匹配的括号 Ctrl + M
跳转到行号 Ctrl + P + 数字 Cmd + P + 数字
跳转到列 Ctrl + O + 数字 + 数字 Cmd + O + 数字 + 数字
切换注释 Ctrl + / Cmd + /
选择下一个实例 Ctrl + D Cmd + D
撤消上一个选择 Ctrl + U Cmd + U
Timeline
Timeline 面板 Windows Mac
开始/停止记录 Ctrl + E Cmd + E
保存时间线数据 Ctrl + S Cmd + S
加载时间线数据 Ctrl + O Cmd + O
Profiles
Profiles 面板 Windows Mac
开始/停止记录 Ctrl + E Cmd + E
控制台
控制台快捷键 Windows Mac
接受建议向右键向右键
上一个命令/行向上键向上键
下一个命令/行向下键向下键
聚焦到控制台 Ctrl + Ctrl +
清除控制台 Ctrl + L Cmd + K、Opt + L
多行输入 Shift + Enter Ctrl + Return
执行 Enter Return
Device Mode
Device Mode 快捷键 Windows Mac
双指张合放大和缩小 Shift + 滚动 Shift + 滚动
抓屏时
抓屏快捷键 Windows Mac
双指张合放大和缩小 Alt + 滚动、Ctrl + 点击并用两个手指拖动 Opt + 滚动、Cmd + 点击并用两个手指拖动
检查元素工具 Ctrl + Shift + C Cmd + Shift + C
原文：博客园 https://www.cnblogs.com/wangzhenhai/p/6531756.html

谷歌浏览器开发者工具的快捷键详解相关推荐

谷歌浏览器开发者工具的使用详解
一.基础功能篇 1. elements 在elements中主要分为两大块: A:HTML结构面板 B:操作dom样式.结构.事件的显示面板 (1)点击箭头选中一个元素,可以在HTML面板中定位到该元 ...
Chrome浏览器开发者工具使用开发详解
文章目录 1.如何调出开发者工具 2.开发者工具初步介绍 2.1元素(Elements) 2.2控制台(Console) 2.3源代码(Source) 2.4Network详细介绍 3.Network ...
可视化数据库管理工具DataGrip使用详解
参考链接:https://www.hangge.com/blog/cache/detail_2829.html 日常开发中少不了各种可视化数据库管理工具.如果需要同时能连接多种数据库,大家肯定都会想到 ...
hbuilderx的快捷键整理pdf_mac键盘快捷键详解，苹果电脑键盘快捷键图文教程
作为 Apple 最成熟的系统之一,macOS 已经成为许多人每天都在接触的生产力工具.为了帮助大家更好地了解 macOS 的生态魅力,我们整理了这份融合了文字图片和动图的mac键盘快捷键详解,希望能 ...
swagger文档增强工具knife4j使用详解
本文从本人博客搬运,原文格式更加美观,可以移步原文阅读:swagger文档增强工具knife4j使用详解使用原生的swagger作为接口文档,功能不够强大,并且默认的ui比较简陋,不符合大众审美.所 ...
Unity 3D 菜单栏快捷键详解
nity 3D菜单栏及快捷键详解 File 菜单 Edit 菜单 Assets 菜单 GameObject 菜单 Component 菜单 Window 菜单 Help 菜单其他快捷键 Unity ...
Unity快捷键详解
Unity快捷键详解 -- -- 目录: 一:常用快捷键二:快捷键(官方文档) 三:快捷键查看及相关操作(编辑器) 四:全局快捷键和上下文快捷键 -- -- 一:常用快捷键补充:Ctrl+Shif ...
2022苹果开发者账号注册流程详解（公司账号）
公司开发者账号注册流程详解: 一.注册公司账号前需要提供的信息: 1)邮箱,邮箱密码: 2)微信或支付宝或储蓄卡或者信用卡(原来是必须有需要带国际支付能力银行卡(visa银行卡,实际上是转账到国外的苹 ...
谷歌浏览器开发者工具操作手册
谷歌浏览器开发者工具操作手册文章目录谷歌浏览器开发者工具操作手册一.准备工作 1.1 开发者工具打开的几种方式 1.2 将开发者工具设置为中文二.元素(Elements) 2.1 基本结构图例 ...

谷歌浏览器开发者工具的快捷键详解

谷歌浏览器开发者工具的快捷键详解相关推荐

最新文章

热门文章