What's new in DevTools (chrome 59)

发表于 更新于 阅读次数： Disqus：

近期Chrome发布了59版本，那么与开发者最贴近的开发者工具中带来了什么新功能呢？

  • CSS&JS代码使用率检测
    • 这个功能可以在Coverage Tab中展示使用到与未使用到的代码占比
    • 全页面截图，传说中的超长截图。入口需要把模式切换成移动设备模式，更多 - Capture full size screenshot
    • 阻止网络请求。 手动的方式在网络面板阻止单个网络请求，方便进行页面的调试
    • 单步调试async/await
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      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调起

这些新增特性使用起来非常酷，可以在实际工作中使用起来。
详细请点击这里

以上