此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

亮点

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

新功能

CSS 和 JS 代码覆盖率

使用新的覆盖率标签页查找未使用的 CSS 和 JS 代码。加载或运行某个网页时，该标签页会显示使用的代码量与使用的代码量。您可以通过只提供代码来缩减网页大小所需的资源

“覆盖率”标签页

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

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

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

绿色常亮表示代码行已执行。
红色常亮表示未执行。
一行红色和绿色的代码（如上方屏幕截图中的第 3 行）表示只执行该行上的部分代码。例如，诸如 var b = (a > 0) ? a : 0 之类的表达式同时显示为红色和绿色。

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

打开命令菜单。
开始输入 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) 或 Ctrl+O （Windows、Linux）。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

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