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

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

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

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

本地替换

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

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

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

工作原理：

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

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

  1. 打开来源面板。

  2. 打开替换标签页。

    “覆盖”标签页

    图 2. 覆盖标签页

  3. 点击 Setup Overrides。

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

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

  6. 进行更改。

限制

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

“更改”标签页

通过新的更改标签页，跟踪您在开发者工具中本地进行的更改。

“更改”标签页

图 3. 更改标签页

新的无障碍工具

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

无障碍功能窗格

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

“无障碍”窗格

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

请观看下方 Rob Dodson 的 A11ycast 视频，了解如何使用标签，并查看无障碍功能窗格的实际应用。

颜色选择器中的对比度

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

提高文字元素的颜色对比度可让所有用户更轻松地使用您的网站。换句话说，如果您的文字是灰色，背景是白色，那么任何人都会难以阅读。

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

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

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

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

展开的“对比度”部分。

图 6. 展开的对比度部分

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

如需了解如何使用审核面板测试无障碍功能，请参阅在 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 在步入线程间传递消息的代码和异步代码时，更新了步入 单步进入 按钮。如果您想要之前的步进行为，可以改用新的步进 步骤 按钮。

步入在线程之间传递消息的代码

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

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

在 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 中步入异步代码

性能面板中的多项记录

借助效果面板，您现在可以临时保存最多 5 个录制内容。当您关闭 DevTools 窗口时，录制内容会被删除。请参阅开始分析运行时性能，以便熟悉性能面板。

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

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

奖励：使用 Puppeteer 1.0 自动执行 DevTools 操作

由 Chrome DevTools 团队维护的浏览器自动化工具 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 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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