此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

亮点

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

新功能

CSS 和 JS 代码覆盖率

使用新的覆盖率标签页查找未使用的 CSS 和 JS 代码。当您加载或运行某个网页时，该标签页会告知您已使用了多少代码与加载了多少代码。您可以只提供所需的代码来缩减网页大小。

“覆盖率”标签页

点击某个网址会在 Sources 面板中显示该文件，以及关于已执行哪些代码行的细分数据。

“Sources”面板中的代码覆盖率细分数据

每一行代码都用不同的颜色标识：

纯绿色表示执行的代码行。
红色常亮表示未执行。
一行既是红色又是绿色的代码（如上方屏幕截图中的第 3 行）表示仅执行了该行中的某些代码。例如，像 var b = (a > 0) ? a : 0 这样的三元表达式同时显示为红色和绿色。

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

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

整页显示的屏幕截图

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

屏蔽请求

想了解网页在特定脚本、样式表或其他资源不可用时的行为吗？右键点击网络面板中的请求，然后选择 Block Request 网址。抽屉式导航栏中会弹出一个新的请求屏蔽标签页，可用于管理被屏蔽的请求。

屏蔽请求网址

跳过 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) 或 Ctrl+O（Windows、Linux）。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。