浏览器DevTools Secrets：启动，网络和性能

过去十年，浏览器开发者工具（DevTools）已从基本的JavaScript控制台发展成为完全集成的开发和调试环境。现在可以修改和检查网络应用程序的任何方面，但很少有人会深入研究其高级功能。本文将探索一系列您可能考虑或尚未考虑的功能。大多数情况下，我们将介绍Chrome的DevTools，但在适用情况下也会展示Firefox的替代方案。

关键要点

• 浏览器开发者工具（DevTools）已发展成为完全集成的开发和调试环境，允许用户修改和检查 Web 应用程序的任何方面。键盘快捷键、停靠选项、设置和自动启动功能可以提高开发人员的效率。
• DevTools 提供了许多有用的 Web 开发功能，包括颜色对比度辅助功能检查、屏幕截图捕获、查找未使用的 CSS 和 JavaScript、禁用网络缓存、限制网络速度、过滤网络响应、阻止网络请求、重新创建 Ajax 请求、启用离线文件覆盖、检查存储等等。
• Chrome 的 DevTools 提供了性能监视器和审核面板，用于实时分析 CPU 使用率、JavaScript 堆大小、DOM 节点、事件侦听器、样式重新计算等等。审核面板还会分析移动和桌面视图中的性能、辅助功能、最佳实践和 SEO。

键盘快捷键

使用菜单启动 DevTools 会浪费宝贵的时间！请尝试以下选项之一：

• F12
• ctrl shift i
• cmd option j
• 或右键单击页面上的任何元素，然后选择“检查”或“检查元素”。

Chrome 提供了有用的键盘快捷键帮助。在 DevTools 中，按 F1 或从右上角的三个点菜单中选择“设置”。然后从菜单中选择“快捷键”：

停靠

DevTools 面板可以停靠在浏览器窗口的左侧、右侧或底部。如果您需要更多空间，可以将其取消停靠到单独的窗口。Chrome 中的主要三个点菜单中提供了停靠选项：

Firefox 中的停靠选项：

设置

可以通过相同的菜单或按 F1 访问 DevTool 设置。这允许您设置显示的工具、主题、制表符大小、颜色单位等选项。

自动启动 DevTools

在处理 Web 应用程序时，创建一个专用的桌面快捷方式来启动浏览器、打开 URL 并一步启动 DevTools 可能比较实用。对于 Chrome，请使用以下 Chrome 命令行选项创建一个桌面图标：

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

其中 https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5 是您的开发 URL。Firefox 的类似操作：

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

（可执行文件名可能因系统而异。）

开发期间使用隐身模式

隐身/私密模式在关闭浏览器后不会保留 cookie 和 localStorage 等数据。此模式非常适合测试渐进式 Web 应用 (PWA) 和登录系统。您可以手动启动浏览器进入隐身模式，也可以通过向 Chrome 的命令行添加 --incognito 或向 Firefox 的命令行添加 -private 来实现。

命令面板

Chrome DevTools 提供了一个类似编辑器的命令面板。按 ctrl shift p：

它提供了对大多数功能和源文件的快速访问（按退格键删除 >）。

转到控制台

无论您使用哪个 DevTool 面板，控制台都非常有用。按 Esc 可显示和隐藏底部面板中的控制台窗口。

查找页面颜色

当您单击任何 CSS 颜色属性时，大多数浏览器都会显示一个颜色选择器。Chrome 还显示面板底部页面中使用的颜色：

可以单击该面板以显示更多颜色。

颜色对比度辅助功能

颜色选择器还会显示对比度比率，该比率指示前景文本和背景颜色之间的视觉差异。单击比率以查看其与 AA 和 AAA 辅助功能标准的评级情况，这些标准可确保大多数人都能阅读文本：

颜色条上低于该线的任何颜色都将通过 AA 对比度建议。

捕获屏幕截图

从 Chrome 的命令面板 (ctrl shift p) 中，键入“screenshot”，然后选择一个选项来捕获当前视口、整个页面或当前活动的元素。该文件将保存到下载文件夹。（Chrome 74 还允许区域捕获。）Firefox 提供了“截取屏幕截图”系统，该系统可从大多数菜单中访问。此外，您还可以右键单击 DOM 视图中的任何元素，然后选择“屏幕截图节点”。

查找未使用的 CSS 和 JavaScript

