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

Kayce Basques

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

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

本地替换项

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

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

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

工作原理：

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

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

  1. 打开来源面板。

  2. 打开替换值标签页。

    “替换项”标签页

    图 2. 替换项标签页

  3. 点击设置替换项。

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

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

  6. 进行更改。

限制

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

“更改”标签页

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

“更改”标签页

图 3. 更改标签页

新的无障碍工具

使用新的无障碍窗格检查元素的无障碍功能属性，并在颜色选择器中检查文本元素的对比度，以确保弱视或色觉缺陷的用户能够访问这些元素。

无障碍窗格

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

“无障碍”窗格

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

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

颜色选择器中的对比度

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

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

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

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

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

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

展开的“对比度”部分。

图 6. 展开的 Contrast Ratio 部分

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

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

新审核

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

新的 SEO 审核

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

新的 SEO 审核类别。

图 7. 新的 SEO 类别审核

新的效果审核

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

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

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

提示！如果您想提高网页的加载性能，但不知道从何入手，不妨试试审核面板。您只需提供一个网址，它就会提供一份详细的报告，其中会说明用于改进该网页的多种不同方法。开始。

其他动态

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

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

在线程中传递消息的代码中进行单步调试

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

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

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

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

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

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

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

进入异步代码

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

例如，在图 10 中，进入 setTimeout() 后，DevTools 会在后台运行到该点之前的所有代码，然后在传递给 setTimeout() 的函数中暂停。

在 Chrome 65 中进入异步代码。

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

当您在 Chrome 63 中单步进入类似这样的代码时，开发者工具会在按时间顺序运行时暂停代码，如图 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 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。