Debugging injected scripts

Debugging injected scripts

Intro:

In jQuery Mobile, I can define "mobile pages" as divs with data-role=page.

These can be stored in other HTML files, and injected ad-hoc into the main HTML page.

In such a div I can put a script tag like:

<div data-role="page" id="some_id">
    
<script type="text/javascript" src="MyScript.js"></script>
    ...

</div>

and that script will also be injected into my main page.

Important note:
I'm writing my scripts in script files and reference them from the HTML (see above snippet).
I'm NOT writing inline scripts in the HTML.

Problem:

The script does not appear as a script tag in my DOM, but rather seems to be injected inline, and thus it does not appear in a standard way in a debugger e.g. FireBug's script panel.

It seems like it's standard jquery (core, not mobile) behavior to remove the script tag from a AJAX-loaded html and eval it inline, instead of leaving the script tag there and letting the browser load it normally.

I don't really fully understand the motives behind this, and it really hampers my debugging options :-(

Has anyone found a normal way to debug these scripts (Hopefully in FF or Chrome) ?


More clarifications:

  1. I'm writing a framework into which "extension modules" will be plugged on customer site and decision which module (i.e. additional "pages" with scripts) to load is a runtime decision. Therefore I have no prior knowledge in my main page which scripts to load, and must defer loading to "module load" time.

  2. My end goal here is to allow "module" developers to debug their scripts. For this I would like a solution where the references script files are available in FireBug/ChromeDevTools like any other script.

I'm using jQuery 1.5.2 (same behavior with 1.5.1) and jQuery Mobile alpha 4 (same with 3)


Thanks in advance,

Ofer