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?