DevTools 调试技巧和快捷方式（Chrome、Firefox、Edge）

在当今我们触手可及的所有工具中，DevTools 可能是最先进的工具之一。 多年来，它已成为调试、分析、审计甚至原型设计的工具——所有这些都生活在同一个界面中，而且总是只有一个键盘快捷键。 尽管如此，DevTools 仍然有很多不为人知的宝石和未被发现的宝藏，它们生活在隐藏标签和实验设置的偏远边缘。 让我们解决这个问题。

在本文中，让我们深入了解 DevTools 中的一些有用和晦涩的功能。 我们将研究所有现代浏览器（Chrome、Firefox、Edge、Safari）并研究它们为我们 Web 开发人员提供的有用工具。 我们将专注于我们在 SmashingMag 上经常使用的那些，以及一些帮助我们修复讨厌的错误并编写更好的代码的小技巧和策略。

创建浏览器配置文件

在分析网站的性能或跟踪特定的可访问性问题时，一段时间以来，我们一直在为每个任务创建单独的浏览器配置文件。 我们通常使用至少 5 个用户配置文件，每个配置文件都有自己的扩展程序、书签、小书签和打开或关闭的功能。 让我们仔细看看它们。

• 辅助功能配置文件
  一个干净的浏览器配置文件，包括用于检查可访问性的各种工具，例如 Accessibility Insights、ax 和 a11y.css，以及一些其他可访问性 linter 和色觉模拟器。

• 调试配置文件
  启用了一些用于分析的实验性设置的配置文件，以及为每个新窗口自动打开 DevTools 的选项，以及用于快速审核和分析的自定义诊断 CSS。

• 性能概况
  一个没有扩展的干净配置文件，带有一些用于使用 Lighthouse、RequestMap 进行审计的特殊书签、性能诊断 CSS 和一些与性能相关的链接要牢记（例如加载中的资源优先级）。 总是与 4 × CPU 节流和网络节流（慢 3G）配合得很好。

• 快乐的顾客
  根据我们从分析中获得的数据，该个人资料与我们的许多读者（像您这样的好人）所拥有的个人资料非常接近。 它将包含一些流行的扩展、常见的 Web 开发扩展、广告拦截器、标签管理、Google Docs 离线、LastPass、VPN、Browserstack、Grammarly 等。使用中没有节流。

• 不满意的客户
  一个阅读器的配置文件，用于连接速度慢、受限制的连接（慢 3G）、内存不足、CPU 性能不佳，并且打开了 10 个最流行的浏览器扩展。 我们通常使用此配置文件来测试我们最重的页面，以体验最糟糕的客户体验。

根据手头的任务，我们可以跳转到专用配置文件之一。 实际的便利来自于每个配置文件都有特定的扩展、书签和浏览器设置的简单安排，所有这些都已设置好并准备就绪。 因此，如果需要，我们可以直接进行性能调试或可访问性审计，而无需搜索正确的扩展。

毋庸置疑，我们会尽最大努力保持每个配置文件干净整洁——这适用于浏览器扩展以及浏览器书签、cookie 和缓存。

全局键盘快捷键

诚然，由于 DevTools 中可用的功能数量之多，在选项卡、面板、齿轮图标和圆点之间很难找到其中一些功能也就不足为奇了。 但是，无需记住它们的放置位置。 相反，值得记住几个有用的全局键盘快捷键 - 它们将帮助您更快地跳转到特定功能。

• 打开命令菜单（Chrome、Edge）
  作为最著名的命令之一，这个命令实际上有两个特性。 Cmd/Ctrl + Shift + P打开面板、抽屉和 DevTools 中所有功能的快速自动完成搜索。 Cmd/Ctrl + P打开一个抽屉，其中包含当前页面上使用的所有可用文件。 如果您需要快速访问任何 DevTools 功能，命令菜单是一种快速到达那里的方法——用于一般抽屉、隐藏菜单或特定功能。

• 打开 DevTools 设置（所有现代浏览器）
  通常，“设置”面板中隐藏着许多晦涩难懂的工具和功能——从模拟设备到网络节流配置文件和实验。 在 Chrome 中，您可以单击右上角的齿轮图标或使用Shift + ? . 在 Firefox 中，您可以使用F1跳转到设置。

• 切换检查元素模式（所有现代浏览器）
  您可以使用Cmd/Ctrl + Shift + C切换检查元素模式，而不是单击检查图标然后专注于要调试的元素。

