20个Chrome DevTools调试技巧

译者按： Chrome DevTools很强大，甚至可以替代IDE了！

• 原文: Art of debugging with Chrome DevTools
• 译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。

谷歌开发者工具提供了一系列的功能来帮助开发者高效Debug网页应用，让他们可以更快地查找和修复bug。在谷歌的开发者工具中，有非常多有用的小工具，但是很多开发者并不知道。通过这篇文章，我把我常用的那些高效Debug的Chrome开发者工具的功能分享给大家。

简洁起见，接下来我会使用开发者工具来指代谷歌开发者工具。

在我们开始之前，你需要做一些准备工作。

使用金丝雀版

如果你想使用谷歌最新的版本和开发者工具，你可以下载金丝雀版本，甚至把它设置为开发默认打开的浏览器。金丝雀版本旨在为早期接受者提供最新的更新。它可能不稳定，但是大多数时候是没问题的。你要习惯去使用最新最强的谷歌浏览器。

1. 开启开发者工具的实验性功能

你可以到chrome://flags页面，然后开启Developer Tools experiments选项。

当开启后，在开发者工具的设置页面，可以发现多了一个Experiments选项。如果我使用的一些功能你没有看到，那么请到Experiments窗口打开。

2.超级实验性功能

如果我使用到的功能在Experiments列表没有，那么它可能是一个WIP功能(WIP指working in progress)。你可以这样开启：页面处在Experiments界面，连续敲击shift键6次来开启WIP功能。

Console

当Debug的时候，我们绝大部分时间是在和Console打交道。我们往往在代码中插入很多Console logs，通过打印变量值来debug。鉴于Console对于我们这么重要，很有必要了解所有开发者工具提供的相关的APIs和快捷键。

3. 总是打印对象

我的第一个建议其实和开发者工具没有关系，而是我一直使用的一个技巧。在使用console.log();的时候，不仅仅打印变量，而是要打印对象，用大括号({})将变量包围起来。这样的优点是不仅会把变量的值打印，同时还会将变量名打印出来。

4. 使用console.table来打印多条目数据

如果你要打印的变量是一个数组，每一个元素都是一个对象。我建议你使用console.table来打印，其表格化的呈现更加美观易读。

5. 给log加点颜色

log有时候变得非常多，包含你自己的、一些第三方扩展或者浏览器的logs。除了使用过滤器(filter)以外，你还可以使用颜色来更好地区分。

6.