如何在 Firebug 中调试脚本？答案

【问题标题】：How to debug scripts in Firebug?如何在 Firebug 中调试脚本？
【发布时间】：2011-01-15 10:45:31
【问题描述】：

我无法在 Firebug 中正确查看脚本，每个脚本都显示在一行中。如下图所示：

提前谢谢你！

【问题讨论】：

【解决方案1】：

此脚本已通过删除所有无关的空格进行了缩小。

您无法轻松调试此类脚本。

您自己编写且未压缩或压缩的脚本通常会出现在多行上，并且可以进行调试。

【讨论】：

【解决方案2】：

对于您自己的脚本，只需调用：

console.log(someObject);

我通常会在“控制台”选项卡上闲逛，查看出现了哪些错误或记录的项目，或者使用控制台本身输入我想要运行的代码。

我从不使用“脚本”选项卡。

如果你只是想漂亮地查看代码，请使用美化器：jsbeautifier.org

【讨论】：

谢谢！正是我正在寻找的。span>
你在开玩笑吧？脚本选项卡是迄今为止最有用的萤火虫选项卡。您可以介入并调试您的代码、设置监视、检查变量等。基本上它可以让您看到您的代码、生活和呼吸；您可以即时修改该代码，以测试您认为它应该如何工作的假设。我很抱歉，但只是把所有这些都吹掉并说 console.log 已经足够了......疯狂！
使用控制台选项卡和 DOM Inspector 进行调试对我来说工作得很好，而且故障最少。我不使用“脚本”，因为我记得我遇到了太多问题。也许现在好多了？
@Justin Ethier：但如果代码被缩小，这将不起作用，就像我们在这里讨论的问题一样。或者您知道使用“脚本”选项卡的解决方法吗？（例如，编写 Greasemonkey 脚本时的常见问题。）
@hheimbuerger - 很公平，尽管如果您出于调试目的需要它，通常可以使用非缩小版本。或者您可以使用此答案提到的 jsbeautifier 生成它。然后，您只需换入非缩小版本以用于调试。回到我原来的观点，简单地忽略“脚本”选项卡就等于忽略了 FireBug 提供的最强大的功能。

【解决方案3】：

脚本编写者会缩小变量名称并经常将其更改为难以理解的字母数字名称，主要是希望脚本的可读性最低，这样就不会有人复制他们的代码/逻辑，因为使用 firebug 和类似的东西可以轻松做到这一点。这样的脚本调试起来真的很痛苦，而且你几乎没有机会理解这个脚本。无论如何，一切顺利。

你有没有试过在这个唯一可用的行上设置断点来调试它？

【讨论】：

缩小对于减少 JavaScript 的下载大小也很有用，从而使页面加载更快。
是的，正确的基本目标是缩小并将脚本合并为一个页面加载时间较短，我没有在这里详细提及，因为该问题与调试缩小脚本有关。谢谢你也提到它
@Umair：..basically wanting the script to be least human readable so that no one copies their code/logi。如前所述，缩小的主要原因是大小而不是安全性。否则 jQuery 或其他库提供商将不会首先提供未缩小的版本供下载。