• 切换 HTML 模式（所有现代浏览器） 在检查元素时，您可能想要更改其属性，例如类或状态。 无需右键单击元素并逐个添加值，您可以使用Fn + F2 （或在 Windows 上仅F2 ）在当前选定元素上切换 HTML 模式。

• 切换设备模式（所有现代浏览器） 要跳转到设备工具栏模式，例如预览模型在窄屏幕上的外观，或触发媒体查询调试器，您可以在 Chrome 中使用Cmd/Ctrl + Shift + M ，和 Firefox 中的Cmd/Ctrl + Opt/Alt + M。

还有很多其他有用的键盘快捷键，例如用于暂停和恢复脚本执行，以及在源代码编辑器中转到匹配括号（用于冗长的媒体查询和 JS 函数）。

您可以在 Chrome DevTools Keyboard Shortcuts 和 Firefox DevTools Keyboard Shortcuts 上找到所有键盘快捷键的完整概述——通常，它们在现代浏览器中非常一致。

打开实验设置

DevTools 附带了一组实验性设置，虽然不太推荐给广大受众，但对于调试确实非常有用。 不过请注意：有时这些设置可能会冻结 Chrome 或使其非常缓慢（这就是为什么它们首先是实验性的）。

但是，使用单独的配置文件，您可以安全地为每个配置文件打开其中一些设置，然后在必要时将其关闭。 因此，虽然我们在没有开启实验的情况下使用常规配置文件进行随意浏览，但在调试模式下，我们总是首先选择专用配置文件，以更快地消除这些错误。

在 Chrome 中打开 DevTools 后，跳转到“设置”（ Shift + ?打开 DevTools）并在边栏中找到“实验”。 显然，每个 DevTools 中都有大量的实验性设置，但下面提到的只是我们认为对我们的工作很有帮助的那些。

在那里列出的功能中，值得打开“源面板中的自动漂亮打印” ，这将在查看源代码时默认美化压缩样式和脚本。 您还可以启用 CSS Grid 调试器和Flexbox 调试来处理布局问题。 还有一个可以派上用场的源差异和源顺序查看器。

对于性能审计，您可以标记“时间线：事件发起者”和“时间线：失效跟踪”，它们将显示在“性能”面板中，突出显示导致昂贵操作的脚本，例如长任务和样式重新计算。 此外，在 Edge 中，您可以在 3D 视图中启用合成图层。

对于给定的配置文件，您可以通过在您选择的浏览器配置文件中访问 c chrome://flags/来访问更多隐藏的功能。 例如，您可以在此处打开最新的和实验性的 JavaScript 功能、实验性 Web 平台功能或启用资源加载提示以提供对慢速网络连接的预览。

在 Firefox 中，使用F1跳转到设置。 在 Dock 的底部，您可以提示浏览器显示浏览器样式、打开/关闭自动完成 CSS、更改编辑器首选项、切换油漆闪烁、调整屏幕截图行为和启用源映射（默认情况下未打开）。 在 Safari 中，您可以在“开发 → 实验设置”下找到实验设置。

在 Dock 状态（Chrome、Edge、Firefox）之间切换

诚然，DevTools 中的窗格视图并不是一个特别大的启示。 在 Dock 的“样式”选项卡中，样式从上到下显示，按其 CSS 特性排序。 然而，多年来我们一直忽略的一件小事是一个小切换按钮:hov放置在样式的正上方。

它允许您在特定的交互式元素上强制元素状态（ :active 、 :focus 、 :focus-within 、 :hover 、 :visited和:focus-visible ，以及最近的:target ）——例如强制执行:focus和:active可访问性检查按钮上的:active状态。

在 Firefox 中，您可以在检查 DOM 元素时更改它的伪类 — 右键单击​​ DOM 节点即可使用该功能。

不过，总是会妨碍您的一件事是dock 的位置，它有时在右侧效果更好，有时在底部效果更好 - 取决于您的错误侵入您的 DOM 树的位置。

要在停靠状态之间快速切换，可以使用Cmd/Ctrl + Shift + D。 要记住的一个问题是，只有当 DevTools 处于默认位置（停靠在右侧）时，快捷方式才会将 DevTools 取消停靠到单独的窗口中。 否则，快捷方式只会在默认位置和您更改的位置之间切换。

三重窗格视图 (Firefox)

虽然我们可能习惯了双窗格视图，但 Firefox 默认提供了一个有用的三窗格视图——它在不同部分看起来略有不同。 在 Inspector 视图中，除了 HTML 和样式之外，您还可以放置布局调试器、显示计算机样式或跟踪 CSS 更改——无需在选项卡之间切换即可快速访问所有这些信息非常有用。

