使用 Firebug 调试 Ajax 代码答案

【问题标题】：Debugging Ajax code with Firebug使用 Firebug 调试 Ajax 代码
【发布时间】：2010-10-11 01:04:17
【问题描述】：

我在调试 Ajax 调用中返回的代码时遇到了一些问题 - 特别是在 json 中返回的函数（错误不会在 Firefox 中陷入困境） - 直到我开始在 Internet Explorer 中调试这些问题（我认为这是一个与 firefox 相关的问题，因为 Venkman 也没有检测到这些错误）你知道有什么方法可以调试从 Ajax 调用返回的 json 代码吗？

编辑于 2009 年 3 月 4 日 15:05

感谢大家的回复，但我认为我解释得不够清楚。我对 Firebug 的了解足以进行基本调试，但是当我在 Ajax 调用中获取一些有问题的代码时，就会出现问题。假设我们有以下 HTML 文件（您需要将原型放在同一文件夹中以使其正常工作）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script>
function ajaxErrorTest()
{
    new Ajax.Request('data.json', {
           'method': 'get',
           'onSuccess': function(data){
           if(data.responseJSON.func)
           data.responseJSON.func();}});
}
</script>
<input type="button" value="test" onclick="ajaxErrorTest();" />
</body>
</html>

然后，data.json 文件的内容是这样的：

{'func':function(){console.log('loaded...');alert('hey');}}

如果您在浏览器中加载页面并单击“测试”按钮（一切顺利），您将在控制台中看到一些内容，以及一个显示“嘿”的警告框。现在将 data.json 文件更改为：

{'func':function(){console.log('loaded...');alerts('hey');}}

...然后再次单击“测试”按钮（无需重新加载页面；-）你得到控制台线，但没有警告框......而且没有错误！！！这是我正在尝试调试的错误类型。

【问题讨论】：

我意识到这是一个老问题，但您找到解决方案了吗？我有同样的问题 - 使用 jQuery 加载 js 页面（例如 $.getScript("aScript.js")，请参阅docs.jquery.com/Ajax/jQuery.getScript） - 'aScript' 页面似乎无法用于调试......跨度>
呸，我也有同样的问题。
同样的问题！ .任何人都找到了解决方案
为什么要运行远程获取的函数：\

标签： ajax json firebug

【解决方案1】：

我使用了一个名为 fiddler 的 HTTP 代理调试器，它在调试我的 AJAX 问题时一直运行良好。它捕获所有 HTTP 请求和响应以供您查看。它可以从http://www.fiddlertool.com/免费获得

【讨论】：

【解决方案2】：

尝试单击“控制台”面板（它是一个选项卡）并启用它。您会发现任何 HTTP 请求都将与它们包含的任何信息一起被捕获。我使用它来查看存储在请求中的任何 JSON 以及任何错误（500/404/等）。

另外请注意，您必须在每个域的基础上启用控制台面板。通常有三个子选项卡：标题、帖子和响应。在调试我的 AJAX 时，我通常会使用很多帖子/响应选项卡。

【讨论】：

+1 我只是要提到网络和脚本选项卡对于我来说调试 ajax 一直很好

【解决方案3】：

您可能希望使用 the Net tab 并仅过滤 XMLHttpRequests (XHR) 的请求。

其他提示：

不要犹豫，在您的代码中或直接在控制台面板中console.dir(yourObject)。这将为您提供对象的完整状态和属性。
检查您的请求/响应 HTTP 标头；有时这只是编码问题。
如果您不知道触发此 XHR 调用的事件/用户操作，您可以在 AJAX 调用之前添加console.trace()。这样您将获得完整的调用堆栈。

编辑：

在另一个上下文中执行的代码

我想出的唯一方法是用（丑陋的）try/catch 包围您的代码。我猜是因为代码是在另一个javascript context中执行的

<script>
function ajaxErrorTest()
{
    new Ajax.Request('data.json', {
           'method': 'get',
           'onSuccess': function(data){

           try{
             if(data.responseJSON.func)
             data.responseJSON.func();}});
           } catch (err) {
             console.dir(err);
           }
}
</script>

