此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

亮点

CSS 和 JS 代码覆盖率。通过新的“覆盖率”标签页可以查找未使用的 CSS 和 JS
整页屏幕截图。截取整个网页（从视口顶部到底部）的屏幕截图。
屏蔽请求。在“网络”面板中手动停用各个请求。
跳过 async await。以可预测的方式逐步执行异步函数。
统一命令菜单。通过新统一的命令菜单执行命令并打开文件。

新功能

CSS 和 JS 代码覆盖率

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

“覆盖率”标签页

点击某个网址即可在 Sources 面板中查看该文件，其中详细列出了执行了哪些代码行。

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

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

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

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

打开命令菜单。
开始输入 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

请通过 crbug.com 提交建议或反馈。
在开发者工具中使用更多选项 > 帮助 > 报告开发者工具问题来报告开发者工具问题。
请发送电子邮件至 @ChromeDevTools。
请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。