你应该知道的Debug技巧

正文

请到「今天看啥」查看全文

在一定程度上, 我们都是这样的做的. 随着我们对工具越来越精通, 我么可以一次性写越来越多的代码, 而无需测试一个假设。

但是, 如果你是一个新手, 对语法不是很熟练, 对技术也不是很精通的情况下, 你应该放慢速度, 并且小心谨慎. 这样做, 您可以更好的, 更早的找出您无意中给自己挖的坑. 事实上, 一旦你发现了一个问题, 一次解决一个问题看似可能会慢一点, 但是暴露出发生了什么变化, 以及出现错误的方式, 这些似乎更快的步伐是不允许的.

您还记得当您还是个孩子的时候, 您的父母对您说: "如果你迷路了, 就待在那别动?" 至少我的父母是这么跟我说的。

这是因为, 如果他们正在四处寻找我, 而我也在四处寻找他们, 我们就会有更少的机会撞见. 调试的原理也一样. 发现问题是, 越少改动代码越好。

返回连贯的结果越多, 跟踪错误就越容易. 所以在调试时, 尽量不要安装任何东西, 或者引入新的依赖. 如果您发现每次应该返回一个静态结果的时候却返回不同的错误, 那是一个危险信号, 您应该马上提高警惕, 并且全力解决它.

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, 如上所述.

请到「今天看啥」查看全文