JavaScript 开发人员的 15 个 DevTool 秘密

作者：Craig Buckler

Web 开发者花费大量时间使用浏览器 DevTools，但每年都会有数十次更新，很容易忽略一些有用的工具和技术。以下功能主要面向使用 Chrome 浏览器的 JavaScript 程序员，但所有开发者都能从中找到一些有用的功能。

1. 使用隐身模式

隐身或私人模式使用单独的用户配置文件，并且在浏览器重启后不会保留 Cookie、localStorage 或缓存文件等数据。每个会话都以干净状态启动，因此非常适合测试登录系统、首次加载性能和渐进式 Web 应用 (PWA)。虽然存在一些小限制，例如阻止 PWA 安装，但这些限制不太可能在开发过程中造成重大问题。

隐身模式通常可以通过浏览器菜单或右键单击桌面图标来访问。Firefox 还提供了一个多账户容器插件，可用于设置单独的配置文件——如果您想使用不同的账户保持登录状态，这将非常有用。

2. 自动启动 DevTools

要开始开发，通常需要启动浏览器（可能在隐身模式下），打开 DevTools，然后导航到本地 URL。只需在浏览器启动命令中添加选项，即可一键自动完成整个过程。

最好创建一个新的快捷方式或脚本以在开发模式下启动，然后对于 Google Chrome 添加：

• --incognito以隐身模式启动
• --auto-open-devtools-for-tabs启动 DevTools
• 并将测试 URL 放在末尾，例如http://localhost:8000/

因此，在 Windows 设备上，快捷方式可以指向：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --incognito --auto-open-devtools-for-tabs http://localhost:8000

其他有用的 Chrome 开关包括：

• --allow-insecure-localhost忽略本地主机域上的 SSL 错误
• --disable-extentions一开始不要安装可能影响渲染的扩展程序，例如广告拦截器
• --window-size=<width>,<height>设置初始窗口大小
• --window-position=<x>,<y>设置初始窗口位置
• --user-data-dir="<dir>"设置用户配置文件目录。因此，不同的 Chrome 实例可以使用不同的用户配置文件。删除该目录可以清除所有先前的数据。

还有许多其他 Chrome 选项可用。

类似的开关也可以添加到 Firefox 启动快捷方式：

• -private以私人模式启动
• -devtools启动 DevTools
• 并将测试 URL 放在末尾或-url选项之后。

3.使用命令面板

Chrome 的 DevTools 提供了类似编辑器的命令面板。在任何 DevTools 面板中，按下Ctrl| Cmd+ Shift+，P然后按名称搜索选项：

删除>按名称搜索已加载文件的提示。

4. 查找未使用的 JavaScript

Chrome 的“覆盖率”面板可让您快速定位已使用和未使用的 JavaScript（和 CSS）代码。首先，请从DevTools 菜单中的“更多工具”子菜单中打开“覆盖率”。重新加载页面后，面板将以条形图显示未使用代码的百分比：

单击任意 JavaScript 文件，未使用的代码将在行号边缘以红色条突出显示。

如果您正在测试单页应用，您可以浏览并使用功能来更新未使用的代码指示器。但是，请注意，当您重新加载或导航到新页面时，覆盖率信息会被重置。
这是一个很好的工具，可以帮助您了解代码中使用了多少外部依赖项。如果您导入了一个 100kb 的库，但只使用了其中的 1%，那么您在这里也能清楚地看到。

5. 找到改变 DOM 的代码

当事件发生时，确定哪个函数负责更新特定的 HTML DOM 元素可能比较困难。要找到某个进程，请在“元素”面板中右键单击任意 HTML 元素，然后从“中断于”子菜单中选择以下选项之一：

选择：

• 子树修改，用于监视元素或任何子元素何时发生更改
• 属性修改，用于监视元素的属性（例如class）何时发生更改，或者
• 节点移除来监视元素何时从 DOM 中移除。

