浏览器开发工具：终极指南🔥

2025-05-25

浏览器开发工具：终极指南🔥

内容（点击展开）↕️

设计模式

启用设计模式将使整个网页可编辑，只需单击和键入即可。

要使用它，打开控制台并运行：

document.designMode = 'on'
Enter fullscreen mode Exit fullscreen mode

演示

漂亮的印刷品

原始文件通常经过压缩，因此难以阅读。使用“Pretty Print”选项进行格式化

在后台，Chrome 正在创建一个新文件（名称filename.js:formatted），关闭该文件将撤消格式化。

如果每次都这样做太无聊，可以使用实验性设置，自动为所有来源启用美观打印。
在⋮→ Settings→Experiments选择 下Automatically pretty print in the Sources Panel。

演示

指挥托盘和超级搜索

命令颗粒使您可以完全访问开发工具中可用的每个命令，并且对于快速导航非常有价值。

键入Ctrl+ Shift+P打开命令菜单，然后开始键入以过滤命令并按 Enter 执行。

同样，如果您只想查找函数名称，则可以使用++Ctrl跨文件过滤方法。ShiftO

演示

在同一菜单中，您还可以按文件名或代码（HTML、CSS、JS 等）搜索所有已加载的资源、所有网络请求、可见组件、内存配置文件、代码片段等。此外，还支持 RegEx 等高级功能。

对于使用框架构建的应用，您可能会看到很多不相关的文件（例如 node_modules、webpack 输出等）。您可以在 ⋮ → 隐藏忽略列表源中隐藏这些文件。默认情况下，此功能会使用智能x_google_ignorelist检测哪些文件可能不相关，但您也可以在“设置”下通过正则表达式添加自定义源。

片段

假设您花了一段时间在控制台中编写了一个函数，并计划稍后在各个网站上复用它。这时，代码片段就派上用场了。它们从命令面板调用，让您可以保存代码以供日后使用，并使用 bang!运算符执行。

演示

现场表达

您无需重复执行命令来监控更改，而是可以使用Live Expressions实时观察值。只需执行命令，然后使用眼睛图标将其固定，即可自动查看更改。

这有很多用例，但我经常使用的一个用例是，在测试应用程序的键盘导航时，固定document.activeElement命令将在焦点元素每次发生变化时打印日志，即使它已从 GUI 中移除。

演示

跟踪变更

我们都遇到过这种情况：你用开发工具编辑了应用的 HTML、CSS 和 JS，一切运行正常，但却记不清具体修改了什么。这时“更改”选项卡就派上用场了。你可以使用命令面板（Ctrl+Shift+P，然后输入“Show Changes”）或下方的绘图面板访问它。

然后，您将能够看到所有更改的差异输出。在这里，您可以将更改复制到剪贴板，或还原某些更改。

演示

控制台简写

  • $()- 简写Document.querySelector()（选择 DOM 元素，jQuery 风格！）
  • $$()- 与上面相同，但用于selectAll返回数组中的多个元素时
  • $_- 返回最后计算的表达式的值
  • $0- 返回最近选择的 DOM 元素（在检查器中）
  • $1...$4也可以用来抓取之前选择的 UI 元素
  • $x()- 允许您使用 Xpath 查询选择 DOM 元素
  • keys()和values()- Object.getKeys() 的简写，将返回 obj 键或值的数组
  • copy()- 将内容复制到剪贴板
  • monitorEvents()- 每次触发给定事件时运行命令
  • 对于某些常见的控制台命令（例如console.table()），您不需要输入前面的console.，只需运行table()

您可以随时使用Ctrl+ L、使用清除按钮或运行以下命令清除控制台clear()

还有更多控制台简写命令，这里是完整列表。

警告这些技巧仅在开发工具控制台中有效，并且不适用于您的代码！

查找未使用的代码

使用Coverage工具，轻松识别哪些 bundles 最大、实际使用了多少代码，以及每个文件的加载影响。这可以准确地显示哪些代码被加载但从未使用，以及这些代码的成本。

点击三个点，选择“覆盖率”并重新加载页面。任何红色条表示未使用的代码，可能会降低您的应用速度。点击单个文件可以查看哪些代码未被使用。

演示

