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

时间 2019-11-16 标签译前端调试技巧诀窍

原文地址：Debugging Tips and Tricks

原文做者：SARAH DRASNER

译文出自：掘金翻译计划

译者：lsvih

校对者：loveky,ymz1124

前端调试技巧与诀窍

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

主要概念

隔离问题

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

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

可以弄清楚问题的根本缘由是不是咱们想的那样，仍是存在其它的冲突。
对于时序任务，能判断是否存在时序紊乱。
严格审查咱们的代码是否还可以更加精简，这样既能帮助咱们写代码也能帮助咱们维护代码。
解开纠缠在一块儿的代码，以观察究竟是只有一个问题仍是存在更多的问题。

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

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

你能够在你代码中写上 debugger;，这样你能够看到当时这一小块代码作了什么。python

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

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

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

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

保持条理清晰

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

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

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

选用优秀的工具

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

代码高亮

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

使用 Lint 工具

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

不一样的公司有着不一样的代码风格及规定。我我的比较喜欢 AirBnB 的 JS 代码规范。你的 Lint 工具将会强制你按照指定的模式进行编程，不然它能够终止你的构建过程。我曾经使用过一个 CSS Lint 工具，当我为浏览器写 css hack 时，它一直在报错。最后我不得不经常关闭它，它也就没能起到应有的做用。可是一个好的 Lint 工具能够把你忽视的一些潜在的问题指出来。

下面是几个资源：

我最近找到了一个响应式图片 lint 工具，它能够告诉你使用 picture 元素、srcset 属性以及 size 属性的时机。
这儿有个很好的分类，收集与对比了一些 JS lint 工具。

浏览器插件

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

Deque Systems 提供的 aXe，是一款优秀的可行性分析插件。
若是你工做中使用 React，React DevTools 是你必不可少的工具，你能够经过它观察虚拟 DOM。
Vue DevTools，当你使用 Vue 时，同上。
Codopen：它会会从编辑器模式弹出 CodePen 的调试窗口。八卦：我老公由于不喜欢看到我一直手动打开调试窗口，因此特地开发了这个工具。（真是个好礼物）
Pageruler：它能获得页面中的像素尺寸以及任何须要测量的值。我喜欢这个工具，由于我对于个人布局变态般挑剔。它能帮助我解决这些问题。

开发者工具

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

关于学习开发者工具的功能，Umar Hansa 有一套特别好的资料。他制做了一个每周周报与 GIF 动图网站、制做了咱们最后一节提到的一个新课程，并在咱们网站发表了这篇文章。

我最近特别喜欢的一个工具是CSS Tracker 加强插件，收到 Umar 的许可以后我将这个工具在这儿展现给你们看。它会显示出全部没有使用过的 CSS，你能够由此来理解 CSS 对于性能的影响。

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

各色各样的工具

What input 是一个能跟踪当前输入（鼠标、键盘、触摸）与当前信息的实用工具。（感谢 Marcy Sutton 提供了这个便捷的工具）
若是你作的是响应式开发，或者你得在无数种设备上进行检查，那么 Ghostlabapp 是个挺适合你的时髦工具。它为你提供了同步移动 web 开发、测试与检查。
Eruda 是个很棒的工具，它能够帮助咱们在移动设备上进行调试。我很喜欢它，由于它不只是一个模拟器，还为你准备了控制台和真实的开发者工具，让你更容易理解。

特别提示

我一直对其余人是怎么 debug 的很感兴趣，因此我经过 CSS-Tricks 与个人我的帐号在社区征集你们最喜欢的调试方式。如下是社区中你们给出的技巧的合集。

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

辅助方法

$('body').on('focusin',function(){
  console.log(document.activeElement);});复制代码

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

-Marcy Sutton

调试 CSS

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

@sarah_edo：对于 CSS，我一般会给有问题的元素加上一个 .debug 的 class，这个 class 定义了红色的 border。

— Jeremy Wagner (@malchata) 2017年3月15日

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

检测 React 的 State

@sarah_edo：
{JSON.stringify(this.state, null, 2)}
— MICHAEL JACKSON (@mjackson) 2017年3月15日

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

动画

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

@sarah_edo @Real_CSS_Tricks： * { animation-duration: 10s !important; }

— Thomas Fuchs (@thomasfuchs) 2017年3月15日

我在以前的文章《调试 CSS 关键帧动画》中提到过这个问题，那篇文章里还有更多的技巧，例如如何使用硬件加速、如何在不一样时刻进行多种变换等。

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

译注：GreenSock 与 mo.js 都是功能强大的js动画库

Val Head 经过屏幕录像作了一个很好的视频，这个视频展现了 Chrome 与 Firefox 开发者工具中提供的动画调试功能。

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

检查不一样链接状态下的加载状况

我每每在网速很快的条件中工做，因此我会限制个人网速来观察那些网速较慢的人们所体验到的性能。

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

@sarah_edo：这儿有个不是秘密的小技巧，可是不少人还不知道：打开开发者工具，而后在刷新按钮上右击。pic.twitter.com/FdAfF9Xtxm

— David Corbacho (@dcorbacho) 2017年3月15日

设置定时 Debugger

这一条是 Chris 提供的。对于这点咱们写了一篇详细的文章。

setTimeout(function() {
  debugger;
}, 3000);复制代码

它与我以前提到的 debugger; 工具很相似，不过你能够把它放在 setTimeout 函数中，获得更多详细的信息。

模拟器

@Real_CSS_Tricks 有的 Mac 用户可能还不知道，用 iOS 模拟器加上 Safari 简直不要太方便！ pic.twitter.com/Uz4XO3e6uD

— Chris Coyier (@chriscoyier) 2017年3月15日

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

@chriscoyier @Real_CSS_Tricks 若是你不想装 XCode，你也能够经过这种方式来使用模拟器：t.co/WtAnZNo718

— Chris Harrison (@cdharrison) 2017年3月15日

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

远程调试

@chriscoyier @Real_CSS_Tricks：jsconsole 是个很棒的工具。

— Gilles 💾⚽ (@gfra54) 2017年3月15日

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

译注，jsconsole 官网如今由于未知缘由打不开了，也能够用 Weinre 和 Ghostlab 等工具进行移动远程调试。

调试 CSS 网格布局

Rachel Andrew 也送给咱们一个很好的方法。当你使用 Firefox 时，点击一个图标，网格的间隔将会被高亮。她的视频详细地解释了这个技巧。

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

数组调试

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

你能够用 array.find 来查找元素🔥 t.co/AuRtyFwnq7

— Wes Bos (@wesbos) 2017年3月15日