Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

DevTools 更新点 (Chrome 59)

欢迎来到新一期的 DevTools 更新日志。观看下面的视频或者继续阅读以了解 Chrome 59 中 DevTools 的新功能。

提示:你可以访问 chrome://help 来查看当前使用的 Chrome 版本。

亮点

新功能

CSS 和 JS 代码覆盖率

通过新增的覆盖率面板来发现未使用的 CSS 与 JS 代码。页面或代码加载后,此面板内会告诉你哪些代码未使用,哪些又是使用了的。这样可以精简掉未使用的代码来减小页面的大小。

The Coverage tab
图 1。代码覆盖率面板

要打开此面板:

  1. 呼出命令面板
  2. 输入 Coverage 选择 Show Coverage

完整的页面截图

观看以下视频来了解如何截取页面的完整快照,从顶部一直滚动到页面最底那种截图。

禁用请求

想看看当某些脚本、样式文件缺少或者其他资源加载失败时,网页的样子吗?在网络面板对某条请求右击选择 Block Request URL。一个新的 禁用请求 面板会被呼出,在这里可以管理被禁用的请求。

Block Request URL
图 2。禁用请求

调试 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);
}

P.S. 想提高调试水平吗?看看这些资源:

Workspaces 2.0

平时当作编辑器来用的 Workspaces,或者叫 Persistence 在新版中进行了改进,升级为2.0。

  1. 切换到 Sources 面板。
  2. 点击 Filesystem 标签。
  3. 点击 Add folder to workspace
  4. 选择你代码所在的文件夹。
  5. 点击 Allow 来让 DevTools 获得文件读写权限。

DevTools 自动地将文件系统中的文件映射到网络请求中的文件,无须再一条一条手动地添加映射了。

A network file mapped to the filesystem
图 3(index) 文件的绿点表示他被映射到了文件系统中。

变更点

统一的命令面板

现在打开 命令面板 ,你会发现输入框中自动添加了一个大于号 (>)。这是因为命令面板与通过 Command+O (Mac) 或者 Control+O (Windows, Linux) 呼出的文件打开菜单面板进行了合并。