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

编程

更新时间：2024-09-16168

admin管理员组
文章数量:1516870

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

更多相关文章

一文搞定：借助微软U启动工具，实现Windows 10一键安装

IT技术

1月前

微软官网U启动制作工具安装window10系统 1.登录微软官方网站：终端进入root管理员模式 1.登录微软官方网站：https:www.microsoft.comzh-cnsoftware-down

手把手教学：利用MediaCreationTool制作Windows10启动U盘

IT技术

1月前

现在重装系统一般都选择Windows10 了，但是Windows10每半年出一个大版本，升级安装总会出现一些或大或小的问题，所以我每次都是制作 U盘安装盘重新安装最新的Windows

如何用密码恢复工具解锁你的办公软件？简单几步教会你！

IT技术

1月前

这个案例是家人的电脑，已经使用多年，又是有小孩操作过的，所以电脑密码根本不记得是什么了？那难道这台电脑就废了吗？需要重新装机吗？那里面的资料不是没有了？为了解决以上问题，一般我们可以通过PE工具进入系统，进行重置管理密码的方

Android开发者：教你一步到位开启夜间模式

编程

1月前

android 自带的夜间模式是真的丑所以想通过监控模式来自定义模式其实很简单首先在 AndroidManifest.xml 添加监控 android:configChanges="orie

为什么我的360浏览器主页总是改不了？原因揭秘！

IT技术

1月前

以前电脑上装的是IE浏览器和搜狗浏览器，但搜狗浏览器不能到图书馆的电子资源中下载论文，好像是由于有加速器，数据据不能识别为校内IP，故不能下载；IE浏览器又经常出问题，经常死住，让人郁闷。在女朋友的劝说下，安装了360安全浏

一键优化：教你如何设置电脑上的图片分辨率

编程

1月前

许多没有ps的小伙伴都不知道怎么去修改图片分辨率，而且ps下载操作起来也比较麻烦，那么有没有简单的改图片分辨（？今天就跟大家说一下图片分辨率转换工具，使用压缩图的在线图片处理工具，打开浏览器即可修改分辨率，赶紧来了解一下。

快速提升电脑响应速度？AHCI驱动安装工具让你一试就懂

IT技术

1月前

AHCI驱动安装工具：轻松启用AHCI模式，提升SSD性能在现代电脑系统中，SSD（固态硬盘）因其读写速度快、响应时间短而受到广泛欢迎。然而，若未开启AHCI模式，SSD的性能可能会大打折扣。今天，我们就来推荐一款开源项目—

当Flash中心变味，如何轻松恢复IE默认首页？

编程

1月前

IE浏览器的首页不知什么时候被一个恶意程序给强行修改了，每次打开网页都会出现同一个网址，让人非常烦心。而且，无论我怎么修改都改不回来。到底该怎么办啊？病情诊断IE首页被强行“篡改”、“挟持”，这是上网用户经常碰到的问题

一键提升 Wi-Fi Direct 与 STA 测试效率 — iPerf3 应用秘籍

编程

1月前

一. iperf3 测试 sta的throughput 1 .1 测试要求： MTK平台需要Enable CTIA. 在sheilding room环境下测试 1.2 安装iperf 工具手机

小白也能懂：轻松查看Windows中的主板版本教程

IT技术

1月前

如果你是一个电脑小白，那么建议你不要下载第三方软件查看自己电脑的主板类型！以免下到流氓软件，可以通过小意为你整理的三种方法轻松查看自己电脑的主板类型：方法一，系统信息工具：在Windows系统中，您可以使用内置

零权限也能玩转网络限速？EvilLimiter大揭秘！

编程

1月前

网络限速工具EvilLimiter：零权限掌控局域网带宽的完整方案你是否曾因同事疯狂下载导致网速卡顿？或是孩子沉迷在线游戏影响学习？网络限速工具EvilLimiter正是解决这些痛点的终极方案！这款基于ARP欺骗技术的带宽管