每当您在 Firefox 中编辑样式时，DevTools 都会突出显示页面中使用的媒体查询，并快速跳转到定义断点行为的 CSS 部分。 所有这些都显示在源代码旁边，因此无需搜索特定的断点。 （更不用说默认格式化的样式——这很方便！）。

Chrome 和 Edge 中也有类似的视图，但它仅在“元素”面板中可用（右上角的侧边栏图标），到目前为止它只显示计算样式（这就是为什么它被称为“计算样式边栏”）。

按属性过滤样式 (Firefox)

一般来说，Firefox DevTools 被严重低估了。 Firefox 提供的另一个显着功能是通过特定属性过滤所有样式的选项（用过滤器图标表示）。 例如，如果您注意到某些样式被散布在样式表中某处的其他样式覆盖，您可以使用快速过滤器隐藏所有不影响该特定属性的定义，并查看发生覆盖的确切位置。

此外，在给定页面上，您可以突出显示与特定选择器匹配的所有实例。 例如，如果您注意到在页面的深色和浅色部分呈现配置文件图像的错误，您可以突出显示特定类的所有实例，而无需手动搜索它们或添加额外的样式来突出显示它们。 在样式面板中定位选择器并选择一个目标图标以“突出显示与此选择器匹配的所有元素”就足够了。

在“样式”面板中，Firefox 还解释了哪些 CSS 属性不影响所选元素以及原因，以及可能有助于解决问题或避免意外行为的建议（该功能称为非活动 CSS）。

另一个方便的功能是 Firefox 将scroll和overflow标记分配给导致容器溢出或滚动的元素（溢出调试） - 当您试图找出水平滚动条突然出现的原因时非常有用，或者元素没有'不按预期行事。

递归扩展节点（Chrome、Edge、Firefox）

在检查具有深度嵌套 DOM 的元素时，有时可能需要一段时间才能遍历树，从一个嵌套节点到另一个。 通过右键单击节点上的箭头，您可以选择“递归扩展”，然后单击即可扩展当前选定的节点（及其所有子节点）。 或者，您可以在单击元素名称旁边的箭头图标时按住Option （或 Windows 上的Ctrl + Alt ）。

收集和导出代码覆盖率（Chrome、Edge）

在给定的页面上，可能根本不会使用大部分 CSS 和 JavaScript，尽管它们会被传送到浏览器。 “代码覆盖率”面板（命令菜单→“显示覆盖率”）允许您探索给定页面上未使用的样式和代码。 我们使用代码覆盖来收集网站上使用的每个模板的关键 CSS，手动这样做可能会很累人。

有了“代码覆盖率”，经历了几个场景，包括大量的点击、选项卡和窗口大小调整，我们还将 DevTools 收集的覆盖率数据导出为 JSON（通过导出/下载图标）。 最重要的是，您可以使用 Puppeteer，它还提供了一个 API 来收集覆盖率（但我们还没有）。

媒体查询调试（Chrome、Edge）

对于一个给定的页面，有几十个媒体查询在运行，很容易跟踪被媒体查询范围内的其他样式覆盖的样式。 要查找 CSS 文件中可能导致意外行为的特定部分，我们可以将注意力转向媒体查询调试器。 默认情况下，它隐藏在设备工具栏中的“设置”齿轮后面，但当它默认可用时，它实际上非常有用。

使用Cmd/Ctrl + Shift + M切换设备工具栏（响应模式），然后选择右上角的三个点。 然后选择“显示媒体查询”。 现在您应该能够看到代表每个媒体查询范围的水平条。

起初它们可能看起来有点混乱，但这些条的对齐方式代表屏幕宽度，并且在视口的左侧和右侧复制。 靠近屏幕中心的条被远离中心的条覆盖。 顶部的蓝色条表示max-width媒体查询，绿色表示min-width和max-width媒体查询，橙色表示仅min-width媒体查询。

对于所有栏，您可以在将鼠标悬停在它们上方时跟踪它们包含哪些媒体查询。 您可以跳转到特定的媒体查询范围，并在打开样式面板的情况下详细检查布局问题。 通过单击条上的任何位置，您可以触发特定的断点，如果您右键单击条，您可以显示它在源代码中的位置。 实际上，您可以在媒体查询之间快速来回跳转，而不是手动调整屏幕大小并一遍又一遍地检查屏幕宽度。