当发生此类事件时，源面板中会自动激活断点。

Firefox DevTools 在Inspector窗格中提供了相同的功能。此外，Firefox 还会用事件图标指示哪些 DOM 节点已附加处理程序。点击该图标可以查看更多信息、展开处理程序函数或在调试器中打开它：

6. 限制网络速度

使用高端电脑在快速可靠的网络上测试您的网站，可能无法反映实际使用情况。您的用户可能使用的是不稳定的移动网络连接，或者连接到超载的机场 Wi-Fi。

“网络”选项卡提供了一个限制选项，可以人为地降低 HTTP 上传速度、下载速度和延迟（连接或响应的额外延迟）。这有助于识别性能瓶颈的原因：

基于 Chrome 的浏览器允许您添加自己的自定义网络配置文件。

7. 过滤网络请求

DevTools网络面板提供了多个过滤器，包括一个JS按钮，用于仅显示 JavaScript 请求。过滤器搜索框可以在输入部分 URL 时查找请求，但它也接受特殊命令，包括：

• 过滤缓存的请求is:cached
• 过滤不完整的请求is:running
• 通过输入 来识别大型请求larger-than:<S>，其中是以字节 ( )、千字节 ( ) 或兆字节 ( )<S>为单位的大小，或者10000001000k1M
• 通过输入 来识别第三方资源-domain:<yourdomain>。您的域可以使用通配符，例如*。

8. 黑盒脚本和行

有时，无需确切了解 JavaScript 错误发生的方式、时间或位置。尝试调试库（React、Vue.js、jQuery 等）或第三方脚本（分析、社交媒体小部件、聊天机器人等）中的问题通常是徒劳的，因为您无法轻易更改这些问题。

DevTools 允许将脚本放入黑盒中，这样即使你选择单步执行某个函数，它们也不会在调试器中打开。要在 Firefox 中将文件放入黑盒中，请在调试器面板中打开文件，然后点击“忽略源”图标：

在 Chrome DevTools 的“源”面板中，打开一个文件，右键单击代码中的某个位置，然后选择“将脚本添加到忽略列表” 。您还可以通过右键单击数字间距，然后从菜单中选择“从不在此处暂停”来将单个语句添加到黑框中。

或者，单击设置齿轮图标或按F1访问“设置”，然后切换到“忽略列表”选项卡。选中“将内容脚本添加到忽略列表”，并使用正则表达式输入任意数量的文件名模式，例如jquery.*\.js：

9. 使用日志点

console.log()在整个文件中随意插入调试语句很诱人，但日志点提供了一种无需编写任何代码即可获取相同信息的方法。

要添加日志点，请在“源”面板（或Firefox 中的“调试器”面板）中打开脚本，右键单击任意行号，然后选择“添加日志点...”。输入一个表达式（例如，您将在命令中使用的表达式console），例如

"The value of x is", x

每当执行该行代码时，该消息都会显示在 DevTools 控制台中。日志点通常会在页面刷新后保留。

10.使用条件断点

在“源”面板（或Firefox 中的“调试器”面板）中，点击已打开文件的行号即可添加断点。它会在执行过程中暂停脚本的该行，以便您单步执行代码来检查变量、调用堆栈等。

断点并不总是实用，例如，如果在运行 1,000 次的循环的最后一次迭代中发生错误。但是，可以设置条件断点，使其仅在满足特定条件时触发，例如i > 999。要设置条件断点，请右键单击行号，选择“添加条件断点...”，然后输入条件表达式。

11. 停止无限循环

触发无限循环很容易导致浏览器进程不堪重负。尽管我经验丰富，但最近我还是犯了一次这样的错误，因为我不小心反转了JavaScriptfor循环中的表达式，导致它永远无法结束！

要在 Chrome DevTools 中停止无限循环，请打开“源”面板，然后点击调试暂停图标以停止脚本。按住同一图标并选择方形停止图标即可停止脚本处理。

