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

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

Chrome 66 中即将推出的开发者工具新功能和重大变更包括：

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

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

网络面板中的启动器列会告知您资源请求的原因。例如，如果 JavaScript 导致系统提取图片，发起者列会显示导致该请求的 JavaScript 代码行。

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

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

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

忽略“requests.js”。

图 1. 忽略 requests.js

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

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

在“预览”和“响应”标签页中进行美观打印

网络面板中的预览标签页现在默认会对检测到已缩减的资源进行美化打印。

“预览”标签页默认会以美观的方式显示 analytics.js 的内容。

图 2. 预览标签页默认以美观的格式显示 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 中推出 Local Overrides 时，开发者工具存在一个限制，即无法跟踪 HTML 中定义的样式的更改。例如，在图 7 中，文档的 head 中有一条样式规则，用于为 h1 元素声明 font-weight: bold。

在 HTML 中定义的样式示例

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

在 Chrome 65 中，如果您通过开发者工具的样式窗格更改了 font-weight 声明，本地替换不会跟踪相应更改。换句话说，在下次重新加载时，样式会恢复为 font-weight: bold。但在 Chrome 66 中，此类更改现在会在网页加载时保留。

奖励提示：忽略框架脚本，让事件监听器断点更有用

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

点击断点会在 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 开发者工具团队联系

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

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。