渲染面板

此工具对于识别那些被编辑得比必要的更频繁且可能对性能和用户体验产生负面影响的元素非常有用。

帧渲染统计数据特别有用，可用于监控 CPU 和 GPU 使用情况，帮助您在问题出现之前识别它们。

渲染

网络绘画时报

您可能熟悉“网络”选项卡中呈现的瀑布图，以及它在检测较慢的请求方面非常有用。但在这里，您还可以启用屏幕截图，以便准确查看网站哪些部分在较慢的连接速度下能够为最终用户直观地加载。

演示

网络时序

点击某个项目会显示标头和响应，但前往“时间”选项卡，您将能够看到请求被阻止的阶段以及具体的服务器时间。使用Server-Timing API，您可以将更详细的信息从 API 传递到客户端应用，并在浏览器开发工具的“时间”选项卡中查看数据。要使用此功能，只需将Server-Timing标头添加到响应数据中，即可在开发工具中看到详细的图表。

要查找网页的总大小，请在“网络”面板下选中“禁用缓存”，重新加载页面，底部的信息栏将显示总大小、总时间、总请求数和其他关键统计数据。

检查网络请求

您可能已经知道这一点，但您还可以查看您的网站发出的任何 HTTP 请求的请求和响应，以及查看加载时间并查看它在代码中被触发的位置。

演示

表现

性能面板及其所有功能非常值得探索。只需点击“记录”按钮，然后像终端用户一样与您的网站互动即可。完成后，您将获得 CPU 使用率、FPS 和分配给堆的内存的详细细分。时间轴上出现的峰值通常表示需要优化的代码区域。然后，您可以通过深入查看火焰图来进一步调查，查看主线程上发生的所有事件的完整堆栈轨迹。

演示

识别内存泄漏

现代浏览器会自动对不再引用的数据进行垃圾回收。但如果代码编写不当，就会导致引用过时的代码，这些引用会随着时间的推移不断累积，从而造成内存泄漏。这会严重影响性能，并严重影响用户体验。

值得庆幸的是，它们并不像你想象的那么难找到或调试。在“内存”选项卡下，选择“时间线上的分配检测”，然后点击“记录”。
蓝色条表示仍在使用的内存，灰色条表示已被垃圾回收的内存。因此，快速增长的蓝色条可能就是发生内存泄漏的地方，你可以点击该条查看它们包含的具体数据对象，并轻松找出原因。

演示

值得注意的是，网页并非内存泄漏的唯一来源。插件、浏览器引擎本身，甚至数据缓存都可能导致内存泄漏。使用“统计信息”视图可以查看哪些数据占用了内存。

演示

原始内存检查

如果您正在构建 Web Assembly 应用，这一点对您来说尤其重要。通过内存检查器，您可以深入查看范围，并检查 ArrayBuffer、TypedArray、DataView 和 Wasm 内存。以下是 WASM 的演示：

演示

图片描述

测试 bfcache

bfcache是一种浏览器功能，可以实现即时向前和向后导航，它的工作方式与 HTTP 缓存不同，因为它将整个页面的快照存储在内存中，这是用户在导航时将看到的内容。

为了使 bfcache 功能在您的网站上有效运行，您需要对其进行优化。这时，后退/前进缓存测试器就派上用场了。在“应用程序”→“后退/前进缓存”选项卡下，点击“测试后退/前进缓存”，您将看到结果，其中列出了每一帧的问题。点击每个结果还会显示修复方法的说明。

演示

完全刷新

有些错误是由缓存内容引起的，对于这些错误，常规刷新是不够的。打开开发工具后，您可以按住刷新按钮（2 秒），然后会看到一些额外的刷新选项，包括“清空缓存并完全重新加载”。
当之前没有缓存任何内容时，这对于衡量新用户的首次加载指标也很有用。

要一次刷新所有选项卡，只需chrome://restart在地址栏中重新打开即可。

灯塔

Lighthouse是一款极其实用（且简单！）的工具，可用于衡量核心网络生命力- 可访问性、SEO、响应性、性能、安全性、PWA 兼容性、最佳实践和整体用户体验。

只需打开 Lighthouse 选项卡，然后单击“开始扫描”。

演示

