此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

忽略网络面板中的脚本
在设备模式下自动调整缩放
Preview 和 Response 标签页中整齐打印
在预览标签页中预览 HTML 内容
在 HTML 中使用样式的本地替换

注意：请前往 chrome://version 检查您运行的 Chrome 版本。如果您运行的是较早版本，则这些功能将不存在。如果您运行的是更高版本，这些功能可能已更改。Chrome 大约每 6 周会自动更新到新的主要版本。

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

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

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

以前，如果框架将网络请求封装在封装容器中，则 Initiator 列没有什么帮助。所有网络请求均指向同一行封装容器代码。

在此场景中，您真正想要的是查看导致请求的应用代码。现在，您可以：

将鼠标悬停在发起者列上。导致请求的调用堆栈显示在弹出式窗口中。
右键点击您要在启动器结果中隐藏的调用。
选择将脚本添加到忽略列表。Initiator 列现在会隐藏来自您忽略的脚本的任何调用。

忽略“requests.js”。

图 1. 正在忽略requests.js

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

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

“预览”和“响应”标签页中的整齐打印功能

现在，默认情况下，如果网络面板中的预览标签页检测到这些资源已缩减，则会美观输出这些资源。

默认情况下，“预览”标签会美观输出 analytics.js 的内容。

图 2. 默认情况下，预览标签页会美观输出 analytics.js 的内容

如需查看未缩减的资源版本，请使用响应标签页。您还可以通过新的格式按钮，从响应标签页中手动美观输出资源。

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

图 3. 通过格式按钮手动美观输出 analytics.js 的内容

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

以前，Network 面板中的 Preview 标签页在某些情况下会显示 HTML 资源的代码，而在另一些情况下会呈现 HTML 的预览。现在，预览标签页始终会执行 HTML 的基本渲染。它并非功能完善的浏览器，因此可能无法完全按照您的预期显示 HTML。如果您想要查看 HTML 代码，请点击响应标签页，或右键点击某项资源并选择在“来源”面板中打开。

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

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

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

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

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

当开发者工具在 Chrome 65 中推出 Local Overrides 功能时，有一个限制，即它无法跟踪对 HTML 中定义的样式所做的更改。例如，在图 7 中，文档的 head 中有一条样式规则，用于为 h1 元素声明 font-weight: bold。

在 HTML 中定义的样式示例

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

在 Chrome 65 中，如果您通过开发者工具 Style 窗格更改 font-weight 声明，Local Overrides 将不会跟踪此更改。也就是说，下次重新加载时，样式将还原为 font-weight: bold。但在 Chrome 66 中，此类更改现在会在网页加载过程中保留。

额外提示：忽略框架脚本以使事件监听器断点更有用

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

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

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

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

从“Call Stack”窗格中忽略 Vue.js 脚本。

图 7. 忽略 Call Stack 窗格中的 Vue.js 脚本

当我下次点击该按钮并触发 click 断点时，它会执行 Vue.js 代码而不暂停，然后在应用的监听器中的第一行代码暂停，我真正希望暂停一下。

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

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

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

请通过 crbug.com 提交建议或反馈。
在开发者工具中使用更多选项 > 帮助 > 报告开发者工具问题来报告开发者工具问题。
请发送电子邮件至 @ChromeDevTools。
请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。