The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

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) 呼出的文件打开菜单面板进行了合并。