Home/ Questions/Q 8764789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:07:14+00:00

I have changed my coding style with more complex projects to loading pages (And

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)
    • 0