作为一个快速的旁注，您还可以指定您的自定义模拟设备而不是预定义的设备 - 事实上，已经有很多可用的设备预设。 此外，如果需要，您可以使用“传感器”窗格来控制特定的设备传感器。 此外，在 Firefox 中，您可以启用和禁用触摸模拟，并定义特定的用户代理，例如检查页面在搜索引擎爬虫请求页面时的行为方式。

模拟偏好媒体查询（Chrome、Edge、Firefox）

除了与屏幕尺寸相关的媒体查询外，我们还可以模拟特定于可访问性的媒体查询，例如， prefers-color-scheme 、 prefers-reduced-motion和视觉缺陷。 要切换仿真，请前往命令控制面板（ Cmd/Ctrl + Shift + P ）并输入“显示渲染”。 现在，在设置中，您可以选择首选的仿真。

（这也是您可以选择突出显示需要重新绘制的区域（“Paint Flashing”）、已移动的区域（“Layout Shift Regions”）和调试滚动性能问题的地方。）

谈论仿真：还记得过去您可能如何为打印样式表寻找布局错误而苦苦挣扎吗？ 在同一个面板中，您也可以在此处预览打印样式的工作方式——无需一遍又一遍地打印随机页面的 PDF 来找出导致主要渲染问题的原因。

此外，在 Chrome 的同一个面板中，您可以添加各种渲染调试功能——例如，油漆闪烁、图层边框、滚动性能问题、禁用 AVIF 和 WebP。

附带说明一下，Safari 中有一个用于“强制深色外观”和“强制打印媒体样式”的 DevTools 工具栏选项，您可以在 Firefox 的“辅助功能”选项卡中模拟视觉缺陷。 （稍后我们将详细讨论可访问性。）在 Firefox 中，打印视图也可以在“检查”模式下的“样式”窗格上方使用。

在每个新选项卡中自动打开 DevTools (Chrome)

通过性能审计，我们可能希望一次浏览多个页面，并观察它们在单独的 DevTools 中的行为，而不必想知道哪个 DevTools 负责哪个窗口。 为了在调试期间节省一点时间，您可以使用终端命令创建一个快捷方式，该命令将打开一个浏览器，默认情况下会在每个新选项卡中自动打开 DevTools。

为此，我们需要在运行基于 Edge 的 Chrome 浏览器时传递标志--auto-open-devtools-for-tabs 。 我们运行一个简单的 Alfred 脚本，在需要时打开带有标志的 Canary 浏览器（向 Addy 致敬）——当你真正需要它时非常有用：

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --auto-open-devtools-for-tabs htps://www.smashingmagazine.com

您可以在 Peter Beverloo 的 Chrome 命令行开关指南中找到所有 Chrome、Edge 命令行开关的非常全面的概述。

全页截图（Chrome、Edge、Firefox）

在“元素”窗格中选择 HTML 节点时，您可以右键单击该节点并提示 DevTools 创建该节点的屏幕截图，在“响应模式”中您可以捕获该节点的可见部分的屏幕截图页面或全尺寸屏幕截图（右上角的三个点）。

要更快地创建全屏截图，您还可以在命令菜单中提示“全屏截图”（ Cmd/Ctrl + Shift + P →“全屏截图”）。 通常它会快一点。 请记住，延迟加载或渐进式渲染的页面部分（例如content-visibility ）可能无法正确显示在屏幕截图中，因此您可能需要先一直向下滚动页面。

在 Firefox 中，您可以先进入“设备工具栏”模式，然后找到右上角的相机图标并激活它，从而生成页面可见部分的屏幕截图。 或者对于整页截图，您需要先在“设置”中切换“截取整个页面的截图”，然后您会在 DevTools 工具栏中找到相机图标。

组件标尺（Chrome、Edge、Firefox）

也许您想快速检查图像或广告位的宽度和高度。 但是，您可以使用规则来测量组件的大小，而不是截取屏幕截图或检查元素并复制/粘贴width和height值。 现代浏览器都提供了规则，但 Firefox DevTools 还允许您测量页面的一部分。 您可以在 DevTools 右侧的“响应模式”图标旁边找到测量工具。

跟踪更改（Chrome、Edge、Firefox）

在调试特定问题时，您可能已经注释掉了一些代码行，并且可能添加了一些似乎可以永久解决问题的新代码。 您的更改现在必须复制到实际的源文件中。 为此，无需手动收集您对文件所做的所有更改。

在 Chrome 中，在编辑源文件时切换“本地修改”命令。 您应该会在下面的面板中看到更改跟踪器。 如果它已折叠，请通过垂直拖动将其拉出。 该窗格突出显示更改的属性以及确切更改的内容，因此您可以立即复制粘贴修改。