Lighthouse 结果可以以多种格式导出，并且您可以使用各种外部查看器来获得更多见解（比如这个）。

Lighthouse 扫描也可以纳入您的 CI/CD 系统，以便您不断了解应用程序的核心生命力。

页面大小细分

了解哪些数据正在加载到您的网站将有助于您减少整体打包大小。您可以通过“内存”和“网络”选项卡了解详情，但有时更直观的视图更有助于理解上下文。Chrome
内存树状图 (Chrome Memory Treemap) 在这方面非常有用 - 使用方法：运行 Lighthouse 扫描，将结果导出为 JSON，然后将其导入googlechrome.github.io/lighthouse/treemap/。
您可以点击任意元素放大查看更多信息。

演示

记录用户流程

注意 （此功能仍处于测试阶段，目前需要 Chrome Dev Eddition）

在审核面板下记录、回复和审核用户流程。只需点击“开始新记录”，输入名称并点击“执行”即可。用户的所有操作，包括鼠标移动、键盘按下、暂停等，都将被记录下来。然后，您可以使用“回放”功能回顾用户旅程。

在重放设置中，您可以展开查看每个步骤的详细信息，还可以实时编辑、添加和删除步骤。此外，还有一些其他选项可以模拟诸如慢速网络连接等环境。这对于用户测试非常有用。

您还可以将用户流作为 Pupateer 脚本导入和导出，以便与他人共享。

高级用户流程操作

记录器工具还有很多其他有用的功能，但经常被低估。了解这些功能将有助于你提升用户测试的效果。

此功能有用的示例包括：向另一个开发人员发送重新创建错误的确切步骤，向分析师演示用户在测试会话期间的行为方式，或放慢速度来调试复杂问题。

记录用户流后，您可以：

  • 重播（显然！）
  • 查看随时间推移的详细绩效指标
  • 导出它（作为 JSON、Puppeteer 或 Puppeteer 回复脚本）
  • 编辑流程（然后重新导入）
  • 与他人共享用户流程（用于测试或演示）
  • 配置重播设置，例如应用限制或设备限制
  • 慢动作重播，并进行详细调试
  • 应用断点，在某些步骤暂停并检查
  • 导入其他工具生成的用户流
  • 添加其他步骤或删除步骤

有几个第三方工具可以让您做更多的事情，以及以其他格式导入/导出，例如Cypress 插件、Nightwatch 插件、Jest 插件、WebDriver 插件等。

使用断点暂停执行

断点对于调试来说至关重要。它使您可以在某个点暂停所有内容，以检查状态并发现问题。您可能已经知道，您可以在某个点触发断点，方法是使用debugger语句，或者通过点击代码边缘（在源码面板中，或使用兼容的 IDE）。但还有其他几种类型的断点，包括：

  • 条件代码行 - 在代码的精确区域上，但仅当其他条件为真时。
  • DOM——关于更改或删除特定 DOM 节点或其子节点的代码。
  • XHR - 当 XHR URL 包含字符串模式时。
  • 事件监听器——在触发某个事件（例如单击）后运行的代码。
  • 异常 - 在抛出已捕获或未捕获异常的代码行上。
  • 函数——每当调用特定函数时。

您还可以创建条件断点（以橙色标签表示），仅当满足特定条件时才会暂停执行。为此，只需右键单击，选择“编辑断点”，然后使用 JavaScript 根据当前状态解析布尔值即可。

如果您想暂停某个特定方法，只需运行debug(methodName)即可开始并undebug(methodName)结束。

一旦到达断点，您就可以通过控制台与任何当前状态进行交互。

待办事项

远程调试

任何应用开发者都会告诉你，没有什么比在真机上测试更好了。但说到 Web，浏览器调试工具至关重要。远程调试正是为此而生——它让你能够在真机上进行测试，同时又能继续使用浏览器工具的调试功能。

相反的方向也可以同样操作，即在本地运行开发环境或远程托管，但在外部设备上访问它。

这确实需要端口转发或自定义域名映射（但这两者都没有听起来那么可怕！）。文档提供了设置说明和代理配置。

如果您正在开发具有嵌入式 Web 视图的原生 Android 应用，您也可以使用浏览器的开发工具来调试这些视图（文档）。

