Search jQuery

jQuery Forum

Debugging scripts in local pages spread over multiple files - How do I do this?!

in jQuery Mobile • 10 years ago

Hi folks,

I'm new to jQM and I'm running into a frustration issue. I'm trying to do some debugging of a prototype I'm putting together, and my layout is like this:

index.htm - Login page, app landing point

page2.htm - We move here using $.mobile.changePage(...);

For clarity, I'm using one file per page. That is, the index.htm file stores just the index page, the page2.htm file stores just the page2 page, etc.

For the purposes of keeping code clean and effective, I am putting page-specific code inside the appropriate div. This works great, keeps everything neat and tidy, etc.

Things look like this, roughly:

<div data-role="page" id="mainPage">
<script type="text/javascript">
function foo() {
bar();
}
</script>
<div data-role="header">
<h1>Login Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<a href="" data-role="button" id="loginButton">Login</a>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

Same thing on page2.htm.

The problem I'm running into is, well.. How do I debug the scripts on page2? They just get injected directly into the DOM; Chrome's Dev tools can't see it, and that makes it very hard for me to work throught he javascript and tug apart pieces when I run into problems.

I've spent a while googling this but haven't come up with any answers short of just doing a javascript-based document.append so that the script shows up as text in the ad-hoc HTML for the viewport. That seems like a really clumsy way to do things and i'd like to avoid that because it'll be a pain to update things in and out as I do debugging.

Anyone?

Replies(8)

kvonroeder

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

Bump

watusiware

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

Most of us just load all of our scripts from a common <head> section (that is served on every page), using <script src=...> tags.

I realize you want to be "efficient" (though I think it can be argued you really aren't...) but just during debugging, why don't you do that? It will make your life so much easier.

kvonroeder

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

Yea I guess I can just do that. Coming from Flex I'm used to scoping code within a view and exposing it deliberately; the idea of just loading all of my scripts in the head and having them active in every view seems kinda wasteful, unless I'm misunderstanding.

Just to clarify, even if i'm segmenting my pages across multiple real files (i.e. indexPage in index.htm and quotesPage in quotes.htm), the common (best?) practice is to just load it all in the index.htm head (since that's the firstload and thereby the only one that matters) for debugging?

Kevin B

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

The architecture of a jquerymobile app typically consists of one of two or possibly a mix of two techniques.

One single file with multiple pages

Multiple files one or more pages per file.

In both cases, the landing page may be different based on where the user enters the app unless you force or redirect the user to a particular landing page. Either way, the app initialization scripts(jquery.js and jquerymobile.js) need to be present on every file so that regardless of where the user enters the application, the initialization scripts get ran. Page specific code ~~should~~ can exist within the page itself (<div data-role="page"></div>) if the page is going to be loaded via ajax, such as in your case. However, it is usually easier to debug if you don't have any page specific code and all pages are handled by the initialization script using event delegation.

I usually simplify the whole thing by having my initialization script handle the entire application rather than have page specific code on each page. This makes maintenance very easy to manage. all i have to do is include the initialization script in the <head> of every file. If the file is being loaded by ajax as a page, the initialization script won't run because jQuery mobile only pulls the page it needs from the requested file rather than pulling everything in the file.

-- Kevin

kvonroeder

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

Page specific code should exist within the page itself (<div data-role="page"></div>) if the page is going to be loaded via ajax, such as in your case.

Ok, that's what I've been looking at. My question is, once I've been putting that page specific code in, how do I debug it? What sort of tools are people using to do this? I've been doing most of my experimentation and investigation with Chrome Developer Tools, and as far as I can tell there's no way for me to utilise the JS debugger when the code inside the data-role="page" div gets executed.

It just vanishes into the invisible JS ether where it can be invoked, leaving me wondering how to dig my hands in there and manipulate and debug it.

Kevin B

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

It is going to be difficult to debug that way, just keep in mind that once the page is loaded, it is part of the current page. If an error occurs, you may still be able to get to the line that failed from the chrome debugger. If you can't, i'm not sure what to suggest other than going to that page directly to see if the same error occurs.

-- Kevin

Kevin B

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

I didn't state my first response exactly as i meant for it to be, i'll rephrase it.

...

In both cases, the landing page may be different based on where the user enters the app unless you force or redirect the user to a particular landing page. Either way, the app initialization scripts(jquery.js and jquerymobile.js) need to be present on every file so that regardless of where the user enters the application, the initialization scripts get ran. Page specific code can exist within the page itself (<div data-role="page"></div>) if the page is going to be loaded via ajax, such as in your case. However, it is usually easier to debug if you don't have any page specific code and all pages are handled by the initialization script using event delegation.

-- Kevin

watusiware

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

10 years ago

Every page should have identical <head> content, except for the <title>.

So, most people use some sort of server-side include to serve the <head>. For example, if you are writing a Ruby app server-side, you can include this in your layout.erb.

IMO, if you have a lot of page-specific code, you haven't factored your code very well. Most should be common code. (I am not a fan of copy-and-paste spaghetti code.) It shouldn't take a lot of page-specific "glue". In most cases, it's not worth the trouble to separate it out.

There are specific cases that are different. For example, maybe you need a large component only on a specific page, for example.

Top Reply

Response title

Attachments

jQuery Forum

Debugging scripts in local pages spread over multiple files - How do I do this?!

Replies(8)

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Re: Debugging scripts in local pages spread over multiple files - How do I do this?!

Statistics

Tags

Actions