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

Question

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 scrip

Answer 1

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:

    
My page's content
    

    

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)