模拟位置和传感器

与 iOS 和 Android 模拟器类似，您可以模拟各种传感器和硬件设置。如果您开发的应用依赖于这些数据，这将非常有用。在“传感器”选项卡下，您可以更改位置、时区、语言环境、屏幕锁定、方向、运动/加速度等。

如果您经常发现自己在不同位置或区域之间切换，您可以在“设置”-->“位置”下添加这些。

演示

不再因错误而死亡！

如果您正在处理庞大的代码库或编写糟糕的库，并且异常泛滥，无法集中精力进行实际调试，那么您可以在设置下选择忽略某些脚本或特定框架抛出的任何异常。您可以使用正则表达式指定忽略列表，以便进行特定目标的调试。

您可以通过前往 ⋮ → 忽略列表，并选择“自动将已知的第三方源添加到忽略列表”来自动隐藏大多数主流框架的源文件。这将减少控制台中堆栈跟踪显示的无关信息。您仍然可以查看任何给定错误的完整堆栈，只需点击“显示更多”即可。

默认情况下，控制台将显示所有上下文的输出。这意味着，如果您安装的扩展程序抛出了错误，控制台就会变得杂乱无章。只需右键单击文件名，然后在“过滤器”下选择“隐藏来自 [扩展程序名称] 的消息”。您可以随时从同一菜单中取消隐藏这些消息。

查看和编辑存储

当我们在应用程序选项卡中时，值得一提的是这些工具对于查看、删除和编辑存储在本地存储、会话存储、cookie、IndexedDB 等中的数据是多么重要。

从存储选项卡中，您还可以查看网站存储量的明细，并模拟自定义存储配额或禁用 cookie 等限制。

请注意，存储的数据（通常）只能从设置该数据的域访问。因此，如果您在控制台中调试默认上下文以外的任何存储数据，则需要使用顶部的框架下拉菜单来切换域。

调试后台服务

如果您的应用包含通知、同步、后台获取或其他任何即使应用/当前标签不在前台也应继续运行的功能，那么这些工具就非常有用。在“应用程序”标签的“后台服务”部分下，您可以点击一个 API 类别，开始记录，然后将应用置于后台。当您返回时，您将能够具体查看触发了哪些事件，并检查每个事件。

附注：您可以查看所有已注册的服务人员，并从以下位置管理、调试和取消注册它们：chrome://serviceworker-internals

演示

HTTPS安全检查

“安全”选项卡为验证网站上常见的 HTTPS 问题提供了良好的起点。它会检查并突出显示常见的 SSL 问题，包括不安全的主源和混合内容。您还可以更详细地检查 Web 证书链。

演示

Web 身份验证

这个工具比较小众，但如果你要构建任何使用软令牌或双因素身份验证 (2FA) 的东西，它绝对是必需的。WebAuthn 工具可以让你使用各种协议（2FA、FIDO/CTAP）和接口类型（USB、NFC、蓝牙、内置）生成和模拟虚拟身份验证器设备，并提供用户验证、常驻密钥等附加选项。

这是一个快速演示：

演示

有关 Web 身份验证的概述，请参阅WebAuthn.guide或查看W3 规范

顺便说一句，有一篇有趣的文章解释了他们如何构建 webauthn 标签。

辅助功能工具

无障碍不仅对包容性至关重要，它也是大多数面向公众的应用和服务的法定要求。如果您还不了解 Web 无障碍标准的核心概念，我推荐您阅读Web.Dev 无障碍教程，它提供了很好的概述。

Lighthouse 为审核可访问性提供了一个良好的起点，并且易于使用，并直接内置于开发人员工具中。

CSS 工具还内置了对比度工具，可以帮助您为网站应用清晰易读的颜色。检查弹出窗口会显示警告，您可以在“样式”面板中进一步分析。

除此之外，“辅助功能”选项卡还允许您查看元素在 DOM 树中的位置、ARIA 属性和计算的辅助功能属性，所有这些都由屏幕阅读器等辅助功能工具使用。

还有一些附加组件可以为您提供更深入的见解。主要是Axe DevTools。它将向您显示详细的结果和修复说明。

截图

