开发者工具中的新功能 (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 视频发表评论。

开发者工具的新变化

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