要记住的一件事是，在运行本地服务器时跟踪更改可能是一个好主意——无需自动删除换行符和空格，因为它们也会显示为更改。 这个问题在 Firefox 中不存在，您还可以在其中找到执行相同操作的“更改”窗格，以及一个友好的按钮“复制所有更改”。

本地覆盖（Chrome、Edge）

您之前可能遇到过这种情况：您只想尝试一些更改，但可能非常害怕在浏览器中意外点击“刷新”以丢失页面上所做的所有更改。 也许您不能真正在本地运行该站点，或者您只是不想运行整个构建以进行一些小的本地修改。 在这种情况下，Chrome 的“本地覆盖”可能是天赐之物。

首先，在您的计算机上创建一个文件夹，用于存储所有本地修改（桌面上的local-overrides似乎是此类任务的合理名称和位置）。 然后前往“Sources”选项卡，并在 DevTools 的左上角选择“Overrides”（它可能隐藏在双 V 形后面）。 现在单击“选择要覆盖的文件夹”并选择您新创建的文件夹——Chrome 将使用该文件夹来存储您的本地修改。 您需要单击“允许”以授予 Chrome 将文件保存到硬盘的权限。

现在，您可以在“Sources”面板中选择任何文件，右键单击代码中的任意位置，然后通过右键单击选择“Save for overrides” 。 这是 Chrome 创建新文件并将文件的所有内容以及您的修改存储到硬盘驱动器的线索。 （您可能需要先单击{}按钮以使代码更具可读性）。 （感谢Trys的提示！ ）

一旦您定义了本地覆盖，Chrome 将拦截网络请求并使用您的代码而不是实际响应。 它还将注意对文件所做的修改并自动将更改注入页面，就像您安装了本地开发并打开了监视模式一样。 在“元素”面板中，任何被本地覆盖覆盖的文件旁边都会有一个紫色的小点。

最好的部分：现在您可以在文本编辑器中打开文件并从那里进行更改，同时看到这些更改也出现在 DevTools 中——如果您需要切换到 DevTools 来添加断点，您可以从 DevTools 中完成，使更改代码，这些更改也将在您的文本编辑器中可见。 几乎是魔法！

Harry Roberts 的专业提示：本地覆盖不允许您保留或跟踪版本或变体，但您可以将查询字符串附加到 URL 并加载同一页面的不同变体。 在编辑 HTML 页面时非常有用。

啊，如果您需要再次禁用本地覆盖，只需在同一窗格中选中“启用本地覆盖” - 否则样式将一遍又一遍地覆盖现有样式，这是您可能不想要的。

远程调试（Chrome、Safari）

如果您需要在手机上调试您的应用程序或页面，您可以使用适用于 iOS 设备的 Devtools 代理在 iOS 上调试 Chrome，也可以使用 DevTools 在 iOS 上使用 Chrome DevTools 调试 Mobile Safari。

要使用 Safari Inspector 调试 Mobile Safari，请在“设置 → Safari → 高级 → Web Inspector”中启用“Web Inspector”，然后使用“Develop”→（您的手机名称）打开调试器。 您应该为您打开 Safari 的 DevTools。

对于 Android 设备，打开 Android 上的开发者选项并选择“启用 USB 调试” 。 在您的开发机器上，您可以通过转到chrome://inspect#devices并选择“远程目标”来发现您的移动设备。 您可以在“开始使用远程调试 Android 设备”中找到大量详细信息和说明。 这也是您可以找到用于 Node.js 调试的专用 DevTools 的地方。

暂停脚本执行（Chrome、Edge、Firefox）

在测试关键 CSS 或调试 JavaScript 时，您可能希望在执行特定脚本或应用特定样式之前保持 DOM 的状态。 这就是 DevTools 中的 DOM 更改断点的用途。

通过右键单击元素名称旁边的三个不祥的点，您可以选择“中断”子树修改（以给定节点为根的 DOM 树中的节点插入和删除）、属性修改（例如，当添加属性或删除，或属性值更改 - 例如使用类）或节点删除。

但是，当您知道需要调查的确切代码区域时，您也可以使用条件代码行断点，但您只想在其他条件为真时暂停。 另外，不要忘记在代码片段中输出值的日志点，而无需一遍又一遍地编写console.log 。

代码片段（Chrome、Edge）

如果您有几个经常用于跟踪可能导致错误行为的代码片段，您可以在“片段”窗格中存储和访问这些片段。 在某种程度上，这些 JavaScript 片段类似于小书签，但与后者不同的是，您可以通过 DevTools 中的专用区域方便地管理它们。

