[译] 前端调试技巧与诀窍前端调试技巧与诀窍

<b>本文讲的是[译] 前端调试技巧与诀窍，</b>

编写代码其实只是开发者的一小部分工作。为了让工作更有效率，我们还必须精通 debug。我发现，花一些时间学习新的调试技巧，往往能让我能更快地完成工作，对我的团队做出更大的贡献。关于调试这方面我有一些自己重度依赖的技巧与诀窍，同时我在 workshop 中经常建议大家使用这些技巧，因此我对它们进行了一个汇总（其中有一些来自于社区）。我们将从一些核心概念开始讲解，然后深入探讨一些具体的例子。

隔离问题大概是 debug 中最重要的核心概念。我们的代码库是由不同的类库、框架组成的，它们有着许多的贡献者，甚至还有一些不再参与项目的人，因此我们的代码库是杂乱无章的。隔离问题可以帮助我们逐步剥离与问题无关的部分以便我们可以把注意力放在解决方案上。

隔离问题的好处包括但不限于以下几条：

能够弄清楚问题的根本原因是否是我们想的那样，还是存在其它的冲突。

对于时序任务，能判断是否存在时序紊乱。

严格审查我们的代码是否还能够更加精简，这样既能帮助我们写代码也能帮助我们维护代码。

解开纠缠在一起的代码，以观察到底是只有一个问题还是存在更多的问题。

让问题能够被重现是很重要的。如果你不能重现问题来分辨出它到底出在哪里，你将会很难修复这个问题。或者你也可以将它和类似的正常工作的模块进行对比，这样你就可以发现哪里进行过改动，或者发现两者之间有什么不同。

在实际操作中，我有许多种方法对问题进行隔离。其中一种是在本地创建一个精简的测试用例，当然你也可以在 CodePen 创建一个私人测试用例，或者在 JSBin 创建你的用例。另一种是在代码中创建断点，这样可以让我详细地观察代码的执行情况。以下是几种定义断点的方式：

你可以在你代码中写上 <code>debugger;</code>，这样你可以看到当时这一小块代码做了什么。

你还可以在 Chrome 开发者工具中进一步进行调试，单步跟踪事件的发生。你也可以用它选择性地观察指定的事件监听器。

单步调试函数

古老，好用的 <code>console.log</code> 是另一种隔离的方法。（PHP 中是 <code>echo</code>，python 中是 <code>print</code>……）。你可以一小片一小片地执行代码并对你的假设进行测试，或者检查看有什么东西发生了变化。这可能是最耗费时间的测试方式了。但是无论你的水平如何高，你还是得乖乖用它。ES6 的箭头函数也可以加速我们的 debug 游戏，它让我们可以在控制台中更方便地写单行代码。

<code>console.table</code> 函数也是我最喜欢的工具之一。当你有大量的数据（例如很长的数组、巨大的对象等等）需要展示的时候，它特别有用。<code>console.dir</code> 函数也是个不错的选择。它可以把一个对象的属性以可交互的形式展示出来。

上图为 console.dir 输出的可交互的列表

当我在 workshop 上做讲师，帮助我的班级的学生时，我发现，思路不够清晰是阻碍他们调试的一大问题。这实际上是一种龟兔赛跑的情形。他们想要行动的更快，因此他们会在写代码时一次就改写很多的代码——然后出了某些问题，他们不知道到底是改的那部分导致了问题的出现。接着，为了 debug，他们又一次改很多代码，最后迷失在寻找哪里能正常运行、哪里不能正常运行中。

其实我们或多或少都在这么做。当我们对一个工具越来越熟练时，我们会在没有对设想的情况进行测试的情况下写越来越多的代码。但是当你刚开始用一个语法或技术时，你需要放慢速度并且非常谨慎。你将能越来越快地处理自己无意间造成的错误。其实，当你弄出了一个问题的时候，一次调试一个问题可能会看起来慢一些，但其实要找出哪里发生了变化以及问题的所在是没法快速解决的。我说以上这些话是想告诉你：欲速则不达。

你还记得小时候父母告诉你的话吗？“如果你迷路了，待在原地别动。“ 至少我的父母这么说了。这么说的原因是如果他们在到处找我，而我也在到处跑着找他们的话，我们将更难碰到一起。代码也是这样的。你每次动的代码越少就越好，你返回一致的结果越多，就越容易找到问题所在。所以当你在调试时，请尽量不要安装任何东西或者添加新的依赖。如果本应该返回一个静态结果的地方每次都出现不同的错误，你就得特别注意了！

人们开发了无数的工具用于解决各种各样的问题。下面，我会依次介绍一些我觉得最有用的工具，并在最后贴上相关资源的链接。

