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

Kayce Basques

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

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

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

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

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

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

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

忽略“requests.js”。

图 1. 正在忽略requests.js

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

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

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

现在，默认情况下，网络面板中的预览标签会在检测到资源时美观输出资源 资源的大小。

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

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

如需查看未缩减的资源版本，请使用响应标签页。您也可以手动 通过新的格式按钮从响应标签页中获取整齐打印资源。

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

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

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

以前，Network 面板中的 Preview 标签页在 同时在其他情况下呈现 HTML 的预览。现在，预览标签页始终 对 HTML 进行基本渲染。它并非功能完善的浏览器，因此可能无法显示 完全符合您的要求的 HTML。如果您想查看 HTML 代码，请点击响应标签，或者 右键点击相应资源，然后选择 Open in Sources Panel。

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

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

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

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

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

当开发者工具在 Chrome 65 中推出本地替换功能时，有一个限制，那就是 无法跟踪对 HTML 中定义的样式所做的更改。例如，图 7 中有一个样式 规则的 head 中，为 h1 元素声明 font-weight: bold。

在 HTML 中定义的样式示例

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

在 Chrome 65 中，如果您通过开发者工具 Style 窗格更改 font-weight 声明，请Local 替换值不会跟踪更改。也就是说，下次重新加载时，样式将还原 返回 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 视频发表评论。

开发者工具的新变化

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