20个Chrome DevTools调试技巧

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

• 原文: Art of debugging with Chrome DevTools

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

谷歌开发者工具提供了一系列的功能来帮助开发者高效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. $ 和 $$

若是你在console下没有任何库使用$和$$，那么你可使用它们分别做为document.querySelector() 和 document.querySelectorAll()的快捷键。

除了提供了一个更加快捷的方式外，还有一个好处，$$返回一个数组，而不是array-like的NodeList. 因此你能够直接使用map, reduce和filter 函数。

你可使用$$检查页面中的无效连接：

Promise .all( $$('a') .map(link => link.href) .map(href => fetch(href)) ) .then(() => console.log('All links working')) .catch(() => console.error('Some links are broken'));

 

7. $0

若是你想引用某个DOM元素，使用$0。$0指向你当前在Element中选中的元素。若是指定了$0，$1指向以前选中的元素。以此类推，直到$4均可以使用。

8. $_

$_记录了最后一次在Console计算的表达式。

9. getEventListeners()

getEventListeners(domElement) 返回在DOM元素上注册的全部的事件。请看下面的例子：

你也许注意到了，当我在console里输入表达式的时候，其结果当即被计算出来了。你能够看到我并无敲击Enter键，而结果已经显示出来。这个是金丝雀版本的一个新功能，叫作”Eager Evaluation”。

10. debug(fn)

在上面的例子中，若是你想在点击按钮后的执行过程当中暂停，你可使用debug函数。debug(fn)接收一个函数做为参数，当每次该函数被调用时，Debugger就会在该函数的第一行中断执行。

想象一下你要debug一个按钮的问题，可是你不知道这个按钮对应的事件函数在代码中什么位置。除了去大量的源代码中慢慢寻找以外，还有一个巧妙的方法。使用getEventListeners函数，而后将debug方法注入进去。这样，当你点击按钮的时候，就会在该函数的第一行停下来。

11. copy(obj)

copy(anything) 是一个颇有用的工具函数方便你将任何东西拷贝到系统的粘贴板暂存。

给copy函数传入一个没有格式的JSON，会返回格式化的结果：

12. Top-level await

async/await 使得异步操做变得更加容易和可读。惟一的问题在于await须要在async函数中使用。若是咱们要在DevTools的控制台使用，须要一些特殊的处理，使用Immediately Invoked Async Function Expression (IIAFE). 一点都不方便。好在DevTools已经支持直接使用await了。

Debugging in the Sources panel

在source面板，使用breakpoints，stepping-into, stepping-over等方式，你能够很好地掌控程序的执行状态，来发现代码问题。接下里我不会介绍你们都知道的基础内容，而是一些我常用的建议和技巧。

13. 开启 auto-pretty print

在金丝雀版本的实验模式下，你能够开启自动美化代码模式。

14. 使用条件断点在生产环境中注入console logs

断点是一个很棒的功能。但还有一个更棒的：条件断点。只有当设定的条件知足的时候，中断才会执行。也就是说DevTools并不会每次都中断程序的执行，而只是在你想要它中断的时候才中断。想了解更多：查看这里.

在生产环境下，由于不能修改源代码，我喜欢使用条件断点来注入console.log。若是个人断点仅仅是一个console.log，DevTools不会中断，由于console.log返回undefined,，是一个false的值。可是它会执行我注入的表达式，能够看到输出结果。

为何不直接使用普通的断点，而且查看变量呢？有时候我并不想这样作。好比，当我在分析那些频繁执行的操做，例如触摸或则滑动。我并不想每一次都致使Debugger触发程序中断，可是我想看到程序输出的结果。

15. 暂停UI在Hover状态下的展现结果

咱们很难去检查一个只有在Hover状态下展现的元素。好比，如何去检查一个tooltip？若是你右键并选择检查，元素已经消失了。那么有办法吗？

我是这么操做的：

1. 打开sources面板
2. 显示tooltip
3. 使用快捷键来暂停脚本执行(将鼠标停留在暂停的图标上查看快捷键)
4. 回到Elements面板，而后像一般同样去检查元素

16. XHR breakpoints

若是想要理解一个请求是如何执行的，可使用sources面板的XHR breakpoints。

17. 使用DevTools做为IDE

DevTools的source面板能够说至关强大。你能够快速查找，跳转到某一行，某个函数，执行一段代码，使用多行光标等等。这些功能在这篇medium文章中有详细描述。

既然如此，为啥不把整个开发都搬到这里呢。这样就不须要浪费时间切换IDE和浏览器了。

若是你有一个使用create-react-app或则vue-cli构建的项目，你能够直接把整个文件夹拖到Sources面板下。DevTools会自动对全部文件作映射。因此，你能够在DevTools下修改文件并当即查看。这样，整个开发效率，特别是Debugging效率绝对提升了。

18. 使用network overrides来简单调试生产代码

若是你正在Debugging一个生产环境下面的bug，你可使用network overrides来调试，而不用在本地搭建整个配置。

你能够很容易将任何远程的资源下载一份本地的版本，而后能够在DevTools下编辑，而且DevTools会更新展现你编辑后的文件。

在生产环境下，也能够很容易Debugging，而且作一些性能上的测试也变得容易。

19. Nodejs debugging

若是你想使用DevTools的Debugger来debug Node.js应用，你可使用--inspect-brk flag来开启：

node --inspect-brk script.js

跳转到chrome://inspect页面，在Remote Target选项，能够看到Node程序。

而且，在DevTools中你会看到一个绿色的Node图标，点击图标会打开针对Node的Chrome Debugger。

若是你想要用DevTools Debugger来debug你的单元测试，你须要这样调用：

node --inspect-brk ./node_modules/.bin/jest

不过这样作其实很麻烦，咱们须要本身找到相应的路径。 GoogleChromeLabs 最近发布了一个新的工具很是好用，叫作：ndb。使用ndb，你只须要：

ndb npx jest

若是你有一个自定义的脚本，你能够这样调用：

ndb npm run unit

更妙的是，若是你在一个有配置package.json的项目下调用ndb，他甚至会自动分析package.json中的脚本，方便你直接使用DevTools。

20. 使用Snippets来辅助Debugging

DevTools提供了一个能够建立和保存小段代码的工具，我很喜欢用它们来加速个人工做。好比lodashify — 能够快速给任何应用添加lodash。

(function () { 'use strict'; var element = document.createElement('script'); element.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"; element.type = "text/javascript"; document.head.appendChild(element); })();

另外一个小的工具函数式用来加强对象的属性，每次被访问或则修改，它都会提供给我充分的信息，好比谁访问了，谁更改了它。在Debugging的时候，很是有用。

const traceProperty = (object, property) => { let value = object[property]; Object.defineProperty(object, property, { get () { console.trace(`${property} requested`); return value; }, set (newValue) { console.trace(`setting ${property} to `, newValue); value = newValue; }, }) };

还有不少很是有用的devtools代码片断，你能够直接拿去使用。