<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

Tags:

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.

543

asked Mar 03 '09 15:03

Erico Lendzian

1 Answers

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.

198

answered Sep 18 '22 14:09

Bryan A

Related questions
                            
                                How to code an artificial neural network (Tic-tac-toe)? [closed]
                            
                                Is there a reason why software developers aren't externalizing authorization?
                            
                                How to programmatically convert SVG to PDF on Windows?
                            
                                Drawing a transparent button
                            
                                JAVA element.getElementsByTagName Restrict to Top Level
                            
                                How can I make my form resize more smoothly?
                            
                                Getting values from associative array
                            
                                Custom choices in JavaScript confirm dialog
                            
                                What is a "Sync Block" and tips for reducing the count
                            
                                Where can I find some good open source Android games to accelerate the learning process? [closed]
                            
                                What are "Content Files" (in Visual Studio : Setup Project : File System
                            
                                URL rewriting in PHP without htaccess

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With