欢迎来到新一期的 DevTools 更新日志。观看下面的视频或者继续阅读以了解 Chrome 59 中 DevTools 的新功能。
提示: 你可以访问 chrome://help 来查看当前使用的 Chrome 版本。
亮点
- CSS 和 JS 代码覆盖率。通过新增的覆盖率面板来发现未使用的 CSS 与 JS。
- 完整的页面截图。截取一张从视图最顶端到最底端的页面快照。
- 禁用请求。在网络面板中可以手动禁用某条请求。
- 调试 async await。连贯地调试 async await。
- 统一的命令面板。将命令执行与文件打开的菜单面板进行了整合。
- Workspaces 2.0。全新的 Workspace 2.0 让写码更愉快。
新功能
CSS 和 JS 代码覆盖率
通过新增的覆盖率面板来发现未使用的 CSS 与 JS 代码。页面或代码加载后，此面板内会告诉你哪些代码未使用，哪些又是使用了的。这样可以精简掉未使用的代码来减小页面的大小。
要打开此面板:
- 呼出命令面板。
- 输入
Coverage选择 Show Coverage。
完整的页面截图
观看以下视频来了解如何截取页面的完整快照，从顶部一直滚动到页面最底那种截图。
禁用请求
想看看当某些脚本、样式文件缺少或者其他资源加载失败时，网页的样子吗？在网络面板对某条请求右击选择 Block Request URL。一个新的 禁用请求 面板会被呼出，在这里可以管理被禁用的请求。
调试 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。
- 切换到 Sources 面板。
- 点击 Filesystem 标签。
- 点击 Add folder to workspace。
- 选择你代码所在的文件夹。
- 点击 Allow 来让 DevTools 获得文件读写权限。
DevTools 自动地将文件系统中的文件映射到网络请求中的文件，无须再一条一条手动地添加映射了。
(index) 文件的绿点表示他被映射到了文件系统中。
变更点
统一的命令面板
现在打开 命令面板 ，你会发现输入框中自动添加了一个大于号 (>)。这是因为命令面板与通过 Command+O (Mac) 或者 Control+O
(Windows, Linux) 呼出的文件打开菜单面板进行了合并。