开发者工具的新变化 (Chrome 66)

Kayce Basques

Chrome 66 中 DevTools 的新功能和重大变更包括：

请继续阅读，或在下方观看版本说明的视频版本。

在“网络”面板中忽略脚本

网络面板中的 Initiator 列会显示请求资源的原因。例如，如果 JavaScript 导致提取图片，Initiator 列会显示导致请求的 JavaScript 代码行。

以前，如果您的框架将网络请求封装在封装容器中，发起者列就不会那么有用。所有网络请求都指向同一行封装容器代码。

在这种情况下，您真正想要查看的是导致请求的应用代码。现在，您可以：

  1. 将鼠标悬停在发起者列上。导致请求的调用堆栈会显示在弹出式窗口中。
  2. 右键点击您要从发起者结果中隐藏的通话。
  3. 选择向忽略列表添加脚本。发起者列现在会隐藏您忽略的脚本中的所有调用。

忽略了“requests.js”。

图 1. 忽略 requests.js

在设置的忽略列表标签页中管理被忽略的脚本。

如需详细了解如何忽略脚本，请参阅忽略脚本或脚本模式。

在“预览”和“响应”标签页中进行美化输出

现在，当 Network 面板中的 Preview 标签页检测到资源已缩减时，默认会以美化格式输出资源。

默认情况下，预览标签页会以美化格式输出 analytics.js 的内容。

图 2. Preview 标签页默认会以美化格式输出 analytics.js 的内容

如需查看资源的未压缩版本，请使用 Response（响应）标签页。您还可以通过新的格式按钮，在响应标签页中手动美化资源。

通过“格式”按钮手动美化输出 analytics.js 的内容。

图 3. 通过 Format 按钮手动美化输出 analytics.js 的内容

在“预览”标签页中预览 HTML 内容

以前，在某些情况下，网络面板中的预览标签页会显示 HTML 资源的代码，而在其他情况下，则会呈现 HTML 的预览。预览标签页现在始终会对 HTML 进行基本呈现。它不是一个完整的浏览器，因此可能无法完全按照您的预期显示 HTML。如果您想查看 HTML 代码，请点击 Response 标签页，或右键点击相应资源，然后选择 Open in Sources panel。

在“预览”标签页中预览 HTML。

图 4. 在预览标签页中预览 HTML

在设备模式下自动调整缩放

在设备模式下，打开缩放下拉菜单，然后选择自动调整缩放级别，以便在您每次更改设备屏幕方向时自动调整视口大小。

本地替换项现在适用于 HTML 中定义的某些样式

在 Chrome 65 中推出本地替换项时，开发者工具存在一个限制，即无法跟踪 HTML 中定义的样式的更改。例如，在图 7 中，文档的 head 中有一个样式规则，用于为 h1 元素声明 font-weight: bold。

在 HTML 中定义样式的示例

图 5. 在 HTML 中定义样式的示例

在 Chrome 65 中，如果您通过 DevTools 的 Style 窗格更改了 font-weight 声明，Local Overrides 不会跟踪更改。也就是说，在下次重新加载时，样式会恢复为 font-weight: bold。不过，在 Chrome 66 中，此类更改现在会在网页加载期间保留。

额外提示：忽略框架脚本，让事件监听器断点更实用

在制作开始调试 JavaScript 视频时，一些观看者评论说，事件监听器断点对基于框架构建的应用没有用，因为事件监听器通常封装在框架代码中。例如，在图 8 中，我在 DevTools 中设置了一个 click 断点。当我点击演示中的按钮时，DevTools 会自动暂停在监听器代码的第一行。在本例中，它会在 Vue.js 封装容器代码的第 1802 行暂停，这并不太有帮助。

点击断点会在 Vue.js 的封装容器代码中暂停。

图 6. click 断点会在 Vue.js 封装容器代码中暂停

由于 Vue.js 脚本位于单独的文件中，因此我可以从调用堆栈窗格中忽略该脚本，以便使此 click 断点更实用。

忽略调用堆栈窗格中的 Vue.js 脚本。

图 7. 从调用堆栈窗格中忽略 Vue.js 脚本

下次我点击该按钮并触发 click 断点时，它会执行 Vue.js 代码，但不会在其中暂停，然后在应用监听器中的代码第一行暂停，这正是我一直想要暂停的位置。

点击断点现在会在应用的监听器代码中暂停。

图 8. click 断点现在会在应用的监听器代码中暂停

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。