How do I debug Javascript which was loaded via AJAX (specifically 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.

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)

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!

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.

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

Related

Recent Posts