因为它们是脚本，所以我们可以在这些脚本运行时添加断点，或者在“代码片段”中选择部分代码并运行代码的特定部分而不是执行整个代码片段。

“片段”窗格位于“源”中，在“本地覆盖”旁边。 添加片段后，您可以通过右键单击并选择“运行”或使用Cmd/Ctrl + Enter来运行它。 当然，每个片段也可以从命令面板中获得。

一般来说，如果您发现自己一遍又一遍地运行例行任务，您很有可能希望将其放在“代码片段”中并使用脚本自动执行此任务。 DevTools Snippets 包含一些有用的脚本，用于缓存清除、显示标头并将对象保存为控制台中的 .json 文件，但您可以使用它来修改 DOM 或显示任何有用的信息，例如性能标记（这是我们所做的）。 此外，您还可以插入性能诊断 CSS 来指示延迟加载的图像、未调整大小的图像或同步脚本。

运行自定义自动化测试 (Safari)

Safari DevTools 中经常被遗忘的功能之一是定义和运行一系列自动检查的选项。 把它想象成一个定制的测试套件，带有一系列小测试，可以根据开发人员想要运行的审计类型进行完全定义。 默认情况下，测试套件专注于可访问性，但您可以根据需要对其进行调整，例如为了检查 DOM 中是否有任何同步脚本，或者是否所有图像都具有定义的width和height属性，或者即使所有图像都是延迟加载的。 （谢谢，尼基塔！ ）

源地图（Chrome、Edge、Firefox）

在调试生产代码时，能够跟踪您在代码库中使用的特定组件或模块的更改非常方便。 要将缩小的代码映射到源代码，我们可以使用源映射。 如果生成源映射作为构建的一部分，则可以在 DevTools 中调试代码时使用源映射。

在 Chrome 中，您需要在“设置”中启用 JavaScript 和 CSS 的源映射，然后将文件夹添加到“工作区”。 然后，DevTools 会尝试自动推断所有映射并加载源文件以及缩小的源文件。 然后，您可以阅读和调试原始源代码中的已编译代码。 比这更好：您仍然可以遍历断点，所有错误、日志和断点都将映射到实际代码。 要构建您的源映射，Webpack 的 Devtool 可能会有所帮助。

For Firefox, once the source map is generated, a transformed file has to include a comment that points to the source map . Just make sure that your bundler does the job for you. Once it's in place, in the source list pane, the original source (.scss or .ts files) will appear, and you can debug it right there.

Clear Service Worker's Cache And Storage (Chrome, Edge)

When we hit “Hard Refresh” in the browser, the browser will not use anything from the cache when reloading the page. Instead, it will re-fetch all assets from the server, without relying on caching.

If you right-click the “Refresh” button with DevTools open, you'll find another option: “Empty Cache and Hard Reload”. The difference is that if the page prompts any dynamic fetches via JavaScript, they might still use the cache. The latter option clears them, too, while the former doesn't.

Both of these options, however, don't clear cookie or service worker's cache — which you might want to do in some scenarios. Jump to the Command menu ( Cmd + Shift + P ) and type/autocomplete “Clear site data”. When this option is activated, the browser will clean all of the data (as the name assumes), including the service worker's cache as well as the unregistering of the service worker. (Alternatively, you can click “Clear Site Data” in the Application panel.)

And if you want to delete only cache or only cookies quickly, you can right-click on any request in the “Network” panel, and choose “Clean browser cache” from there.

In Firefox, you'll need to head to the “Privacy & Security” panel and find the “Cookies and Site Data” section there.

Filters In The Network Panel (Chrome, Edge, Firefox)

There seems to be not much to explore in the “Network” panel as it basically just shows the list of browser requests (along with server responses) in chronological order. However, there are plenty of obscure little helpers as well.

First of all, with an overview of requests in front of us, we can choose which columns we'd like to see . Right-click on the header of one of the columns and select the ones that you find useful for the task at hand. We always choose the “Priority” column to see in which priorities assets are being requested, and if we need to adjust that order to deliver critical assets faster (based on JavaScript Resource Loading Priorities in Chrome, Edge).

We can also filter requests to find specific ones that might be causing trouble ( thanks for the tip, Harry ). At the top of the “Network” panel you'll find an input field, which accepts not only keywords but also commands for filtering. Here are a few examples of the useful ones:

