译者：@池盛星
译文：https://zhuanlan.zhihu.com/p/28376137
作者：@Sarah Drasner
原文：https://css-tricks.com/debugging-tips-tricks/
前言
大家平时多注意喝水，多运动，一体检完各种毛病。文章由@池盛星翻译分享。
敲代码只是作为开发人员的一小部分工作而已。为了使我们的工作变得高效, 我们还必须擅长各种姿势的调试。
每当我花费一些时间来学习新的调试技能后, 总能发现自己效率更高, 并且能为所在的团队带来更多的价值. 所以, 这里汇总了一些, 还有一些来自社区. 我们将从一些核心的原则开始, 然后深入更具体的例子 .
Main Concepts 主要概念
Isolate the Problem 隔离问题
隔离(Isolation)可能是所有调试中最强大的核心原则. 我们的代码库可以扩展, 具有不同的库, 框架, 并且可以包含许多贡献者, 其中, 可能有许多贡献者已经不再在这个项目上工作了。 隔离问题有助于我们慢慢的消除问题的非必要部分, 以便于我们能够专注于一个解决方案.
隔离的好处包括但不限于:
弄清楚它是否真的是我们认为的或某种冲突的根本原因
对于基于时间的任务, 了解是否存在竞争条件(race condition)
仔细看看我们的代码是否还有优化的空间, 这可以帮我们编写和维护代码
解决它, 并看看是否只有这个问题还是会有其它存在的问题
问题是否可重现是非常重要的. 如果不能重现这个问题的确切的产生方式, 解决它将会变得异常困难. 这也允许您将其与类似的工作模型进行比较, 以便您可以看到两者之间有什么变化或不同之处.
在实践中, 我有很多不同的隔离方法. 其中一个就是在本地实例或者私有的CodePen或JSBin上创建一个简化的测试用例. 另一个是在代码中创建断点, 以便我可以看到它一步一步的执行. 以下是一些定义断点的方法:
您可以在你的代码中内嵌一行: debugger; 这样您就能看到代码运行时, 如何触发这行代码.
您可以在Chrome DevTools中进一步了解, 甚至可以浏览下一个触发的事件或选择特定的事件侦听器:
好了, console.log是一种很常见的隔离方式. (PHP中的echo, python中的print等等). 您正在采取一个小小的执行(execution)并测试您的假设, 或检查是否有些改变。
这可能是最经得起时间考验的调试方式之一, 无论您已经变得如何高效, 它仍有它的用途. ES6中的箭头函数也已经允许我们加强我们的控制台调试规则, 因为现在在控制台中编写有用的one-liners(单行函数)变得简单了许多.
console.table也是我最喜爱的工具, 尤其适合当您有大量数据要呈现, 如大数组, 大对等类似的情况. console.dir函数也是一个不错的选择, 它将记录对象属性的交互式列表 。
Be Methodical 条理清晰
当我在课堂上教授并且帮助学生们的时候, 我发现他们尝试去调试一个问题的时候, 使他们退缩的最多的原因是条理不够清晰. 这是一种真正的"乌龟和野兔"试的情况。
他们想要快速解决问题的心是可以理解的, 所以一次性修改了一大堆东西, 然后, 当某些东西产生了新的问题, 他们就不知道是他们改动的什么东西产生了新的问题. 然后, 为了调试, 他们会立即改变许多事情, 试图找出什么是正常的, 什么是错误的. 在这个过程中, 会感到很失落.
在一定程度上, 我们都是这样的做的. 随着我们对工具越来越精通, 我么可以一次性写越来越多的代码, 而无需测试一个假设。
但是, 如果你是一个新手, 对语法不是很熟练, 对技术也不是很精通的情况下, 你应该放慢速度, 并且小心谨慎. 这样做, 您可以更好的, 更早的找出您无意中给自己挖的坑. 事实上, 一旦你发现了一个问题, 一次解决一个问题看似可能会慢一点, 但是暴露出发生了什么变化, 以及出现错误的方式, 这些似乎更快的步伐是不允许的.
您还记得当您还是个孩子的时候, 您的父母对您说: "如果你迷路了, 就待在那别动?" 至少我的父母是这么跟我说的。
这是因为, 如果他们正在四处寻找我, 而我也在四处寻找他们, 我们就会有更少的机会撞见. 调试的原理也一样. 发现问题是, 越少改动代码越好。
返回连贯的结果越多, 跟踪错误就越容易. 所以在调试时, 尽量不要安装任何东西, 或者引入新的依赖. 如果您发现每次应该返回一个静态结果的时候却返回不同的错误, 那是一个危险信号, 您应该马上提高警惕, 并且全力解决它.
Choose Good Tools 选择好的工具
有成千上万种工具来解决各种各样的问题. 我正尝试其中的大部分, 发现了一些最有用的工具, 然后把它们的链接(资源)放出来.
Syntax Highlighting 语法高亮
当然, 为您的语法高亮主题选择颜色和口味是十分有趣的, 但这得花费您的一些时间来把问题考虑清楚。
我通常喜欢选择暗色调的主题, 其中一个跳过语法(skip in syntax会使我的所有代码颜色变浅, 这样, 很容易就能马上找到错误了。
我倾向于使用Oceanic Next或者Panda, 但是, 说真的, 这完全取决于每个人的喜好. 重要的是, 不要忘了我们的初衷, 当寻找一款很好的语法高亮, 看起来很棒的主题时, 能快速发现你的错误才是最重要的, 并且, 这两者完全可以兼顾.
Linting Lint检查
Linting帮助标记可疑代码, 并提出我们可能忽略的错误. Linting是非常重要的, 但选择哪一款, 跟您正在使用的语言, 框架有很大的关系, 当然, 最重要的还是您喜欢的代码风格.
不同的公司都有不同的代码风格和所要遵循的规则. 就个人而言, 我喜欢AirBnB的, 但要小心, 并且不要只使用旧的linter。
您的linter会强制执行代码检查, 如果这不是您自己的本意, 它可能会阻碍您的构建过程. 我有一个CSS linter, 每当我写一些浏览器hack的时候, 它总是会报错, 最终不得不经常规避它, 这就不是一个有用的linter. 当然, 一个好的linter可以照亮您可能错过的潜在的小错误.
这里有一些资源:
我最近发现这个响应式图片linter, 告诉您可能使用图片, srcset或大小的几率.
这是一个很好的JS linters的breakdown.
Browser Extensions 浏览器扩展
浏览器扩展真的很棒, 因为我们可以如此轻松自如的启用和停用它们, 并且它们能真正的适用于非常具体的需求。
如果您正在使用特定的库或框架, 您就有机会启用它们为DevTools所开发的扩展, 提供更清晰详细的信息. 如果没有扩展, 是做不到的。
请注意, 扩展不仅仅会使浏览器变慢, 它们还有权限去执行脚本, 所以在真正使用某个扩展之前, 请做些功课来了解扩展的作者, 评级以及背景. 说来这么多, 以下是一些我最喜欢的扩展:
来自Dequeue Systems的辅助功能扩展
在我看了, React DevTools真的很重要, 如果您正在使用React, 查看它们的虚拟Dom
Vue DevTools, 如上所述.
CodePen: 将您从编辑器模式弹出到CodePen的调试窗口中.
Pageruler: 获取像素尺寸, 并测量页面上的任何内容. 我喜欢这个, 因为我对于我的布局来说就是超级笨蛋, 这有助于治服我心中的野兽.
DevTools
这可能是最著名的调试工具了, 并且您可以用它做很多事情. 他们拥有如此之多的封装的功能, 以至于很容易错过其中一些. 所以, 在接下来的具体技巧中, 我们将深入了解一些我最喜欢的功能.
Umar Hansa有很好的关于学习DevTools可以做什么的素材. 他有一个每周通讯和GIF, 在文章的最后一节会有一个新课程的链接, 他在我们的网站也投过一篇文章.
我最近最喜欢的一个功能是CSS Tracker Enhancement, 如下图所示(已得到Umar授权许可). 这里显示所有未使用的CSS, 以便您能了解性能和影响。
CSS跟踪器通过不同颜色标记来显示使用和未使用的CSS集合.
Misc Tools 其他工具
What input是一个用于跟踪当前输入方法(mouse, keyboard或者touch)的全局实用功能. , 以及目前的意图 - 这可以很好地跟踪可访问性泄漏(致敬Marcy Sutton, 此漏洞的无障碍专家).
如果您正在进行响应式开发或者检查部署在大量设备上的任何东西, Ghostlabapp是一个非常棒的工具. 它提供同步的Web开发, 测试和检查.
Eruda是一款超赞的工具, 它有助于在移动设备上进行调试. 我真的非常喜欢它, 因为它需要一个模拟器, 进一步地, 给出一个控制台和真正的devtools, 以帮助您理解。
Specific Tips具体技巧
我总是很好奇其他人如何进行调试, 所以我通过CSS-Tricks账号向社区提问, 并且思考他们到底喜欢什么. 这个列表结合了我喜欢的技巧以及来自社区的一些技巧.
Accessibility 可访问性
$('body').on('focusin', function() {
console.log(document.activeElement);
});
这将记录当前关注的元素, 很有用, 因为打开DevTools会使activeElement变得模糊.
This logs the currently focused element, useful because opening the Devtools blurs the activeElement - Marcy Sutton
Debugging CSS 调试CSS
我们得到很多反馈说, 人们将元素的边框设置为红色, 以便观察元素在做什么.
@sarah_edo 对于CSS, 我通常会为那些总是惹麻烦的元素加上一个.debug的CSS类, 这个类里面的样式border定义为red. — Jeremy Wagner (@malchata) March 15, 2017
我也是这样做的, 我自己甚至有一个小小的CSS文件, 丢进来一些不同的CSS类, 就可以轻易的访问不同颜色.
Checking State in React 在React中检查状态
@sarah_edo {JSON.stringify(this.state, null, 2)} — MICHAEL JACKSON (@mjackson) March 15, 2017
赞同Michael, 这是我知道的最有用的调试工具之一. 这个代码片段"美化打印(pretty prints)"了您正在使用的组件的状态到组件上, 以便您知道发生了什么. 您可以验证状态正在以您希望的方式运行, 并且可以帮助您追踪在状态和使用方式之间的任何错误.
Animation 动画
我们得到很多反馈, 他们减慢动画(延长动画时间):
@sarah_edo @Real_CSS_Tricks * { animation-duration: 10s !important; } — Thomas Fuchs (@thomasfuchs) March 15, 2017
我曾经在我发表在CSS Tricks的贴子"调试CSS Keyframe动画"里提到过这个方法, 在贴子里提到了更多的技巧, 例如如何硬件加速, 或者以不同百分比进行多个转换.
我还在GreenSock中, 通过JavaScript脚本来减慢我的动画 - 如下所示: timeline.timeScale(0.5) (您可以减慢整个时间轴, 而不是一次只能减慢一个动画, 整个非常有用) 在mo.js中, 看起来就像这样: {speed: 0.5}.
Val Head有一个非常棒的录屏功能, 通过Chrome和Firefox的DevTools提供动画.
如果您想使用Chrome的DevTools的时间轴来进行性能审查, 值得一提的是, 绘画是开销最大的任务, 所以, 所有这些都是平等的, 更多地关注那些高百分比的绿色部分.
Checking different connection speeds and loads 检查不同的连接速度和负载
我倾向于在高速的网络连接中工作, 所以我会调节我的连接速度, 看看在没有连接速度的情况下表现如何。
这同样适用于硬性重新加载或缓存为空的情况 。
@sarah_edo 不算什么秘密的技巧, 但是仍然有许多人不知道. 您需要先打开DevTools, 然后右键单击刷新按钮. pic.twitter.com/FdAfF9Xtxm — David Corbacho (@dcorbacho) March 15, 2017
Set a Timed Debugger 设置定时调试器
这个来自Chris, 在这里, 我们有他的完整的论述:
setTimeout(function() {
debugger;
}, 3000);
它非常类似于我们之前提到过的debugger;, 除了您可以将它放到setTimeout函数里面, 并且能获取更多的微调信息.
Simulators 模拟器
@Real_CSS_Tricks 为了防止任何Mac用户不知道只一点: iOS模拟器+Safari简直完美. pic.twitter.com/Uz4XO3e6uD — Chris Coyier (@chriscoyier) March 15, 2017
我曾经提到过Eruda的模拟器. iOS用户也会得到一个漂亮的模拟器. 我曾经告诉您, 必须先按照XCode, 但是这个tweet给出了另外一种方法:
@chriscoyier @Real_CSS_Tricks 或者, 您可以使用这个方法, 如果您不想安装XCode的话: https://t.co/WtAnZNo718 — Chris Harrison (@cdharrison) March 15, 2017
Chrome也有一个有用的设备切换工具.
Remote Debuggers 远程调试器
@chriscoyier @Real_CSS_Tricks https://t.co/q3OfWKNlUo 是个非常好的工具. — Gilles 💾⚽ (@gfra54) March 15, 2017
说实话, 在看到这个推文之前, 我都不知道有这个工具. 非常有用!
CSS Grid Debugging CSS网格调试
Rachel Andrew在Smashing上发表了演讲, 并提到了可以在Firefox中点击的小东西, 它将照亮网格间的间隔. 她的视频解释的非常清晰 。
Array Debugging 数组调试
Wes Bos有一个非常有用的技巧, 用于在数组中查找单个项:
如果您正在查找数组中的一个项, 那么array.find()很🔥 https://t.co/AuRtyFwnq7 — Wes Bos (@wesbos) March 15, 2017
Further Debugging Resources 更多调试资源
Jon Kuperman有一个前端大师课程, 可以帮助您掌握与此应用程序一起使用的DevTools.
Code School有一个小课程: Discover DevTools.
Umar Hansa有一个新的在线课程: Modern DevTools.
Julia Evans有一篇非常棒的关于调试的文章, 感谢Jamison Dance把它推荐给我.
如果您像我一样非常好奇, 并且希望在时间轴上挖的更深, 请看Paul Irish的用DevTools进行高级性能检查.
最后，你平时调试代码的时候有什么奇淫技巧吗？或者有什么趣事发生可以跟@早读君分享分享。
在微信公众号内回复数字“1”
小编拉你进粉丝微信群
不是在文章评论里回