12. 重新运行 Ajax 请求

浏览器 JavaScript Ajax 调用通常使用Fetch或XMLHttpRequest API从远程服务器请求数据。这些数据显示在 DevTools 的“网络”面板中，并可使用XHR按钮进行过滤。

DevTools 会显示大量信息，但有时重新运行 Ajax 调用并在其他工具中分析结果更为实用。右键单击任意请求，然后从“复制”子菜单中选择一个选项：

选项包括复制为 Windows Powershell、cURL 和 JavaScript Fetch 语法的命令（这对于粘贴到项目代码中作为进一步 Ajax 调用的起点很有用）。

12.5. 前端监控

在生产环境中调试 Web 应用程序可能既困难又耗时。不妨尝试使用一款前端监控工具，它将您所需的所有故障排除信息都集中到一个地方。免费试用 Asayer。

Asayer是一款前端监控工具，可以重放用户的所有操作，并展示应用在遇到每个问题时的表现。这就像打开浏览器的开发者工具，同时监控用户的运行情况。

Asayer 可让您重现问题、汇总 JS 错误并监控应用性能。它提供用于捕获Redux、VueX、NgRx 或 MobX存储状态以及检查GraphQL查询的插件。

开始免费监控您的网络应用程序。

13. 启用本地文件覆盖

Chrome 允许任何 HTTP 请求使用设备上的本地文件，而无需通过网络获取。这可以让您：

• 无需构建工具即可在实时网站上编辑脚本或样式
• 开发一个离线网站，通常从第三方或域名请求重要文件
• 暂时替换不必要的脚本，例如分析。

在本地电脑上创建一个用于存储覆盖文件的目录，例如localfiles，然后打开 Chrome 的 DevTools源面板。打开左侧窗格中的“覆盖”选项卡，点击+ 选择覆盖文件夹，然后选择您创建的目录。系统将提示您允许本地保存文件，然后会出现该目录：

现在打开“页面”选项卡并找到任意源文件。有两种方法可以将其添加为本地覆盖：

1. 右键单击该文件并选择“保存以覆盖”，或者
2. 打开文件，进行编辑，然后使用Ctrl| Cmd+保存S。

文件图标显示有紫色覆盖指示器：

它也将出现在“覆盖”选项卡和localfiles目录中。您可以在 Chrome 中或使用任何代码编辑器编辑该文件——每次页面再次加载时都会使用更新后的版本。

14.管理客户端存储

网页可以使用多种技术在客户端存储数据。Chrome DevTools 中的“应用程序”面板（或 Firefox 中的“存储”面板）允许您添加、检查、修改和删除 Cookie、缓存存储、localStorage、sessionStorage、IndexedDB 和 Web SQL（如果支持）中保存的值。

Chrome 中的“存储”选项卡显示本地存储了多少数据，并提供了快速清除站点数据选项。

15. 模拟移动硬件

智能手机和平板电脑通常包含全球定位系统 (GPS)、陀螺仪和加速度计等硬件。台式电脑通常不具备这些硬件，这使得使用地理定位等 API 进行开发更加困难。

Chrome 可以在 DevTools 中模拟设备硬件——从更多工具菜单中选择传感器：

有多种选择：

• 选择一个主要城市或输入自定义经纬度。您还可以将位置设置为不可用，以模拟您的应用程序在 GPS 信号失效时的响应方式。
• 使用预设或自定义指标设置设备方向。您可以点击并拖动智能手机，使其绕x轴或y轴旋转，或者按住不放，使其绕zShift轴旋转。
• 强制触摸，而不是鼠标或其他本机设备事件，并且
• 设置空闲状态来检查您的应用程序如何响应锁定屏幕。

DevTool 奉献

浏览器开发者工具已从基本的 JavaScript 日志记录功能发展成为功能全面的开发和调试环境。它们可能看起来很复杂，但只需稍加尝试，您就能发现一些可以节省数小时编码时间的功能。