调试 Javascript 代码 [关闭]答案

【问题标题】：Debugging Javascript code [closed]调试 Javascript 代码 [关闭]
【发布时间】：2011-04-14 17:38:43
【问题描述】：

调试 javascript 的最佳方法是什么？我目前正在使用带有最新 Firebug 的 Firefox 4。我喜欢 Firebug，DOM 和调试控制都很好。不幸的是，它并不总是报告错误。我的 javascript 应用程序将停止工作（崩溃），并且控制台 -> 错误（或全部）选项卡将为空白。所以我必须通过调试器，设置断点并单步执行代码。有时单步执行代码并不像您想象的那么直观（有时它会跳转到 jQuery 代码或其他一些库）。可能会很痛苦。

我总是修复错误，我只是希望有更快的方法来修复。在错误发生时被告知可以让我的工作进行得更快...

还有比 Firebug 更好的工具吗？ Firebug 是否需要一个设置来始终报告错误？我应该使用其他浏览器进行调试吗？

【问题讨论】：

好问题 - 我也遇到了这个问题。我从未研究过解决方案，但我也对 Firebug/Firefox 不报告异步调用（回调）时发生的 Javascript 错误感到恼火。我总是在回调中放置多个断点，并通过消除找出它正在破坏的部分。
@Hari 真的吗？我的萤火虫确实报告了异步调用中的错误。也许您以某种方式将其关闭？
不只是异步调用，定期调用未定义变量类型的函数时不会报告异常......有时。
我在不同地方的不同盒子上的不同版本中遇到过类似的问题。无论出于何种原因，它经常会死掉而不是抛出有用的异常……最糟糕的是，您通常甚至都没有意识到。

标签： javascript jquery debugging firefox firebug

【解决方案1】：

你应该试试 Chrome 的开发者工具，这是我一直使用的。 DOM 检查器、本地数据库资源跟踪、cookie 等网络活动、js 调试器、时间线、分析、审计。我觉得真的很好看。

【讨论】：

Chrome 正在正确报告我的所有错误！！谢谢。我会想念我心爱的萤火虫...

【解决方案2】：

最近，我在 IE 开发工具方面取得了很大的成功。它们内置于 Javascript 调试器中，允许您像在 Visual Studio 中一样设置断点并非常轻松地单步执行它们，并且还显示“立即”窗口。

对微软来说很不错；）

【讨论】：

IE9 的调试工具比 Firebug 更方便、更好，虽然在实现上还有很多 bug。

【解决方案3】：

您应该考虑使用 Develop menu enabled 尝试 Safari。我也喜欢 Firebug，但有时它不是适合这项工作的工具。

它有一个调试器和一个分析器，它可以帮助你。

【讨论】：

【解决方案4】：

在我看来，Firebug 仍然是目前调试 JavaScript 的最佳工具（尽管我必须承认 webkit 中的 Web Inspector 正在迎头赶上）。

如果您担心控制台选项卡为空白（由于刷新或其他操作），您可以在控制台选项卡中点击“保留”。

这不会清除您扔到控制台的任何日志。

另外，我不确定您所说的“它并不总是报告错误”是什么意思。您登录到控制台的所有错误都会显示出来。不过，您可以将这些日志语句放入您的代码中。

您还可以打开 ES5 中可用的“严格模式”，它将进一步提示您警告和静默错误。

编辑：

另外，我强烈建议您通过 JSLint 运行您的代码。这也有助于解决一些问题。

【讨论】：

"persist" 不能解决丢失错误的问题。我指的错误就像在 a 未定义时调用 a.b 。有时它们会出现在 Firebug 控制台中，有时 javascript 会停止运行，您必须找出原因……也许这只是我的 Firebug？虽然早期版本和 FF3.6 和 FF4 一直在发生这种情况
你可以使用“try-catch”。此类错误可以在 catch 中转储到控制台。但是，请谨慎使用 try-catch。他们创建自己的本地范围并扩展范围链。甚至在“try-catch”之外定义的局部变量也更进一步。或者，如果您不想针对此类错误更改代码，JSLint 似乎是要走的路。
这可能会起作用，但 Chrome 会按您的预期工作。一般来说，Chrome 的 javascript 调试器似乎比 Firebug 好得多。

【解决方案5】：

JavaScript 不是最容易调试的语言，这是肯定的。但我认为 Firebug 是更好的调试工具之一。听起来您遇到了一些奇怪的错误。但是在调试时，如果需要，可以使用“Step Out”和“Step Over”按钮跳过调试 jQuery 函数。这应该可以帮助您更快地找到问题。

【讨论】：

【解决方案6】：

您得到的错误（当代码停止执行且没有错误时）类似于 javascript 的段错误 - 当您的脚本试图执行不可能的事情时，它会发生，并且浏览器必须介入并停止它。您不会收到错误消息，因为它不会导致错误 - 它正在做一些应该完全合法的事情，但在这种情况下不是 - 例如访问空指针。调试它的唯一方法是逐行通过代码。但是，其他具有明显不同的 javascript 实现的浏览器在发生这种情况时可能会产生您可以检测到的错误。虽然我不想这么说，但 Internet Explorer 在这方面偶尔对我有用，因为它确实报告了一些导致 firefox 死机的错误。

总结一下：尝试使用不同的浏览器，如果这不起作用，那么你就不走运了。

【讨论】：

【解决方案7】：

我在 Firebug 上取得了巨大的成功，但也遇到了一些成长的烦恼。

JavaScript 是一种允许一些静默失败的语言。 jQuery 也会让调试变得痛苦。

有时我会让我的 JavaScript 更加冗长，直到我让它正常工作。并且逐行调试点，只是运行到下一个调试点，调试到jQuery是没有用的。还可以使用 console.log() 检查 JS 中的值非常有帮助

简洁 - 难以调试：

    function doSomething(cost, sale, myArray, span) {
      var id = $(span).attr("id");
      var isProfit = sale > cost;
      return isProfit ? myArray[id] : isNew;'
    }

扩展 - 更容易调试

function doSomething(cost, sale, myArray, span) {
  console.log("cost: " + cost);
  console.log("sale: " + sale);
  console.log("span: " + span); 

  debugger;
  var id = $(span).attr("id");

  debugger;
  var isProfit = sale > cost;

  debugger;
  var arrayVal = myArray[id];

  return isProfit ? arrayVal  : isNew;'
}

【讨论】：

Firebug 有时只是不报告所有错误，将代码传播出去也无济于事。