json 使用 Firebug 调试 Ajax 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/606794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debugging Ajax code with Firebug
提问by Erico Lendzian
I've a couple of problems debugging code returned in an Ajax call - specifically, a function returned in json (errors don't get trapped in Firefox) - up to the point where I started debugging these problems in Internet Explorer (I think it's a firefox related problem, as Venkman doesn't detects those errors either) Do you know of any way to debug code returned in json from an Ajax call?
我在调试 Ajax 调用中返回的代码时遇到了一些问题——特别是，在 json 中返回的函数（错误不会被困在 Firefox 中）——直到我开始在 Internet Explorer 中调试这些问题（我认为是一个 firefox 相关的问题，因为 Venkman 也没有检测到这些错误）你知道有什么方法可以调试从 Ajax 调用返回的 json 代码吗？
EDITED 03/04/2009 15:05
已编辑 03/04/2009 15:05
Thanks to all for your responses, but I think I didn't explain myself well enough. I know enough of Firebug to do basic debugging, but my problem happens when I fetch some code in an Ajax call that has a problem with it. Let's say we have the following HTML file (you'll need prototype in the same folder to make it work correctly):
感谢大家的回答，但我想我没有很好地解释自己。我对 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>
and then, the contents of the data.json file is this:
然后，data.json 文件的内容是这样的：
{'func':function(){console.log('loaded...');alert('hey');}}
If you load the page in a browser and click the 'Test' button (and everything goes well) you'll get something in the console, and an alert box that says 'hey'. Now change the data.json file to this:
如果您在浏览器中加载页面并单击“测试”按钮（一切顺利），您将在控制台中看到一些内容，以及一个显示“嘿”的警告框。现在将 data.json 文件更改为：
{'func':function(){console.log('loaded...');alerts('hey');}}
...and click the 'Test' button again (no need to reload the page ;-) You get the console line, but no alert box... and no errors!!! this is the kind of errors I'm trying to debug.
...并再次单击“测试”按钮（无需重新加载页面；-）您会看到控制台行，但没有警告框...并且没有错误！！！这是我试图调试的那种错误。
回答by Bryan A
Try clicking on the "Console" panel (it's a tab) and enabling it. You will find that any HTTP requests will be caught along with any information that they contain. I use this in order to view any JSON stored in the request as well as any errors (500/404/etc).
尝试单击“控制台”面板（它是一个选项卡）并启用它。您会发现任何 HTTP 请求都将与它们包含的任何信息一起被捕获。我使用它是为了查看请求中存储的任何 JSON 以及任何错误 (500/404/etc)。
Also be aware that you have to enable the console panel on a per-domain basis. There are usually three subtabs: headers, post, and response. I usually use the post/response tabs quite a bit when I'm debugging my AJAX.
另请注意，您必须在每个域的基础上启用控制台面板。通常有三个子选项卡：标题、帖子和响应。在调试 AJAX 时，我通常会大量使用 post/response 选项卡。
回答by Brian Clozel
You probably want to use the Net taband filter the requests for XMLHttpRequests (XHR) only.
您可能希望使用Net 选项卡并仅过滤 XMLHttpRequests (XHR) 的请求。
Additional tips:
附加提示：
- don't hesitate to console.dir(yourObject)in your code or directly in the console panel. This will give you the complete state and properties of your object.
- check your request/response HTTP headers; sometimes it's just a matter of encoding.
- if you don't know what event/user action triggered this XHR call, you can add console.trace()right before your AJAX call. This way you'll get the complete call stack.
- 不要犹豫，在代码中或直接在控制台面板中使用console.dir(yourObject)。这将为您提供对象的完整状态和属性。
- 检查您的请求/响应 HTTP 标头；有时这只是编码的问题。
- 如果你不知道是什么事件/用户操作触发了这个 XHR 调用，你可以在你的 AJAX 调用之前添加console.trace()。通过这种方式，您将获得完整的调用堆栈。
Edit:
编辑：
Code executed in another context
在另一个上下文中执行的代码
The only way I came up with is surrounding your code with an (ugly) try/catch. I guess it's because the code is executed in another javascript context
我想出的唯一方法是用（丑陋的）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>
This code gives a detailed error message:
此代码给出了详细的错误消息：
ReferenceError: alerts is not defined
I really doubt changing the execution context will solve the problem. I don't know how to this with prototype, but with jquery, it can be done easily:
我真的怀疑改变执行上下文会解决问题。我不知道如何使用原型，但使用 jquery，它可以轻松完成：
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
回答by Jeffery To
I'm not sure this issue involves the actual JSON that is retrieved. Can you try throwing an error directly in your onSuccesshandler and see if it appears in the Firebug console? Something like this:
我不确定这个问题是否涉及检索到的实际 JSON。您可以尝试直接在onSuccess处理程序中抛出错误并查看它是否出现在 Firebug 控制台中吗？像这样的东西：
onSuccess: function() { alerts('hey'); }
If this is the case, then this issue should be fixedin Firebug 1.7.
如果是这种情况，那么这个问题应该在 Firebug 1.7 中得到修复。
回答by Jeff Davis
I would use a combination of the net/console tabs in firefox.
我会在 Firefox 中使用网络/控制台选项卡的组合。
Copy the json results from the Net Tab in Firefox.
从 Firefox 中的网络选项卡复制 json 结果。
Then paste the results into a variable in the console and try executing the offending function.
然后将结果粘贴到控制台中的变量中并尝试执行有问题的函数。
In this case, I pasted this:
在这种情况下，我粘贴了这个：
var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();
When I run this, firebug gives me this error. ReferenceError: alerts is not defined
当我运行它时，firebug 给了我这个错误。参考错误：未定义警报
回答by earcam
As others have mentioned, view the JSON/Javascript returned by expanding the AJAX URL in the Console tab.
正如其他人所提到的，通过在控制台选项卡中展开 AJAX URL 来查看返回的 JSON/Javascript。
Then if you copy that to the run/eval panel of the Console tab (there's an up/down arrow in the bottom right, clicking the up will change it into a textarea on the right hand side, clicking down gives a single line running along the bottom).
然后，如果您将其复制到控制台选项卡的运行/评估面板（右下角有一个向上/向下箭头，单击向上会将其更改为右侧的文本区域，向下单击会显示一行底部）。
If your Ajax call returns: function(){alert("hello")}
如果您的 Ajax 调用返回： function(){alert("hello")}
Then you can use something like the following:
然后，您可以使用以下内容：
x = eval('function(){alert("hello")}')
x();
This will allow you to execute the returned ajax.
这将允许您执行返回的ajax。
To debug with breakpoints use the HTML view to create a tag (using Firebug's HTML view) and then simply paste the code into a function within this tag. You can then set breakpoints and fire it by calling the previous function from the run'/eval panel.
要使用断点进行调试，请使用 HTML 视图创建一个标记（使用 Firebug 的 HTML 视图），然后只需将代码粘贴到此标记内的函数中即可。然后，您可以设置断点并通过从 run'/eval 面板调用前一个函数来触发它。
If this works fine then clearly there's a bug outside of your control, but you could simply workaround that by sending the json back as text/plain, assigning it to a variable and then evaluating it.
如果这工作正常，那么显然存在您无法控制的错误，但是您可以通过将 json 作为文本/纯文本发送回，将其分配给变量然后对其进行评估来简单地解决该问题。
回答by Dementic
This one is simple, i allways use FIDDLERto debug my ajax calls.
这个很简单，我总是使用FIDDLER来调试我的 ajax 调用。
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Fiddler 是一个 Web 调试代理，它记录您的计算机和 Internet 之间的所有 HTTP(S) 流量。Fiddler 允许您检查所有 HTTP(S) 流量、设置断点以及“摆弄”传入或传出数据。Fiddler 包括一个强大的基于事件的脚本子系统，并且可以使用任何 .NET 语言进行扩展。
回答by Luis Siquot
the error you are trying to debug is pretty visible on native firefox console. it is: "tools" - "error console"
of course, you see it after it ocurrs but with an wrong line number (infinite resemblance)
您尝试调试的错误在本机 Firefox 控制台上非常明显。它是：“工具”-
当然是“错误控制台” ，您会在它出现后看到它，但行号错误（无限相似）
回答by Gunner
I know the specific issue mentioned in the post is for firefox. I landed on this page when googling for generally how to debug java script that comes from an AJAX call and I'm sure a lot of others will.
我知道帖子中提到的具体问题是针对 Firefox 的。我在谷歌搜索一般如何调试来自 AJAX 调用的 java 脚本时登陆了这个页面，我相信很多其他人会这样做。
I my case I was returning some HTML that had a script tag in it, if there was for example, a sytax error in the javascript that came down from the AJAX request in firebug you will get no exception, or errors. The AJAX content will just not render.
我的情况是，我返回了一些包含脚本标记的 HTML，例如，如果 JavaScript 中有语法错误，该错误来自于 firebug 中的 AJAX 请求，您将不会收到任何异常或错误。AJAX 内容不会呈现。
In the google chrome built debugger you'll get the error that has been raised, but you'll not be able to step through the code. If you wan't to step though then you'll need to make a dummy page for that.
在 google chrome 内置的调试器中，您将收到已引发的错误，但您将无法单步执行代码。如果您不想跨步，那么您需要为此制作一个虚拟页面。
Thats the best I've been able to get it so far.
这是迄今为止我所能得到的最好的。
回答by Gavin
I use an HTTP Proxy Debugger called fiddler which has always worked fine for debugging my AJAX problems. It captures all HTTP requests and responses for you to view. Its freely available from http://www.fiddlertool.com/
我使用一个名为 fiddler 的 HTTP 代理调试器，它在调试我的 AJAX 问题时一直工作得很好。它捕获所有 HTTP 请求和响应供您查看。它可以从http://www.fiddlertool.com/免费获得
回答by Farshid Saberi
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase //@ sourceURL=foo.jsat the beginning of your javascript code that foo.jsis the name that assign it. debugger will show it with that name. This is true in chrome that I think in firebug. In this case you can place a breakpoint in the dynamically loaded javascript ( or json ) code.
当您使用动态加载的库或 javascript 代码时，您可以在 javascript 代码的开头使用短语//@ sourceURL=foo.js，foo.js是分配它的名称。调试器将使用该名称显示它。这在我认为在萤火虫中的 chrome 中是正确的。在这种情况下，您可以在动态加载的 javascript（或 json）代码中放置一个断点。
