Debugging jQuery scripts for mobile applications

Question

In jQuery Mobile, I can define "mobile pages" as a div using data-role=page .

They can be stored in other HTML files and inserted ad-hoc into the main HTML page.

In such a div I can put the script tag and that the script will also be entered on my main page.

the script is not displayed as a script tag in my DOM, but rather it seems to be entered into a string, and therefore it is not displayed in the standard way in the debugger, for example. FireBug script.

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

EDIT:

Just to clarify. The script tag on the “other” page is not an inline script. It:

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

However, it is introduced as a built-in script in the DOM.

BTW - if I put a script tag in the HTML HEAD, it does not load at all.

EDIT 2:

Additional explanations:

• I am writing a framework in which "extension modules" will be inserted on the client’s site and deciding which module (that is, additional "pages" with scripts) to load is a run-time solution. Therefore, I do not have any prior knowledge on my main page, which are loaded with scripts and should delay loading until the module loads.

• My ultimate goal here is to give module developers the ability to debug their scripts. For this, I would like to get a solution in which script link files are available in FireBug / ChromeDevTools, like any other script.

It seems that the standard jquery (core, not mobile) behavior is to remove the script tag from the loaded AJAX html and eval its built-in, instead of leaving the script tag there and let the browser load it normally.

I really don’t quite understand the motives for this, and it really interferes with my debugging options: - (

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

Answer 1

The script is added to the document "on the fly" and, therefore, is usually not displayed in firebug. There was an add-on that handled debugged dynamically loaded scripts. Inline Code Finder for Firebug , but the last release was in 2009. You can probably use it if you are modifying supported versions.

BTW. I believe you should not use this jQuery mobile feature. This is there for basic support for huge projects with a lot of built-in script blocks, etc.

You must include your scripts on each subpage and make it work this way.

or

Dynamically load your scripts if necessary with .getScript() if they are too large to include all the time.

[edit]

Yes, if you put the script in the head, it will not load. I repeat: put the script at the top of pageshow page and pageshow to the right page instead of the usual document.ready