• is:from-cache shows all resources that were delivered from the cache,
• is:service-worker-initiated , shows only requests prompted by a service worker,
• is:running shows all incomplete or unresponsive requests,
• larger-than:250k shows all resources that are larger than 250 Kb,
• -larger-than:250k shows all resources that aren't larger than 250 Kb (same size and smaller),
• mixed-content: shows all assets that are loaded over HTTP instead of HTTPS,
• -has-response-header:Cache-Control highlights assets that don't have any caching headers,
• Obviously we can also search for bad practices like document.write and @import in HTML and CSS, plus we can use regular expressions as well.

All filters can be combined as well, separated by an empty space. You can check a comprehensive list of all filters as well, or just type - in the filters input and get an autocomplete preview of all features ( huge thanks to Harry for the tip! ).

Check Initiators In The Network Panel (Chrome, Edge)

If you want to quickly check which assets a particular resource has requested, or by which resource an asset was requested, there is a simple way to discover it in DevTools as well. This is especially useful in cases where you might have a couple of third-party scripts that might be calling fourth-party-scripts.

When you are inspecting a request in the “Network” panel, hold Shift while hovering over an element. The pink background color will indicate resources that this element has prompted to download, and the green background color will indicate the initiator that actually prompted the request.

Choose a User Agent (Chrome, Edge, Firefox)

Sometimes you might want to check how the page will render with a different user agent, eg to make sure that a Googlebot gets a properly rendered version of the page. By heading to “Network conditions”, you can define the behavior for caching, network throttling and a user agent.

默认情况下，后者是“自动”的，但有 10 个预定义组，从 GoogleBot Desktop 和 Mobile 到 Android 和 UC Browser。 如果需要，您还可以定义自己的用户代理。 但是，当您从一个选项卡导航到另一个选项卡时，这些设置将不会保留。

在 Firefox 中，您需要前往 Firefox 的about:config页面并定义一个general.useragent.override字符串。

在性能面板（Chrome、Edge）中更改滚动行为

乍一看，Performance 面板的火焰图、一次显示的大量数据以及非常非传统的滚动行为可能会让人望而生畏。 默认情况下，常规垂直滚动相当于放大时间线的选定部分，但我们可以更改它。

在“设置”中，您可以将“Flamechart 鼠标滚轮动作”从“缩放”切换为“滚动”——瞧，您的首选滚动将被保留！ 但是如果你想同时使用缩放和滚动呢？ 关键提示是在滚动时按住“Shift”以切换首选行为。

了解性能面板（Chrome、Edge）

还记得我们在实验设置中提到的“时间线：事件发起者”和“时间线：失效跟踪”吗？ 当您正在寻找导致昂贵操作的原因时，这些实验性功能会在性能面板中派上用场 - 所谓的长任务（需要超过 50 毫秒才能完成的任务）。 然后目标是将长任务分解为较短的任务，通常首先关注最长的长任务是有意义的。

跳转到性能面板并使用Cmd/Ctrl + Shift + E开始分析。 在刷新和收集数据需要一点时间后，那些昂贵的长任务将显示在时间线中，并在右上角以红色矩形突出显示。 它们的长度表明该操作的实际成本。 任务有50 毫秒的友好预算来完成，这就是为什么任务的前 50 毫秒部分显示为纯灰色。 每当您超出该预算时，任务的其余部分就会以红色/灰色条纹突出显示。

火焰图是每个任务所包含内容的可视化。 任务的所有部分都显示在实际任务下，黄色背景代表脚本。 如果您单击每个任务下的“评估脚本” ，您可以拉出底部的“摘要”抽屉，查看哪个脚本导致了成本。 如果您单击标有“重新计算样式”的紫色条，DevTools 将显示究竟是什么触发了样式失效。

可能 DevTools 中最被低估的功能确实是“摘要”抽屉，它还会显示哪些元素受到样式重新计算的影响（因此您可以立即跳转到它们）以及首先启动此任务的原因。

使用图层调试 Janky 动画（Chrome、Edge、Safari）

您只需要几个动画，可能带有一点视差、滑动导航或恶作剧的 z-index 操作，就可以遇到丢帧和 janky 动画。 性能面板 (Chrome) 中的 FPS 仪表会显示您是否流畅地运行帧，但如果不是这样，您可以在“图层”选项卡中探索渲染问题。

通过跟踪哪些元素缺少will-change属性，以及哪些元素使用了不成比例的内存，可以很容易地检测到一些问题。 这就是我们如何发现一个隐藏在屏幕外的大型组件，其相对位置在屏幕外-1000px ，导致几 MB 的内存使用。 此外，在调试画布问题时，请记住 Safari 有一个画布内存使用调试器。

3D 视图 Z-Index 调试器（边缘）

