开发者

Debugging jQuery Mobile injected scripts

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, and that script will also be injected into my main page.

The script does not appear a开发者_JS百科s 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.

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

EDIT:

Just to clarify - The script tag in the "other" page is not an inline script. It is a:

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

Still, it is injected as an inline script to the DOM.

BTW - if I put the script tag in the HTML's HEAD it is not loaded at all.

EDIT 2:

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.

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 :-(

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


The script is appended to document on the fly and therefore it's not normally visible to firebug. There was an add-on that handled debugging dynamically loaded scripts. Inline Code Finder for Firebug but it's last release was in 2009. You probably can use it if you modify the supported versions.

BTW. I belive you should not use that feature of jquery mobile. It's there for a basic support of huge projects with lots of inline script blocks, etc.

You should include your scripts on every subpage and make it work that way

or

Dynamically load your scripts when needed with .getScript() if they're too big to include all the time.

[edit]

Yes, if you put the script in the head it will not be loaded. I repeat: Put the script in the head of EVERY page and bind pageshow of the right page instead of a normal document.ready

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