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

Kayce Basques

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

亮点

新功能

CSS 和 JS 代码覆盖率

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

“覆盖率”标签页

点击某个网址即可在 Sources（来源）面板中查看包含细分数据的文件 所执行代码的具体行。

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

每一行代码都以不同的颜色标示：

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

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

  1. 打开命令菜单。
  2. 开始输入 Coverage，然后选择显示覆盖率。

整页截图

观看下面的视频，了解如何从顶部截屏 一直显示到页面底部

屏蔽请求

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

屏蔽请求网址

单步跳过 async await

到目前为止，尝试逐行调试以下代码段之类的代码是一项令人头疼的工作。您在 test() 中单步调试某一行代码时，会被 setInterval() 代码中断。现在，当您 异步代码（如 test()），DevTools 会从第一行到最后一行执行以下命令： 一致性

  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 开发者工具团队联系

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

开发者工具的新变化

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