[drenwick]

Hi there – can anyone help me work out what is happening with my app.

The pages are loaded dynamically (using ajax) and so is my Javascript. I see the pages and the js files appear in the Resources tab and I can see the content.
However, for the js files I am not able to set any break points. Likewise, I am unable to inspect the div’s in the html.

Any suggestions?

Thanks

dave

[support-michael]

Hi Dave,
Can you share more info to help us with our investigation:
0) GapDebug version (see GapDebug menu>About screen for the version)
1) mobile OS and version (ios 8.0.2, android 4.4.4…)?
2) device(s) you are testing on
3) mobile framework, js frameworks…. used by your app
4) would you be able to provide us an example project that we can use to replicate the issue?

[drenwick]

Sure – I am using;
GapDebug version 2015 Update 1.1
Chrome Version 41.0.2272.89 (64-bit)
Mac OS X 10.10.2

PhoneGap 4.2.0-0.24.1
FrameWork7 1.0.3 http://www.idangero.us/framework7/
jquery-2.1.3

I am testing directly in iOS Simulator running 8.1 (12B407)

Posted example project here;
https://www.dropbox.com/s/rtnhxe3xem6y3pt/gapDebugExample.zip?dl=0

In summary;
FrameWork7 takes care of loading the html page via the href in index.html
<p><a href=”pages/loginAndSignup/login.html”….

This triggers a on.pageInit event in the app js file;

function onDemandScript ( url, callback ) {
callback = (typeof callback != ‘undefined’) ? callback : {};

$$.ajax({
type: “GET”,
url: url,
success: callback,
dataType: “script”,
cache: true
});
}

/ Event listener to run specific code for specific pages
$$(document).on(‘pageInit’, function (e) {
var page = e.detail.page;

switch (page.name) {
case ‘login’:
onDemandScript(‘js/login.js’, function() {
console.log(‘Loaded: js/login.js’);
});
break
};
});

Thanks for helping out..

Cheers

dave

[support-michael]

Dave,
Thx for the quick follow up. Vadim (dev) and I will investigate and share update asap.

[drenwick]

Hi again,
OK – so with help form the FW7 forum, someone suggested that I simply add debugger; to my javascript to break where I need to..
Once I do this, I find that I can set other breakpoints and evaluate variables etc.

That pretty much solves my problem in terms of debugging the js.

My only remaining question is that with the AJAX loaded HTML – I loose all the cool gapDebug interactive tuning features.. is there something I can do here?

Also – I am only getting to see the source html as defined in the app and not the html I have in the simulator (as modified by the js). How do I work with that html?

Thanks

[drenwick]

Opps – OK please ignore that last question. Worked it out..

#novice

Thanks for your help.

dave

[support-vadim]

Hi Dave,

As I see from this stackoverflow thread

http://stackoverflow.com/questions/13129904/how-do-i-debug-javascript-which-was-loaded-via-ajax-specifically-jquery

The only viable way to debug such kind of JS is injecting “debugger” keyword into dynamic resources.

Regards,

Vadim Ridosh

[Author]

Posts