<p>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?</p> <hr> <p>EDITED 03/04/2009 15:05</p> <hr> <p>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):</p> <pre class="prettyprint"><code><!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> </code></pre> <p>and then, the contents of the data.json file is this:</p> <pre class="prettyprint"><code>{'func':function(){console.log('loaded...');alert('hey');}} </code></pre> <p>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:</p> <pre class="prettyprint"><code>{'func':function(){console.log('loaded...');alerts('hey');}} </code></pre> <p>...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.</p>

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

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.

What is firebug debugging tool?

The Firebug tool lets developers inspect, edit, and debug code in the Firefox browser as well as monitor CSS, HTML, and JavaScript in webpages.

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.

Debugging Ajax code with Firebug

Tags:

Erico Lendzian

People also ask

1 Answers

Bryan A

Recent Activity

Donate For Us

Debugging Ajax code with Firebug

Tags:

Erico Lendzian

People also ask

1 Answers

Bryan A

Related questions

Recent Activity

Donate For Us