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

Kayce Basques

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

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

本地替换

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

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

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

运作方式：

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

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

  1. 打开来源面板。

  2. 打开替换值标签页。

    “替换”标签页

    图 2. 替换值标签页

  3. 点击 Setup Overrides。

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

  5. 在视口顶部，点击 Allow 以授予开发者工具对该目录的读写权限。

  6. 进行更改。

限制

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

“更改”标签

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

“更改”标签

图 3. 更改标签页

新的无障碍工具

您可以使用新的无障碍窗格检查元素的无障碍属性，并在颜色选择器中检查文本元素的对比度，以确保弱视或有色觉缺陷的用户也可以无障碍地查看这些元素。

无障碍窗格

您可以使用 Elements 面板上的无障碍窗格研究当前所选元素的无障碍属性。

“无障碍”窗格

图 4. 无障碍窗格会显示 Elements 面板的 DOM 树中当前所选元素的 ARIA 属性和计算属性，以及该元素在无障碍树中的位置

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

颜色选择器中的对比度

Color Picker 现在会显示文本元素的对比度。提高文本元素的对比度可让有视力障碍或有色觉障碍的用户更轻松地访问您的网站。如需详细了解对比度对无障碍功能的影响，请参阅颜色和对比度。

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

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

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

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

点击 Show More 图标 展开 以展开 Contrast Ratio 部分。色谱框中的白线表示符合建议对比度的颜色与不符合建议对比度的颜色之间的边界。例如，由于图 6 中的灰色符合建议，这意味着白线以下的所有颜色也符合建议。

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

图 6. 展开的 Contrast Ratio 部分

Audits 面板具有自动无障碍功能审核功能，用于确保页面上的每个文本元素都具有足够的对比度。

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

新审核

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

新的 SEO 审核

确保您的网页通过新的搜索引擎优化 (SEO) 类别的各项各项审核可能有助于提高您的搜索引擎排名。

新的 SEO 审核类别。

图 7. 新的搜索引擎优化 (SEO) 审核类别

新的性能审核

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

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

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

提示！如果您希望提高网页的加载性能，但不知道从何处入手，请尝试使用 Audits 面板。您只需提供一个网址，它就会提供一份详细的报告，其中介绍了用于改进该网页的多种不同方法。开始。

其他动态

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

在单步执行在线程之间传递消息的代码以及异步代码时，Chrome 65 更新了 Step Into 单步跳入 按钮。如果您需要以前的步进行为，可以改用新的 Step Step 按钮。

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

当您逐步执行在线程之间传递消息的代码时，开发者工具会向您显示每个线程中发生的情况。

例如，图 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 面板，请参阅开始分析运行时性能。

在“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 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