Adobe Flash Player的幕后英雄：备份系统详解

IT技术

1月前

备份系统是一种用于保护数据免受丢失、损坏或意外删除影响的解决方案。备份系统可以将关键数据复制并存储在安全的位置，确保在发生故障或数据丢失事件时可以快速恢复。这对于企业和个人来说都是至关重要的，尤其是在面临硬件故障、恶意软件攻击、自然灾

深度解析Access2007：让管理员角色提升工作效率的秘密

IT技术

1月前

设置工作组，是为了分配和管理权限的方便，可以将用户划分分配到工作组，然后对工作组授予权限，而不用一个个的对用户授权。默认的管理员组和用户组，一般就已经可以满足使用了，默认都拥有全部权限。管理员组的SID对所有的工作组信息文件都相同，而用

不用纠结哪个先删，App Cleaner让你的Adobe Flash Player管理零压力！

编程

1月前

专业小巧的Mac软件卸载工具，App Cleaner for Mac的小优势带给您，App Cleaner能够帮助您将系统中卸载不掉的顽固文件、应用程序和删除不彻底残留的文件全部清除，快速释放Mac电脑内存。 1.拖拽卸载

摆脱SWF依赖，利用Windows内置工具，揭秘蓝牙数据抓包技术

IT技术

1月前

告别第三方软件！用Windows自带蓝牙玩转BLE设备调试（含数据抓包教程）你是否也曾为调试一个简单的蓝牙低功耗（BLE）设备，而不得不四处寻找、下载并学习使用各种第三方工具？对于学生创客、硬件爱好者，或是预算有限的个人开发

DiskGenius秘籍：一步到位处理你的硬盘坏点困扰！

IT技术

1月前

到了这一步，首先需要说明的是已经使用过工作扫描完磁盘坏道，并且自己已经很清楚的知道坏道在整块磁盘所在的位置了。本文示例工具工具：DiskGenius磁盘大小：29.9GB坏道所在位置：50%扫描到坏道

一文搞定！让你顺利刻录Windows ISO成DVD-RW教程

编程

1月前

前言准备工作：一张DVD-RW 4.7G的光盘一台刻录机已联网的电脑（若电脑上有windows.iso镜像文件，则未联网也无所谓）光盘4.7G并不代表可存储内容大小就为4.7G

电脑小白也能秒懂的截图神技：Alt、A的奥秘全揭秘

IT技术

1月前

电脑截图快捷键大全，总有一款适合你在使用电脑的过程中，截图功能无疑成为了我们日常生活和工作中不可或缺的工具。无论是记录重要信息、分享有趣内容，还是进行工作交流，截图都扮演着重要角色。那么，电脑截图快捷键有哪些呢？本文将为大家

提升体验必知：Adobe Flash Player下的6个延迟测试必备工具

编程

1月前

6款免费网络延迟测试工具作为网络管理员或网络工程师，时刻关注网络的交付速度至关重要。不仅需要确保自己有良好的响应时间，还需要确保网络的速度足以满足用户通信所需的每一条路径。而手动测试每个路径将占用你所有的时间。所以需要获得一

Win11中'此电脑'一闪而逝？别急，这里有救！

IT技术

1月前

Win11双击“此电脑”无法打开的三种解决方法在Windows 11操作系统中，“此电脑”（或称为“我的电脑”）是用户查看和管理计算机上文件和文件夹的重要工具。然而，有时用户可能会遇到双击“此电脑”图标却无法打开的问题，

发表评论

全部评论 0

暂无评论

编程频道|软件玩家 - 软件改变生活！

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

前言

具体介绍

打开DevTools

所有面板

Elements面板

样式侧边栏(Style Sidebar)

Sources 面板

代码编辑快捷键

TimeLine 面板

Profiles 面板

Console 控制台

Screencasting

Emulation

其他Chrome快捷方式

更多相关文章

