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

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

请阅读下文,或观看视频版这些版本说明。

本地替换

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

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

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

运作方式:

  • 您指定开发者工具应将更改保存到的目录。
  • 当您在开发者工具中进行更改时,开发者工具会将修改后的文件的副本保存到您的目录中。
  • 当您重新加载页面时,开发者工具将传送经过修改的本地文件,而非网络资源。

如需设置本地替换,请执行以下操作:

  1. 打开来源面板。
  2. 打开替换值标签页。

    “替换”标签页

    图 2. 替换标签页

  3. 点击设置覆盖

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

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

  6. 进行更改。

限制

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

“更改”标签

通过新的“更改”标签页,跟踪您在开发者工具本地所做的更改。

“更改”标签

图 3. 更改标签页

新的无障碍工具

您可以使用新的 Accessibility 窗格检查某个元素的无障碍功能属性,并在 Color Picker 中检查文本元素的对比度,确保有低视力障碍或色觉缺陷的用户能够轻松访问这些元素。

无障碍窗格

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

“Accessibility”窗格

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

在下方查看 Rob Dodson 关于加标签的 A11ycast 视频,了解 Accessibility 窗格的实际应用。

颜色选择器中的对比度

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

通过提高文本元素的色彩对比度,您的网站对所有用户来说都更便于使用。换句话说,如果您的文本在白色背景下是灰色的,那么任何人都很难阅读它。

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

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

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

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

展开的“对比度”部分。

图 6. 展开的对比度部分

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

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

新审核

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

新的搜索引擎优化 (SEO) 审计

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

新增的“搜索引擎优化”类别的审核。

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

新的性能审核

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

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

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

提示!如果您想提高页面的加载性能,但不知道从何处着手,请尝试使用审核面板。您只需提供一个网址,然后系统便会为您提供一份详细报告,让您了解可通过多种不同方式改进该网页。开始

其他动态

使用 worker 和异步代码实现可靠的代码单步执行

Chrome 65 在单步进入在线程和异步代码之间传递消息的代码时,对 Step Into 单步进入 按钮进行了更新。如果您希望获得之前的单步行为,可以改用新的步骤 步骤 按钮。

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

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

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

Chrome 65 中的单步调试代码。

图 8. Chrome 65 中的消息传递代码

当您在 Chrome 的早期版本中执行此类代码时,Chrome 仅向您显示代码的主线程端,如图 9 所示。

Chrome 63 中的单步调试代码。

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

单步调试异步代码

当单步调试代码时,开发者工具现在会假设您想要暂停最终运行的异步代码。

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

Chrome 65 中的单步调试异步代码。

图 10. 在 Chrome 65 中逐步介绍异步代码

当您在 Chrome 63 中单步调试此类代码时,开发者工具会按时间顺序在运行时暂停在代码中,如图 11 所示。

在 Chrome 63 中逐步介绍异步代码。

图 11. 在 Chrome 63 中逐步介绍异步代码

“Performance”面板中的多个录制内容

现在,您可以通过 Performance 面板暂时保存最多 5 个录制内容。当您关闭开发者工具窗口时,系统会删除这些记录。请参阅开始分析运行时性能以熟悉性能面板。

在“Performance”面板中在多个录制内容之间进行选择。

图 12. 在 Performance 面板中在多个录制内容之间进行选择

额外好处:使用 Puppeteer 1.0 自动执行开发者工具操作

Puppeteer 1.0 版(由 Chrome 开发者工具团队维护的一种浏览器自动化工具)现已发布。您可以使用 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();
})();

它还具有用于执行许多一般有用的自动化任务(例如生成 PDF)的 API:

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 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化,或讨论与开发者工具有关的任何其他内容。

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

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 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

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