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

Kayce Basques

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

亮点

新功能

CSS 和 JS 代码覆盖率

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

“覆盖率”标签页

点击网址可在来源面板中显示该文件，并详细说明执行了哪些代码行。

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

每行代码都有颜色编码：

  • 常亮绿色表示该代码行已执行。
  • 红色常亮表示未执行。
  • 如果某行代码同时显示红色和绿色（例如上方屏幕截图中的第 3 行），则表示该行代码中只有部分代码已执行。例如，像 var b = (a > 0) ? a : 0 这样的三元表达式，同时采用红色和绿色两种颜色。

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

  1. 打开命令菜单。
  2. 开始输入 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 开发者工具团队联系

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

开发者工具的新变化

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