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

Kayce Basques
Kayce Basques

Chrome 65 中的 DevTools 将推出以下新功能：

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

本地替换项

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

借助本地替换功能，在网页加载间保持 CSS 更改。

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

工作原理：

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

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

  1. 打开来源面板。

  2. 打开替换值标签页。

    “替换项”标签页

    图 2. 替换项标签页

  3. 点击设置替换项。

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

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

  6. 进行更改。

限制

  • DevTools 不会保存在 Elements 面板的 DOM 树中进行的更改。请在 Sources 面板中修改 HTML。
  • 如果您在样式窗格中修改 CSS，并且该 CSS 的来源是 HTML 文件，则 DevTools 不会保存更改。请改为在 Sources 面板中修改 HTML 文件。
  • 工作区。DevTools 会自动将网络资源映射到本地代码库。每当您在 DevTools 中进行更改时，相应更改也会保存到您的本地代码库中。

“更改”标签页

通过新的更改标签页跟踪您在 DevTools 中本地进行的更改。

“更改”标签

图 3. 更改标签页

新的无障碍工具

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

无障碍窗格

使用元素面板上的无障碍窗格，可调查当前所选元素的无障碍属性。

“无障碍”窗格

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

请观看 Rob Dodson 关于标签的 A11ycast，了解无障碍窗格的运作方式。

颜色选择器中的对比度

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

提高文本元素的颜色对比度有助于所有用户更轻松地使用您的网站。换句话说，如果您的文字是灰色的，而背景是白色的，那么任何人都会很难看清。

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

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

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

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

展开的“对比度”部分。

图 6. 已展开的对比度部分

审核面板提供了自动化无障碍功能审核，以确保网页上的每个文本元素都具有足够的对比度。

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

新审核

Chrome 65 附带全新的 SEO 审核类别，以及许多新的效果审核。

新的 SEO 审核

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

新的 SEO 审核类别。

图 7. 新的SEO 审核类别

新的效果审核

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

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

性能至关重要！Mynet 将网页加载速度提高了 4 倍后，用户在网站上花费的时间增加了 43%，浏览的网页数量增加了 34%，跳出率降低了 24%，每篇文章的网页浏览收入增加了 25%。了解详情。

提示！如果您希望提高网页的加载性能，但不知道从何处入手，请尝试使用 Audits 面板。您只需提供网址，它就会生成详细报告，说明您可以通过哪些不同的方式改进该网页。开始。

其他动态

使用 worker 和异步代码实现可靠的代码步进

Chrome 65 更新了Step Into Step Into 按钮，以便在进入在线程之间传递消息的代码和异步代码时使用。如果您想使用之前的单步操作行��，可以改用新的单步操作 步骤 按钮。

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

当您单步进入在线程之间传递消息的代码时，DevTools 现在会显示每个线程中发生的情况。

例如，图 8 ��的应用会在主线程和工作器线程之间传递消息。在主线程中进入 postMessage() 调用后，DevTools 会在工作器线程中的 onmessage 处理程序中暂停。onmessage 处理程序本身会将消息发回主线程。若要进入该调用，DevTools 会在主线程中暂停。

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

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

在较低版本的 Chrome 中，当您进入这样的代码时，Chrome 只会显示代码的主线程端，如 图 9 所示。

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

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

单步进入异步代码

现在，在进入异步代码时，DevTools 会假定您希望在最终运行的异步代码中暂停。

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

在 Chrome 65 中进入异步代码。

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

当您在 Chrome 63 中进入这样的代码时，DevTools 会在代码按时间顺序运行时暂停，如图 11 所示。

在 Chrome 63 中进入异步代码。

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

“性能”面板中的多条录制内容

现在，您可以在效果面板中暂时保存最多 5 条录音。关闭 DevTools 窗口后，系统会删除这些录制内容。请参阅开始分析运行时性能，熟悉性能面板。

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

图 12. 在效果面板中选择多个录制内容

附录：使用 Puppeteer 1.0 自动执行 DevTools 操作

Puppeteer 1.0 版现已发布，该工具由 Chrome DevTools 团队维护，是一款浏览器自动化工具。您可以使用 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 在浏览时显示 DevTools 功能，而无需明确打开 DevTools。如需查看示例，请参阅在不打开开发者工具的情况下使用开发者工具功能。

下载预览渠道

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

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

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