跟踪渲染问题和 z-index 问题的另一个有用工具是 Edge 的 DOM 3D 视图（“设置”→“更多工具”→3D 视图）。 该工具提供了 DOM 和 z-index 层的交互式可视化。 您甚至可以选择使用 DOM 元素的实际背景颜色来查看 DOM，或者只显示堆叠上下文。

查看z-index值如何在页面中分布，以及为什么在触发时叠加层或面板未按预期显示，这确实从未如此简单。

更好的可访问性分析（Chrome、Edge、Firefox）

拥有一个可以提供从标签顺序到 ARIA 属性和屏幕阅读器公告的所有内容的详细信息和指导的一体化可访问性工具不是很好吗？ 为了接近这一点，我们设置了一个专用的可访问性配置文件，其中包含文章开头提到的有用扩展和书签。 但是，DevTools 也提供了一些开箱即用的有用功能。

在 Chrome 和 Edge 中，“可访问性”面板显示可访问性树、使用的 ARIA 属性和计算属性。 使用颜色选择器时，您可以检查并方便地调整颜色以适应 AA/AAA 兼容的对比度（以及通过Shift + 单击色板在 HEX、RGB、HSL 之间切换的能力 -感谢 Ana！ ）。

如前所述，“渲染”面板还允许您模拟视觉缺陷。 Lighthouse 审计还包括一个关于页面可访问性的建议部分。 此外，当您检查元素时，可访问性信息也会出现在概览中。

Firefox 也有高级可访问性工具。 除了可访问性树和对比检查器之外，Firefox DevTools 还突出显示了角色和地标，以及可访问性建议和检查。 例如，您可以检查整个页面上的对比度问题，检查所有链接是否可聚焦并包括焦点样式，并查看文本标签。 另外，您还可以切换标签顺序。

此外，您可以安装以可访问性为重点的扩展，例如 Accessibility Insights、ax 和 a11y.css，以及一些其他可访问性 linter 和色觉模拟器。

值得一提

显然，DevTools 中提供了数百甚至数千个其他有用的功能。 他们中的许多人都很有名，不需要太多介绍，但仍然值得一提。

• CSS Grid / Flexbox 检查器（Firefox、Chrome、Edge）
  如果您有任何与 Grid 和 Flexbox 相关的布局问题，您可能会通过 DevTools 找到问题的原因。 Grid 和 Flexbox 检查器非常有用，因为它们显示了网格覆盖和容器的边界，以及从flex-basis到grid-gap的所有提示。

• 现场表达
  如果您已经习惯在控制台中输入相同的 JavaScript 表达式，您可以考虑使用 Live Expressions 将其自动化。 该功能在 Chrome、Edge 和 Firefox 中可用，允许您键入一次表达式，然后将其固定到控制台顶部，实时表达式的值将自动更新。

• 动画面板
  Firefox 有一个非常方便的面板来跟踪动画问题，包括减慢动画速度和可视化元素如何随时间变化。

• 字体面板
  Firefox 还有一个方便的“字体”面板，对于任何与字体相关的问题都值得探索。 例如，在尝试将备用字体与 Web 字体匹配时，我们经常使用它，因为您可以使用滑块优化印刷属性并查看实际效果。 当悬停在样式中的字体系列上时，它还提供文本预览。

• CSS 概述
  如果您在 Chrome 的实验设置中激活“CSS 概览”，DevTools 将添加一个选项卡，其中包含页面上使用的 CSS 声明的综合报告。 它还将列出所有使用的颜色和字体，以及您可以立即跳转到的媒体查询和未使用的声明。

这是一个包装！

当我们开始准备这个概述时，它应该很短，只包含 DevTools 提供的一些有用的功能。 事实证明，在我们开始写这篇文章之前，有很多我们不知道的功能——我们能够在出色的 Smashing 读者的帮助下偶然发现它们，他们在 Twitter 上贡献了他们的经验。 非常感谢您的善意贡献！

此外，非常感谢所有浏览器中所有DevTools 的所有贡献者——我们为您的努力以及您为改善我们的开发体验而付出的时间和精力鼓掌。 这很重要。

如果我们错过了一些有价值的东西，请在评论中回复。 如果您发现了一些有用的东西，我们希望您能够立即将这些小帮手应用到您的工作流程中，或许还可以将这篇文章的链接发送给一两个朋友——也许他们会觉得它有用。 啊，别忘了：你也可以使用 DevTools 调试 DevTools — 只需连续按两次Cmd/Ctrl + Shift + I。 ;-)

现在，祝大家调试愉快！