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

欢迎阅读开发者工具版本说明的另一期内容。观看视频 或继续阅读,了解 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 视频发表评论。

开发者工具的新变化

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