21

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

已编辑 03/04/2009 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');}}

...并再次单击“测试”按钮（无需重新加载页面；-）您得到控制台行，但没有警告框...并且没有错误！！！这是我要调试的那种错误。

4

11 回答 11

18

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

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

于 2009-03-03T15:27:39.393 回答
7

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

附加提示：

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

编辑：

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

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

<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");
  }
});
于 2009-03-03T16:04:06.607 回答
1

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

从 Firefox 的 Net Tab 复制 json 结果。

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

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

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

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

于 2011-05-11T22:52:08.840 回答
1

这个很简单，我总是使用FIDDLER 来调试我的 ajax 调用。

Fiddler 是一个 Web 调试代理，它记录您的计算机和 Internet 之间的所有 HTTP(S) 流量。Fiddler 允许您检查所有 HTTP(S) 流量、设置断点以及“摆弄”传入或传出数据。Fiddler 包括一个强大的基于事件的脚本子系统，并且可以使用任何 .NET 语言进行扩展。

于 2011-05-12T13:15:04.003 回答
1

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

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

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

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

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

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

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

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

于 2011-05-12T12:29:22.590 回答
1

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

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

如果是这种情况，那么这个问题应该在 Firebug 1.7中修复。

于 2011-05-11T07:29:42.203 回答
0

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

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

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

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

于 2012-02-21T11:42:08.850 回答
0

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

于 2009-03-03T15:26:06.930 回答
0

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

于 2011-05-12T13:59:56.003 回答
0

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

于 2013-08-02T01:39:46.433 回答
-1

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

于 2013-07-16T06:48:40.017 回答