How do I debug Javascript which was loaded via AJAX (specifically jQuery)

jquery ajax xmlhttprequest firebug google-chrome-devtools
BLSully picture BLSully · Oct 29, 2012 · Viewed 18.4k times · Source

I have changed my coding style with more complex projects to loading pages (And their embedded scripts) "on demand" recently. However, it is difficult to debug those scripts as when they are loaded like:

jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });

or

$('#some-container').load('/myOtherPage');

These scripts run perfectly, but if I'm debugging, how can I set breakpoints in these dynamically loaded pages and scripts?

Answer

Squeee123 picture Squeee123 · Oct 29, 2012

Add this to your js files where you want it to break:

debugger;

Then step into/over/out like any other debugger.

Works for dynamically loaded scripts and pages. Only works in Chrome as far as I know.

Related questions

How can I upload files asynchronously?

I would like to upload a file asynchronously with jQuery. Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

Read More
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access

I'm using .htaccess to rewrite urls and I used html base tag in order to make it work. Now, when I try to make an ajax request I get the following error: XMLHttpRequest cannot load http://www.example.com/login.…

Read More
jQuery has deprecated synchronous XMLHTTPRequest

Like many others, my website is using jQuery. When I open the developer tools, I see a warning that says that XMLHTTPRequest is deprecated because of its detrimental effects to the end user's experience. I went on and read part …

Read More