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

Chrome 66 中开发者工具即将引入的新功能和重大变更包括:

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

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

您可以通过网络面板中的发起方列了解请求资源的原因。例如,如果 JavaScript 导致系统提取图片,则 Initiator 列会显示导致请求的 JavaScript 代码行。

以前,如果您的框架将网络请求封装在封装容器中,则 Initiator 列将不再有用。所有网络请求均指向同一行封装容器代码。

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

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

将忽略“requests.js”。

图 1. 正在忽略“requests.js

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

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

“预览”和“回复”标签中的美观打印选项

现在,如果检测到资源已缩减,Network 面板中的 Preview 标签页现在会默认美观输出这些资源。

默认情况下,“Preview”标签页会美观输出 analytics.js 的内容。

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

如需查看资源的未精简版,请使用响应标签页。您还可以通过新的 Format 按钮,从 Response 标签页中手动美观输出资源。

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

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

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

以前,Network 面板中的 Preview 标签页会在特定情况下显示 HTML 资源的代码,同时在其他情况下呈现 HTML 的预览。现在,Preview 标签页始终会对 HTML 进行基本渲染。它并不是一个功能齐全的浏览器,因此可能无法完全按照您的预期显示 HTML。如果您想查看 HTML 代码,请点击响应标签页,或右键点击某个资源,然后选择在“来源”面板中打开

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

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

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

Device Mode 下,打开缩放下拉菜单,然后选择自动调整缩放,以便在您更改设备屏幕方向时自动调整视口大小。

本地替换值现在可以与 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. 在调用堆栈窗格中忽略 Vue.js 脚本

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

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

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

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59