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

Kayce Basques

欢迎阅读开发者工具版本说明的另一期内容。观看视频 或继续阅读，了解 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) 或 Ctrl+O （Windows、Linux）。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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