当前位置：首页 > 编程日记 > 正文

javascript调试_如何提高JavaScript调试技能

编程日记 2024-08-10 12:50:00

javascript调试

Almost all software developers who have written even a few lines of code for the Web have had at least a quick glance at JavaScript. After all, it is currently one of the most in-demand programming languages.

几乎所有甚至为Web编写了几行代码的软件开发人员，都至少可以快速浏览一下JavaScript。毕竟，它是目前最受欢迎的编程语言之一。

Some people love it, some hate it. Regardless of your view, if you use it, you will need to debug it eventually.

有些人喜欢它，有些讨厌它。无论您使用哪种视图，都必须最终对其进行调试。

Below I will share some tips that have helped me in difficult moments.

下面，我将分享一些在困难时刻对我有帮助的提示。

基本/知名的 (The basic / well-known ones)

橡皮鸭调试 (Rubber duck debugging)

Rubber duck debugging is a method where you explain your problem to anyone or anything (it doesn’t have to be a human). Then the solution magically stops playing with your goodwill and appears to you.

橡皮鸭调试是一种您可以向任何人或任何人解释问题的方法(不必是人类)。然后，解决方案就神奇地停止了您的信誉，并向您显示。

The ‘duck’ has no knowledge of your project, so you explain everything, questioning your assumptions at the same time. Ideally, you’ll suddenly have an enlightenment like, ‘Oh dear, it was in front of me, thanks bro, sorry for the interruption.’

“鸭子”对您的项目一无所知，因此您可以解释所有内容，同时质疑您的假设。理想情况下，您会突然得到启发，例如“哦，亲爱的，它就在我面前，谢谢兄弟，对不起您的打扰。”

Yet the duck was silent all this time, and that’s the magic part. :)

但是鸭子一直都保持沉默，这就是神奇的部分。 :)

好的日志记录 (The good ol’ logging)

When you have an issue to debug, you usually have a vague hypothesis of what might be wrong. It might be totally off from the actual cause, but this is another story. If you start putting logs in places where the error might occur, you may get to the point fast.

当您有问题要调试时，通常会有关于什么是错误的模糊的假设。这可能与实际原因完全不符，但这是另一回事了。如果您开始将日志放在可能发生错误的地方，则可能会很快达到目的。

Even if you don’t, don’t remove the logs you added, as they might prove themselves helpful on a future issue.

即使您不这样做，也不要删除添加的日志，因为它们可能会证明自己对解决以后的问题很有帮助。

I could argue why you should never reach this point, to add debug logs, as the logs should be there as part of the initial development. But Erik Hazard has already done the job.

我可能会争辩说，为什么您永远都不能添加调试日志，因为日志应该作为初始开发的一部分而存在。但是Erik Hazard已经完成了这项工作。

打破重点 (Breaking the points)

A debugger is a great tool in your arsenal and a great help — if you know how to use it.

如果您知道如何使用调试器，那么它是您的工具库中的一个很好的工具，也是一个很大的帮助。

That means:

这意味着：

First understand the problem
首先了解问题
Then make a couple of hypotheses about the root cause (and not the symptom)
然后对根本原因(而不是症状)做出一些假设
Set the appropriate breakpoints to verify or disprove them.
设置适当的断点以验证或取消验证它们。

In JavaScript, you can either set in the browser’s dev tool or use the debugger keyword in the code to force pausing the execution.

在JavaScript中，您可以在浏览器的dev工具中进行设置，也可以在代码中使用debugger关键字来强制暂停执行。

So don’t just put random breakpoints here and there. Have a routine and an ‘end’ in your mind when using it.

因此，不要随便在此处放置随机断点。使用它时，请记住一个例程和一个“目标”。

不太知名的 (The less well-known ones)

控制台表 (console.table)

A few lines above, we spoke about the importance of logging. The command we usually use is console.log('text'). But what if the output is more complex? Yes, console.log handles arrays, too. And objects.

在上面的几行中，我们谈到了日志记录的重要性。我们通常使用的命令是console.log('text') 。但是，如果输出更复杂怎么办？是的， console.log处理数组。和对象。

But what if I told you that you could spot the error faster because of some…beautification? That would be console.table method and is demonstrated below

但是，如果我告诉您，由于某些……美化，您可以更快地发现错误，该怎么办？那将是console.table方法，并在下面进行演示

See what a nice overview you can gain from the layout? I highly encourage you to use it more, especially with iterables.

看到您可以从布局中获得什么样的概览？我强烈建议您多使用它，尤其是在可迭代对象上。

打破事件而不是排队 (Break on events instead of lines)

Let’s imagine the following scenario. A DOM element is changing intermittently and with wrong values, and you have no clue why. Which of the 29 functions that mutate it is being naughty? (Side note: Mutating is bad usually, but this is a topic for another blog post.)

让我们想象一下以下情况。 DOM元素会间歇性地更改并具有错误的值，您不知道为什么。使它变异的29个功能中，哪个是调皮的？ (旁注：变异通常是不好的，但这是另一篇博客文章的主题。)

Use the DOM change breakpoints. Every time the element is mutated, a stack track will be shown. Just like if you have put the correct breakpoints. You can find more details here.

使用DOM更改断点 。每次更改元素时，都会显示一个堆栈轨道。就像您已设置正确的断点一样。您可以在此处找到更多详细信息。

剖析 (Profiling)

If the bug you are working on is not performance-oriented, maybe this is overkill. But I still have to mention it (well, it may be a performance issue after all :) ). In Chrome and Firefox you can use the profiler’s built-in functionality to spot a bottleneck or just…see the functions that are executed. Boom :). Overengineering at its best. Please use this feature wisely. Killing a fly with a bazooka can have some weird side effects.

如果您正在处理的错误不是面向性能的，那么这可能是过大了。但是我还是不得不提(毕竟，可能是性能问题:))。在Chrome和Firefox中，您可以使用探查器的内置功能来发现瓶颈，或者只是…查看执行的功能。繁荣:)。最好地进行过度工程。请明智地使用此功能。用火箭筒杀死苍蝇会产生一些怪异的副作用。

结论 (Conclusion)

Thank you for reading this article. I hope you enjoyed it and learned something today. As always, I highly encourage to share your magic techniques in the comments.

感谢您阅读本文。我希望您喜欢它并今天学到一些东西。与往常一样，我强烈建议在评论中分享您的魔术技巧。