当然，为你的代码高亮主题找一个最热辣的配色与风格方案是很有趣的，但是请花点时间想清楚这件事。我通常使用深色主题，当有语法错误时，深色主题会用较亮的颜色显示我的代码，使我能轻松快速地找到错误。我也尝试过使用 Oceanic Next 配色方案与 Panda 配色方案，但是说实话我还是最喜欢自己的那种。在寻找优秀的代码高亮工具的时候请保持理智，帅气的外观当然很棒，但是为你揪出错误的功能性更加重要。当然，你完全有可能找到两者都很优秀的代码高亮工具。

使用 Lint 工具能够帮助我们标记出来一些可疑的代码，并且能报出我们忽视的一些错误。Lint 工具相当的重要，使用何种 lint 工具取决于你使用的语言与框架，以及最重要的：你认可怎样的代码风格。

下面是几个资源：

插件是真的超级棒，你可以轻松地启用或禁用它们。并且它们能在特定需求中发挥重要的作用。如果你使用一些特定的框架或类库工作，使用它们的开发者工具插件将会带给你无与伦比的便利。不过请注意，插件不仅会降低浏览器的速度，它们也有权限执行脚本。因此在你使用之前，请先了解一下插件的作者、评价及背景。总之，下面是一些我最喜欢的插件：

这可能是最直观的调试工具了，你可以用它们办到许多事情。它们有着许多内置的特性容易被人所忽视，因此在这个章节中，我们会深入探讨一些我喜欢的特性。

上图展示了 CSS tracker 为代码被使用的部分和未被使用的部分按照规则表上不同的颜色。

我一直对其他人是怎么 debug 的很感兴趣，所以我通过 CSS-Tricks 与我的个人账号在社区征集大家最喜欢的调试方式。以下是社区中大家给出的技巧的合集。

译注：以下如“@xxx -2017年3月15日”格式的文字均为用户在推特上的发言，点击日期可以看到原推特。

这段代码会记录当前焦点所在的元素。它用起来很方便，因为当你打开开发者工具的时候会将 activeElement 的焦点移除。

我们收到很多回复说一些人喜欢在元素外面加上红色的边框（border），以此来观察元素的行为。

我也会这么做。而且我还做了一个简单的 CSS 文件，可以让我方便地用一些 class 来加上不同的颜色。

Michael 提到的这个办法，是我认为最有用的 debug 工具之一。这点代码可以“美观地输出”你当前正在使用的组件的 state，因此你可以了解此时此刻这个组件将会如何变化。你可以确认这个 state 是否和你设想的一样正常工作，它可以帮助你跟踪任何 state 中的错误，以及你使用 state 出现的错误。

我们收到了许多的回复，说他们会在调试时减慢动画速度：

我也会使用 JavaScript 将我的动画减速。在 GreenSock 中，以这种形式实现：<code>timeline.timeScale(0.5)</code>，它将会将整个时间轴都减速，而不是仅仅将一个动画减速，这个功能超级有用。在 mo.js 中，这个功能是这么写的：<code>{speed: 0.5}</code>。

如果你打算用 Chrome 开发者工具的时间轴来进行性能评估，那么请注意绘制（paint）是最耗性能的步骤，因此当时间轴中绿色占比很高的时候请当心。

我往往在网速很快的条件中工作，所以我会限制我的网速来观察那些网速较慢的人们所体验到的性能。

这是个很有用的功能。它可以与强制刷新、清除缓存结合起来使用。

它与我之前提到的 <code>debugger;</code> 工具很类似，不过你可以把它放在 setTimeout 函数中，得到更多详细的信息。

我前面提到了使用 Eruda 模拟器。iOS 用户还有一种很好的模拟器可以使用。在过去，我会告诉你你得先安装 XCode，但是这条推特提供了一种不同的方法：

Chrome 也有切换设备型号功能，很实用。

在看到他发的这条推特前，我还真不知道有这么一个好用的工具！

译注，jsconsole 官网现在因为未知原因打不开了，也可以用 Weinre 和 Ghostlab 等工具进行移动远程调试。

上图为 Rachel Andrew 展示了如何在 Firefox 开发者工具中将网格的间距高亮。

Wes Bos 提供了一个在数据中搜索元素的一个很有用的技巧：

在文章的最后，我将放上一个让人喜忧参半的资源。我的朋友 James Golick 是一位杰出的程序员，在多年以前做过一个关于 degub 的会议讲话。虽然 James 去世了，但是我们仍然能在这个视频中回忆他、向他学习。

<b></b>

<b>原文发布时间为：2017年4月27日</b>

<b>本文来自云栖社区合作伙伴掘金，了解相关信息可以关注掘金网站。</b>