您可以直接从开发工具截取屏幕截图，包括：全屏、特定区域或单节点屏幕截图。
您可以打开命令面板并输入 screen ，或者对于元素 screen，只需在检查器中右键单击 DOM 元素并选择“截取屏幕截图”即可。

演示

超级复制

在“元素”选项卡中，右键单击某个元素，在“复制”下，有多个不同的选项。“复制选择器”会提供一个 CSS 选择器来定位该元素；“复制 JS 路径”会提供一个查询字符串来在 JavaScript 中选择元素；“复制外部 HTML”会复制实际的 HTML。复制元素的样式会返回该元素所有计算出的 CSS。

动画时间轴

动画面板（通过单击 3 个点打开）可让您记录任何关键帧动画，然后浏览它们以检查受影响的实际 CSS 属性。

演示

强制元素状态

如果您需要预览特定状态下给定元素的样式（例如：hover，：visited，：active，：focus 等），请右键单击它并选择更改伪类，或者从样式编辑器中单击：hov 图标。

演示

CSS 大小和单位

您是否曾经检查过某个元素，然后一直按住上下箭头键，直到尺寸看起来合适？其实，您也可以水平拖动单位，轻松预览不同的尺寸。同样，对于角度，您可以使用时钟旋转器预览/应用任何值。单位不对？只需将鼠标悬停在尺寸上，然后点击下拉菜单即可快速切换单位。

演示

调色板

大多数应用只包含少量颜色，通常当您更改颜色时，它会被设置为其中一种值。这就是调色板工具如此有用的原因。默认情况下，有几个预制调色板：页面当前颜色、页面 CSS 变量、Material 面板和一个空的自定义调色板。使用箭头在它们之间切换。

既然讲到这里，我们也有必要提一下颜色工具的强大之处。在这里，你可以：

  • 更改颜色色调、色相和透明度 - 带有实时预览
  • 单位转换（十六进制、RGB(A)、HSL(A)、HWB(A)）
  • 使用滴管从屏幕上选取任意颜色
  • 将颜色值复制到剪贴板

如果您还没有这样做，请尝试在整个应用中使用 CSS 变量（而不是 SASS 变量）。这样，您可以在一个地方更新颜色，并在所有地方预览/应用它。在开发工具中，点击变量名称即可转到原始定义，然后从那里进行修改。

演示

简易盒子阴影

盒状阴影是最适合实时预览的元素之一。正因如此，阴影编辑器才如此实用。只需点击任意阴影旁边的图标，即可预览不同的 X/Y 偏移、模糊度、扩散度以及插入阴影和普通阴影的方向。

演示

简单的动画

通过单击动画选项，您可以轻松预览各种过渡和效果。

演示

响应式设计模式

使用响应式设计模式，轻松检查您的网站是否在各种设备上正常显示。

默认情况下，只显示少数设备，但前往“设置”-->“设备”，您将能够从列表中启用更多设备，甚至可以创建具有尺寸、用户代理、平台、架构等的自定义设备。

演示

徽章

您可能会注意到“元素”选项卡中某些元素旁边有一个小标记/徽章。这些是徽章，可用于为某些元素类型（包括网格、弹性布局、广告、滚动捕捉、容器、插槽等）应用叠加层或添加额外功能。要启用徽章，请右键单击 DOM 树中的元素，然后选择“徽章设置”，然后勾选/取消勾选您希望显示的内容。

许多徽章都为附加功能打开了大门，例如Flexbox 调试器和网格布局调试器

演示

统治者

总有那么一位前端开发者，为了取悦设计师，甚至会用一把真正的尺子来测量屏幕上的元素。其实，根本不需要尺子，也不需要任何不靠谱的浏览器扩展程序，因为这个功能已经内置在开发工具中了。只需在 ⋮ → 设置 → 首选项 → 元素 → “鼠标悬停时显示标尺” 下启用即可。

演示

在 Firefox 中，有一个内置的标尺功能，可通过右上角的工具箱按钮使用。

图片描述

风格概述

