如何调试我的 JavaScript 代码?[已关闭]

2022-08-30 05:23:42

当我发现我有一个有问题的代码片段时,我应该如何调试它?


答案 1

Firebug是用于此目的的最流行的工具之一。


答案 2

所有现代浏览器都带有某种形式的内置JavaScript调试应用程序。这些细节将在相关技术网页上介绍。我个人对调试JavaScript的偏好是Firefox中的Firebug。我并不是说Firebug比其他任何一个都好。这取决于您的个人喜好,无论如何,您应该在所有浏览器中测试您的网站(我个人的首选始终是Firebug)。

我将以 Firebug 为例,介绍下面的一些高级解决方案:

火狐浏览器

Firefox带有自己的内置JavaScript调试工具,但我建议您安装Firebug附加组件。这提供了几个基于基本版本的其他功能,这些功能很方便。我在这里只谈一谈火虫。

安装Firebug后,您可以按如下方式访问它:

首先,如果您右键单击任何元素,则可以使用Firebug检查元素

Inspect Element in Firebug

单击此按钮将打开浏览器底部的 Firebug 窗格:

Firebug pane

Firebug提供了几个功能,但我们感兴趣的是脚本选项卡。单击脚本选项卡将打开此窗口:

Script tab

显然,要进行调试,您需要单击“重新加载”:

JavaScript in the sctipt tab

现在,您可以通过单击要将断点添加到的 JavaScript 代码段左侧的行来添加断点:

Adding breakpoints

当命中断点命中时,它将如下所示:

A breakpoint being hit

您还可以添加监视变量,并通常执行现代调试工具中预期的所有操作。

Watch varibables

有关 Firebug 中提供的各种选项的更多信息,请查看 Firebug 常见问题解答

Chrome也有自己的内置JavaScript调试选项,它的工作方式非常相似,右键单击,检查元素等。看看 Chrome 开发者工具。我通常发现Chrome中的堆栈跟踪比Firebug更好。

互联网浏览器

如果你在.NET中开发并使用Visual Studio使用Web开发环境,你可以通过放置断点等直接调试JavaScript代码。JavaScript 代码看起来与调试 C# 或 VB.NET 代码完全相同。

如果您没有此功能,Internet Explorer 还提供了上面显示的所有工具。令人讨厌的是,您不是右键单击Chrome或Firefox的元素功能,而是通过按F12访问开发人员工具。这个问题涵盖了大部分要点。