开发者工具中的新功能 (Chrome 65)

Kayce Basques

Chrome 65 中面向开发者工具推出的新功能包括：

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

本地替换

通过本地替换，您可以在开发者工具中进行更改，并在网页加载过程中保留这些更改。 以前，重新加载页面后，您在开发者工具中所做的任何更改都将丢失。本地 替换值适用于大多数文件类型，但也有一些例外情况。请参阅限制。

借助本地替换功能，在网页加载过程中保留 CSS 更改。

图 1. 使用本地替换在网页加载后保留 CSS 更改

运作方式：

  • 您可以指定 DevTools 应将更改保存到的目录。
  • 当您在开发者工具中进行更改时，DevTools 会将修改后的文件副本保存到您的目录中。
  • 当您重新加载页面时，DevTools 会提供修改后的本地文件，而不是网络 资源。

如需设置本地替换，请执行以下操作：

  1. 打开来源面板。

  2. 打开替换值标签页。

    “替换”标签页

    图 2. 替换值标签页

  3. 点击 Setup Overrides。

  4. 选择要将更改保存到哪个目录。

  5. 在视口顶部，点击允许以授予开发者工具对 目录。

  6. 进行更改。

限制

  • 开发者工具不会保存您在 Elements 面板的 DOM 树中所做的更改。在 来源面板。
  • 如果您在 Styles 窗格中修改 CSS，并且该 CSS 的来源是 HTML 文件，则开发者工具不会 保存更改。请在 Sources 面板中修改 HTML 文件。
  • 工作区。开发者工具会自动将网络资源映射到本地代码库。无论您何时 在开发者工具中进行更改后，更改也会保存到您的本地仓库中。

“更改”标签

通过新的 Changes 标签页跟踪您在开发者工具中本地做出的更改。

“更改”标签

图 3. 更改标签页

新的无障碍工具

使用新的 Accessibility 窗格可以检查元素的无障碍属性；并且 在颜色选择器中检查文本元素的对比度，确保 。

无障碍窗格

使用元素面板上的无障碍窗格研究无障碍属性 属性

“无障碍”窗格

图 4. 无障碍功能窗格显示了 元素面板上的 DOM 树中当前选中的元素，及其 在无障碍功能树中的位置

请在下方查看 Rob Dodson 有关标签功能的 A11ycast，了解无障碍窗格的实际运作情况。

颜色选择器中的对比度

Color Picker 现在会显示文本元素的对比度。提高对比度 比例的文字元素，让有视力障碍的用户或 包括色觉缺陷请参阅颜色和对比度，详细了解对比度 会影响可访问性。

提高文本元素的色彩对比度可让您的网站更方便所有用户访问。在 换句话说，如果文字为灰色配白色背景，则任何人都会难以阅读。

检查突出显示的 H1 元素的对比度。

图 5. 检查突出显示的 h1 元素的对比度

在图 5 中，4.61 旁边的两个复选标记表示此元素满足增强型 建议对比度 (AAA)。如果只有一个对勾，则表示它满足 建议的最低对比度 (AA)。

点击 Show More（展开）图标 展开，以展开 Contrast（对比度） Ratio 部分。色谱框中的白线表示颜色之间的边界 以及不符合建议对比度的素材资源例如，由于 图 6 符合建议值，即白线以下的所有颜色也符合建议值 建议。

已展开的“对比度”部分。

图 6. 展开的 Contrast Ratio 部分

Audits 面板具有自动无障碍功能审核功能，用于确保 确保网页的对比度足够高。

请参阅在 Chrome 开发者工具中运行 Lighthouse 或观看下面的 A11ycast，了解如何使用 Audits 面板，用于测试无障碍功能。

新审核

Chrome 65 推出了全新类别的 SEO 审核，以及许多新的性能审核。

新的 SEO 审核

确保您的网页通过新的SEO 类别中的每项审核可能有助于改善 搜索引擎排名。

新的 SEO 审核类别。

图 7. 新的SEO 审核类别

新的性能审核

Chrome 65 还附带了许多新的性能审核功能：

  • JavaScript 启动时间过长
  • 对静态资源使用低效的缓存策略
  • 避免网页重定向
  • 文档使用了插件
  • 缩减 CSS
  • 缩减 JavaScript

性能至关重要！在 Mynet 将网页加载速度提升到原来的 4 倍后，用户在网站上停留的时间增加了 43%。 网页浏览量增加了 34%，跳出率降低了 24%，每篇报道带来的收入增加了 25% 网页浏览量。了解详情。

提示！如果您想提高网页的加载性能，但不知道从何处入手， 不妨试试 Audits 面板。您只需提供一个网址，它就会提供关于许多不同类型 改进该网页的方法。开始。

其他动态

利用工作器和异步代码实现可靠的代码单步调试

Chrome 65 更新了 Step Into 进入单步跳入 在线程之间传递消息的代码以及异步代码。如果您想执行上一步的操作 行为，您可以使用新的步骤 步骤 按钮。

深入了解在线程之间传递消息的代码

现在，当您进入在线程之间传递消息的代码时，开发者工具会向您显示 每个线程。

例如，图 8 中的应用会在主线程和工作线程之间传递消息。 进入主线程上的 postMessage() 调用后，开发者工具会在 onmessage 中暂停 处理程序。onmessage 处理程序本身将消息发布回主页面 线程。进入该调用会使开发者工具返回到主线程中。

进入 Chrome 65 中的消息传递代码。

图 8. 在 Chrome 65 中进入消息传递代码

当您在早期版本的 Chrome 中进入此类代码时，Chrome 只会向您显示 主线程上，如图 9 所示。

进入 Chrome 63 中的消息传递代码。

图 9. 进入 Chrome 63 中的消息传递代码

单步进入异步代码

在单步执行异步代码时，开发者工具现在会假设您要在 最终运行的异步代码。

例如，在图 10 中，进入 setTimeout() 后，开发者工具会运行所有代码 然后在后台传递到这个时间点的函数，然后在传递给 setTimeout()。

在 Chrome 65 中单步进入异步代码。

图 10. 在 Chrome 65 中单步进入异步代码

当您在 Chrome 63 中单步进入类似这样的代码时，开发者工具会按时间顺序暂停代码 如图 11 所示。

在 Chrome 63 中单步进入异步代码。

图 11. 在 Chrome 63 中单步进入异步代码

“Performance”面板中的多个记录

性能面板现在可让您临时保存多达 5 个录制内容。录音为 。请参阅分析运行时入门 性能，以便熟悉性能面板。

在“Performance”面板中选择多个记录。

图 12. 在 Performance 面板中选择多个记录

额外知识：使用 Puppeteer 1.0 自动执行开发者工具操作

由 Chrome 开发者工具团队维护的浏览器自动化工具 Puppeteer 的 1.0 版现已改为 。您可以使用 Puppeteer 自动执行许多以前只能通过开发者工具完成的任务， 例如截取屏幕截图：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

它还提供用于许多通常有用的自动化任务的 API，例如生成 PDF：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

如需了解详情，请参阅快速入门。

您还可以在浏览时使用 Puppeteer 公开开发者工具功能，而无需明确显示 打开开发者工具。有关示例，请参阅在不打开开发者工具的情况下使用开发者工具功能。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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