这段代码给出了详细的错误信息：

ReferenceError: alerts is not defined

我真的怀疑更改执行上下文能否解决问题。我不知道如何使用原型，但是使用 jquery 可以轻松完成：

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

【讨论】：

仅供参考：Firebug 控制台页面的链接已更改为 getfirebug.com/wiki/index.php/Console_API

【解决方案4】：

我不确定此问题是否涉及检索到的实际 JSON。您可以尝试直接在您的onSuccess 处理程序中抛出错误并查看它是否出现在 Firebug 控制台中吗？像这样的：

onSuccess: function() { alerts('hey'); }

如果是这种情况，那么这个问题应该是 Firebug 1.7 中的fixed。

【讨论】：

【解决方案5】：

我会在 Firefox 中使用网络/控制台选项卡的组合。

从 Firefox 的 Net Tab 复制 json 结果。

然后将结果粘贴到控制台中的变量中并尝试执行有问题的函数。

在这种情况下，我粘贴了这个：

var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();

当我运行它时，萤火虫给了我这个错误。 ReferenceError：未定义警报

【讨论】：

【解决方案6】：

正如其他人所提到的，通过在控制台选项卡中展开 AJAX URL 查看返回的 JSON/Javascript。

然后，如果您将其复制到控制台选项卡的运行/评估面板（右下角有一个向上/向下箭头，单击向上会将其更改为右侧的文本区域，单击向下会给出一个沿着底部的线）。

如果您的 Ajax 调用返回：function(){alert("hello")}

然后你可以使用类似下面的东西：

x = eval('function(){alert("hello")}')
x();

这将允许您执行返回的 ajax。

要使用断点进行调试，请使用 HTML 视图创建一个标记（使用 Firebug 的 HTML 视图），然后简单地将代码粘贴到该标记内的函数中。然后，您可以设置断点并通过从 run'/eval 面板调用上一个函数来触发它。

如果这工作正常，那么显然有一个错误超出了您的控制范围，但您可以简单地通过将 json 作为文本/纯文本发送回，将其分配给变量然后对其进行评估来解决该问题。

【讨论】：

【解决方案7】：

这个很简单，我一直用FIDDLER 调试我的 ajax 调用。

Fiddler 是一个 Web 调试代理，它记录您之间的所有 HTTP(S) 流量电脑和互联网。提琴手允许您检查所有 HTTP(S) 流量、设置断点和“小提琴” 与传入或传出数据。 Fiddler 包含一个强大的基于事件的脚本子系统，以及可以使用任何 .NET 进行扩展语言。

【讨论】：

【解决方案8】：

您尝试调试的错误在本机 firefox 控制台上非常明显。它是：“工具”-“错误控制台”
当然，你会在它发生后看到它，但行号错误（无限相似）

【讨论】：

【解决方案9】：

我知道帖子中提到的具体问题是针对 Firefox 的。当我在谷歌上搜索一般如何调试来自 AJAX 调用的 java 脚本时，我登陆了这个页面，我相信很多其他人都会这样做。

在我的情况下，我返回了一些其中包含脚本标记的 HTML，例如，如果 javascript 中的语法错误源自 firebug 中的 AJAX 请求，您将不会收到任何异常或错误。 AJAX 内容将不会呈现。

在 google chrome 构建的调试器中，您将收到已引发的错误，但您将无法单步执行代码。如果您不想跨步，那么您需要为此创建一个虚拟页面。

这是迄今为止我能做到的最好的。

【讨论】：

【解决方案10】：

使用“调试器；”作为您想要停止执行的代码行。这样，加载的源代码将在调试器的源代码部分中可用。我确定它可以在 chrome 上运行。

【讨论】：

【解决方案11】：

当您使用动态加载的库或 javascript 代码时，您可以在 foo 的 javascript 代码开头使用短语 //@ sourceURL=foo.js .js 是分配它的名称。调试器将使用该名称显示它。这在我认为在萤火虫中的 chrome 中是正确的。在这种情况下，您可以在动态加载的 javascript（或 json）代码中放置断点。

【讨论】：