Chrome 的新覆盖率面板允许您快速找到未使用的代码。从 DevTools“更多工具”子菜单中选择“覆盖率”，然后单击录制按钮并在应用程序中浏览。然后单击任何文件以打开其源代码：

未使用的代码在行号槽中以红色突出显示。请注意，Chrome 似乎在您导航到新页面时不会记住已使用/未使用的代码，但我预计这将在未来的版本中提供。

禁用网络缓存

在“网络”面板中选中“禁用缓存”以从网络加载所有文件。这提供了对首次页面加载的更好评估。

限制网络速度

同样，当大多数用户通过 3G 访问时，测试 1gbps 连接的系统几乎没有意义。“网络”面板在 Chrome 中提供了“在线”下拉菜单，在 Firefox 中提供了“限制”下拉菜单，允许您模拟特定的网络速度。

Chrome 还提供了一个添加您自己的限制配置文件的功能。

重新排序网络响应

默认情况下，“网络”面板按下载顺序显示请求和响应的表格。但是，可以单击任何表标题以按名称、状态、类型、大小、响应时间等重新排序。

过滤不完整的请求

要发现任何不完整或无响应的 HTTP 请求，请访问“网络”面板并在“过滤器”框中输入 is:running。

按响应大小过滤

在“网络”面板中，在“过滤器”框中输入 larger-than:S，其中 S 是以字节 (1000000)、千字节 (1000k) 或兆字节 (1M) 为单位的大小。大于所选大小的响应将显示。要查找较小的响应，请使用 -larger-than:S。

过滤第三方内容

在“网络”面板中，在“过滤器”框中输入 -domain:*.yourdomain，其中 yourdomain 是您的主要 URL，例如 sitepoint.com。其余响应显示对 CDN、跟踪器、社交媒体按钮等的第三方请求。请求数量和有效负载大小显示在表格下方的状态栏中。

阻止网络请求

在测试期间，可以阻止跟踪器、分析、社交媒体窗口小部件或任何其他请求。右键单击 Chrome 的“网络”面板中的任何 HTTP 请求，然后选择“阻止请求 URL”以阻止该 URL，或选择“阻止请求域”以阻止对该域的任何请求。“请求阻止”面板将打开，您可以在其中添加或删除其他 URL 或域：

重新创建 Ajax 请求

可以通过右键单击“网络”表上的条目，然后选择一个复制选项（例如 cURL、fetch 或 PowerShell）来检查 Ajax XMLHttpRequest 操作。这将创建一个具有相同标头、用户代理、cookie 和引荐来源的命令，可以将其粘贴到编辑器或终端中。

启用离线文件覆盖

Chrome 允许将任何文件保存到您的系统，以便浏览器从设备而不是网络获取该文件。例如，如果您想加载或编辑通常从 CDN 访问的资产，这可以允许离线开发。在“源”中打开“覆盖”面板，单击“ 选择覆盖文件夹”，然后选择一个合适的文件夹。

现在，右键单击“网络”面板中的任何资源，然后选择“保存以进行覆盖”。任何后续的页面重新加载都将从本地系统而不是 Web 访问该文件。保存的文件也可以修改。

检查存储

Chrome 中的“应用程序”面板和 Firefox 中的“存储”面板允许您检查、修改和删除 cookie、缓存存储、localStorage、sessionStorage、IndexedDB 和 Web SQL（如果受支持）中保存的值。Chrome 的“清除存储”面板还可以清除域的所有值，这在开发渐进式 Web 应用时非常有用。

性能监视器

Chrome 的新性能监视器可以从 DevTools“更多工具”菜单中访问，并提供对 CPU 使用率、JavaScript 堆大小、DOM 节点、事件侦听器、样式重新计算等的分析。与主性能面板不同，图表会实时更新 - 无需首先录制配置文件。

审核

Chrome 的审核面板最初旨在评估渐进式 Web 应用的功能，但该工具已发展成为一个通用工具，用于分析移动和桌面视图中的性能、辅助功能、最佳实践和 SEO。

它不会发现所有问题，您可能不同意某些观点，但它是快速评估潜在问题的有用方法。希望您发现了一些新东西。更多 DevTool 秘诀即将推出……

(此处应包含原文中的FAQ部分，由于篇幅过长，此处省略。FAQ部分内容可根据需要重新生成)

以上是浏览器DevTools Secrets：启动，网络和性能的详细内容。更多信息请关注PHP中文网其他相关文章！