一文搞定：借助微软U启动工具，实现Windows 10一键安装

手把手教学：利用MediaCreationTool制作Windows10启动U盘

如何用密码恢复工具解锁你的办公软件？简单几步教会你！

Android开发者：教你一步到位开启夜间模式

为什么我的360浏览器主页总是改不了？原因揭秘！

一键优化：教你如何设置电脑上的图片分辨率

快速提升电脑响应速度？AHCI驱动安装工具让你一试就懂

当Flash中心变味，如何轻松恢复IE默认首页？

一键提升 Wi-Fi Direct 与 STA 测试效率 — iPerf3 应用秘籍

小白也能懂：轻松查看Windows中的主板版本教程

零权限也能玩转网络限速？EvilLimiter大揭秘！

Adobe Flash Player的幕后英雄：备份系统详解

深度解析Access2007：让管理员角色提升工作效率的秘密

不用纠结哪个先删，App Cleaner让你的Adobe Flash Player管理零压力！

摆脱SWF依赖，利用Windows内置工具，揭秘蓝牙数据抓包技术

DiskGenius秘籍：一步到位处理你的硬盘坏点困扰！

一文搞定！让你顺利刻录Windows ISO成DVD-RW教程

电脑小白也能秒懂的截图神技：Alt、A的奥秘全揭秘

提升体验必知：Adobe Flash Player下的6个延迟测试必备工具

Win11中'此电脑'一闪而逝？别急，这里有救！

发表评论

推荐文章

本地微信模拟登陆秘籍：借助开发者工具一键操作

遇到Edge浏览器搜索问题？Adobe Flash Player救星来啦！

GTA V进阶技巧：用YimMenu挑战模型加载的壁垒

IDEA文件夹大揭秘：隐藏文件轻松可见，解锁更多可能性

uniapp新手必看：快速指南教你如何自动检查并更新应用

热门文章

告别混乱！快速切换IE为你的官方浏览器选择

GPRS MODEM拨号失败？别怕！看这里揭秘错误代码含义

一步一步教你：联想笔记本的系统重置方法

MSVCP110.dll失踪，不要慌张！轻松找回你的程序运行权杖

360安全卫士卸载全攻略：笔记&360小程序中心卸载技巧分享

Adobe Flash中心的ADSS.exe和ADSso.exe困扰？一文解决所有问题！

解锁Win7 IE的互联网临时文件：官方地址大揭秘！

当Office软件出故障时：全面解析Word和Excel修复方法

轻松实现C语言中外置摄像头的调用与多媒体功能

游戏卡顿？原来是少了d3dx9_43.dll？修复步骤全曝光！

最新文章

金融建模中Excel与VBA的超级组合拳

现代计算的新篇章：把FEMCFD求解器封装为PyTorch或JAX函数

突破视觉强化学习训练的‘视觉’障碍，MJX带来高效方案

Excel高手必备：TL431可调电压基准源的求解秘技

高性能物理世界：MuJoCo XLA在Unity中的应用揭秘

Excel宏数量爆炸，开机慢如乌龟？轻松破解攻略！

Open-AutoGLM性能瓶颈大揭秘：破解编译三大障碍

MuJoCo高手之路：从入门到精通的进阶指南

深度学习加速新纪元：张量引擎TBE与深度学习编译器，加速你的训练与推理

MJX秘籍：5倍加速技巧，改写强化学习训练规则！

清华同方超锐L60P 龙芯 3A600032GB1TB集显麒麟统信永久版系统参数报价

清华同方超锐L60P 龙芯 3A600016GB512GB集显KOS麒麟系统试用版参数报价

清华同方超锐L60P 龙芯 3A600032GB1TB集显麒麟统信永久版系统+WPS参数报价

清华同方超锐L60P 龙芯 3A600016GB512GB集显麒麟统信永久版系统参数报价

联想开天X1f G1d 飞腾D3000M16GB1TB集显国防版麒麟统信系统参数报价