CSS 概览选项卡可帮助您快速概览可进行的 CSS 改进。其目标是保持一致性（颜色、字体、断点、样式等）。

  • 调色板 - 显示您网站上使用的所有颜色。有助于识别不符合您所需主题/设计的元素
  • 字体 - 显示页面中使用的所有字体、字号和变体。优秀的网页通常只使用少量字体和文本样式。
  • 媒体查询 - 输出网站中使用的所有断点，按出现次数排序。为了简化响应式测试，您应该尽量保持一致。
  • 未使用的声明 - 列出所有未使用的声明以及无效样式的关键信息。删除这些声明将加快加载速度，并使 CSS 更易于阅读。

演示

图层

图层面板（更多工具→图层）将显示屏幕外和附加图层（3D 模式）上发生的情况。

从功能角度来看，它对于可视化特定动画的工作方式特别有用，而无需费力浏览一堆关键帧和混淆的代码。

演示

演示

将更改保存到磁盘

有两种方法可以保存或保留您在开发工具中所做的更改。工作区和本地覆盖。

工作区允许您将开发者工具中所做的更改直接保存到磁盘上的工作副本中。您
可以在“源”→“文件系统”→“添加文件夹”下设置工作区。它们支持 HTML、CSS 和 JavaScript，并且可以直接通过源面板编辑、预览和保存内容。某些框架需要进行一些额外的设置才能正常工作。

本地覆盖功能可让您跨会话保留更改（但不影响原始源文件）。
您可以在“源”→“覆盖”下设置覆盖。您可以使用“更改”菜单预览/导出更改内容的差异。

自动化

对于更高级的任务，开发者工具中的所有内容都可以通过使用WebDriver 协议（ Selenium等工具所使用的协议）的自动化 API来实现自动化。例如，请参阅webdriver devtools包。

熟悉的快捷方式

因此，浏览器开发者工具中的几乎所有功能都提供了键盘快捷键，以下是完整列表。但如果您难以记住所有快捷键，那么您可以切换到熟悉的 VS Code 快捷键。在“设置”-->“快捷键”下，在“从预设匹配快捷键”菜单中，选择“Visual Studio Code”。

黑暗模式

最后，但迄今为止最重要的提示：开发工具暗模式！

在“设置”-->“偏好设置”-->“外观”-->“主题”中，使用下拉菜单从“浅色”切换到“深色”，即可将您的开发者体验提升 10 倍。俗话说得好……虫子会被光吸引 🐛🔦

如果你实在受不了默认的暗黑模式，可以编写自己的样式表，然后启用 CSS 的自定义加载！这里提供了一些预制样式表和一个扩展程序。

有用的附加组件

我们还没有完成...到目前为止，我们只介绍了内置的开发工具，但还有一堆超级有用的附加组件/扩展

如果您正在使用特定框架（如 React、Svelte、Vue 等），那么添加它们的开发工具将为您提供对组件、状态等的额外调试能力。

除此之外，几乎所有其他事情都可以原生完成/无需额外的扩展，仍然有一些 QoL 附加组件可能会有所帮助，但请记住，如果您使用其中任何一个，您应该在浏览器中创建一个单独的 Dev 配置文件，否则它们可能会对您的隐私产生负面影响（安装的扩展程序会让您更容易被识别）。

我们完成了吗？

好吧，这次我发誓这是最后一部分，但我还是忍不住要提一下！

浏览器开发者工具的功能远不止这里介绍的这些。即使你已经从事 Web 开发数十年，我敢肯定还有很多你从未发现过的实用功能。所以，别害怕，去探索吧！

最佳功能仍处于实验阶段。您可以在“设置”-->“实验”中启用它们来试用。每个功能旁边都有一个链接，您可以在那里查看使用教程以及 API 文档。

其他浏览器：

  • Firefox 开发工具的功能集和布局与 Chrome 非常相似，但包含一些高级功能（围绕音频、着色器）
  • Safari 的开发者工具在功能方面落后，但有时仍然是 iOS 测试所必需的。
  • 其他基于 Chromium 的浏览器（如 Edge、Brave、Vivaldi 等）与 Chrome 继承自同一来源，因此具有几乎相同的开发工具。

以下来源非常适合了解最新的调试工具：

文章来源：https://dev.to/lissy93/awesome-dev-tool-tips-32oo
Devto 翻译
PREV
console.log() 的乐趣💿
NEXT
开发者赚取额外收入的 50 种方法