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

欢迎阅读 DevTools 版本说明的又一篇。观看以下视频或继续阅读,了解 Chrome 59 中的 Chrome 开发者工具有哪些新变化!

亮点

新功能

CSS 和 JS 代码覆盖率

使用新的覆盖率标签页查找未使用的 CSS 和 JS 代码。当您加载或运行网页时,该标签页会显示所使用的代码量与所加载的代码量。您可以仅提交所需的代码,从而减小网页的大小。

“覆盖率”标签页

点击网址可在来源面板中显示该文件,并详细说明执行了哪些代码行。

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

每行代码都有颜色编码:

  • 常亮绿色表示该代码行已执行。
  • 纯红色表示未执行。
  • 如果某行代码同时显示红色和绿色(例如上方屏幕截图中的第 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)或 Control+O(Windows、Linux)调用的。

下载预览渠道

不妨考虑将 Chrome Canary 版开发者版Beta 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。