Debugging Ajax code with Firebug

问题

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?

EDITED 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):

<!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:

{'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:

{'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.

回答1:

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).

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.

回答2:

You probably want to use the Net tab and filter the requests for XMLHttpRequests (XHR) only.

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.

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

<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:

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

回答3:

I'm not sure this issue involves the actual JSON that is retrieved. Can you try throwing an error directly in your onSuccess handler and see if it appears in the Firebug console? Something like this:

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

If this is the case, then this issue should be fixed in Firebug 1.7.

回答4:

I would use a combination of the net/console tabs in firefox.

Copy the json results from the Net Tab in Firefox.

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

回答5:

As others have mentioned, view the JSON/Javascript returned by expanding the AJAX URL in the Console tab.

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")}

Then you can use something like the following:

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

This will allow you to execute the returned 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.

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.

回答6:

This one is simple, i allways use FIDDLER to debug my ajax calls.

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.

回答7:

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/

回答8:

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)

回答9:

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.

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.

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.

Thats the best I've been able to get it so far.

回答10:

When you use a library or javascript code that you have loaded it dynamically, you can use the phrase //@ sourceURL=foo.js at the beginning of your javascript code that foo.js is 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.

回答11:

Use "debbuger;" as line of code where you wanna stop execution. In this way the loaded source code will be available in the source section of your debbuger. I know for sure it works on chrome.

来源：https://stackoverflow.com/questions/606794/debugging-ajax-code-with-firebug

标签

ajax

json

firebug