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

Jquery Ajax Xmlhttprequest Firebug Google Chrome-Devtools

Jquery Problem Overview

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 */ });

$('#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?

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

UPDATE

The accepted form is now with a # (hashtag) rather than @ (at symbol)

The syntax was changed to to avoid conflicts with IE conditional compilation statements and some other issues (thanks to Oleksandr Pshenychnyy and Varunkumar Nagarajan for pointing this out)

//#sourceURL=/path/to/file

This can really be any string that helps you identify the block of code.

An additional good point from JMac:

> For me, the js file was being displayed in the sources list within a > group called "(no domain)". Might be worth mentioning as I missed it > at first!

ORIGINAL

I struggled with the above for about a week before running across this article. It really does work perfectly for my development environment (Chrome 22 as I write this).

> Firebug also supports developer-named eval() buffers: just add a line to the end of your eval(expression) like: > //@ sourceURL=foo.js

For example, given this simple html document:

<!DOCTYPE html>
<html>
<body>
    <p>My page's content</p>
    <div id="counter"></div>
    <script type="text/javascript">
        //if this page is loaded into the DOM via ajax 
        //the following code can't be debugged 
        //(or even browsed in dev-tools)
        
        for(i=0;i<10;i+=1) {
            document.getElementById('counter').innerText = i;
        }

        //but if I add the line below
        //it will "magically" show up in Dev Tools (or Firebug)

        //@ sourceURL=/path/to/my/ajaxed/page
    </script>
<body>
</html>

Things I haven't yet discovered:

Does this have to be done for every script block for inline scripts?
Does it have to be the last line of the script block? (The article would suggest the answer to this is yes)

Solution 3 - Jquery

This problem looks like it has now been in general solved using the new pragma:

//# sourceURL=filename

Note the 'hash' # rather than the 'at' @ symbol.

By including that line in your source, a reference to it will show up in the debugger!

Solution 4 - Jquery

As you have already mentioned, you can use //@ sourceURL. Chrome doesn't seem to be supporting //@ sourceURL for inline scripts. It does work on eval expressions. This HTML5 article on source maps gives more details about naming eval blocks and naming of any anonymous functions in your code.

Instead of using eval, you can try embedding a script tag or JSONP may be.

Content Type	Original Author	Original Content on Stackoverflow
Question	BLSully	View Question on Stackoverflow
Solution 1 - Jquery	Squeee123	View Answer on Stackoverflow
Solution 2 - Jquery	BLSully	View Answer on Stackoverflow
Solution 3 - Jquery	sdw	View Answer on Stackoverflow
Solution 4 - Jquery	Varunkumar Nagarajan	View Answer on Stackoverflow