开发者工具的新变化 (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

欢迎阅读新一期 DevTools 版本说明。观看下方视频或继续阅读，了解 Chrome 59 中 Chrome 开发者工具的新变化！

亮点

新功能

CSS 和 JS 代码覆盖率

使用新的覆盖率标签页查找未使用的 CSS 和 JS 代码。当您加载或运行网页时，该标签页会显示已使用的代码量与已加载的代码量。您可以通过仅传送所需的代码来减小网页的大小。

“覆盖率”标签页

点击某个网址后，系统会在来源面板中显示相应文件，并细分已执行的代码行。

“来源”面板中的代码覆盖率细分

每行代码都带有颜色编码：

  • 实心绿色表示相应代码行已执行。
  • 纯红色表示未执行。
  • 如果某行代码同时显示为红色和绿色（例如，上方屏幕截图中的第 3 行），则表示该行上只有部分代码已执行。例如，三元表达式（如 var b = (a > 0) ? a : 0）会同时显示为红色和绿色。

如需打开覆盖率标签页，请执行以下操作：

  1. 打开命令菜单。
  2. 开始输入 Coverage，然后选择 Show Coverage。

整页屏幕截图

请观看下面的视频，了解如何从页面顶部一直截取到页面底部的屏幕截图。

屏蔽请求

想了解当特定脚本、样式表或其他资源不可用时，网页的行为会如何变化？在网络面板中右键点击相应请求，然后选择屏蔽请求网址。抽屉中会弹出新的请求屏蔽标签页，您可以在其中管理被屏蔽的请求。

屏蔽请求网址

单步跳过 async await

在此之前，尝试逐步执行如下代码段中的代码是一件令人头疼的事情。您可能正在调试 test()，跳过一行，然后被 setInterval() 代码中断。现在，当您逐步执行 test() 等异步代码时，开发者工具会从第一行到最后一行以一致的方式逐步执行。

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

附言：想提升调试技能？请查看以下新近更新的文档：

变更

统一命令菜单

现在，当您打开命令菜单时，会发现您的命令前面添加了大于号 (>)。这是因为命令菜单已与打开文件菜单统一，后者对应的快捷键为 Command+O (Mac) 或 Control+O（Windows、Linux）。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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