CSS/JS Not Loading in iOS Debugger

[steveracine]

Hello all:

I’m brand new to the world of Monaca and Onsen, so I am having some trouble getting my project going.

I created a project from the starter template with the slide navigation, and have left it basically “as is”. The only change that I made was to install the Onsen UI CSS Component to the project. When viewing the project in the cloud based IDE viewer, everything looks as it should (see attached screenshot). However, when loading the project on the iOS debugger on an iPhone 6 there is no styling and, apparently, no JS.

It also is showing a message of “Waiting for Monaca Debugger connection…” in the inspector.

Any assistance would be appreciated.

[Andi]

@steveracine how are you running the debugger, via Internet or in local using Localkit/CLI? If in local, are you using WiFi or USB connection? (I would say the second one as you are talking about inspector)

[steveracine]

@Andi thanks for the reply. I’m using the iPhone debugger app over wifi on my home network and the browser based IDE.

When I sign in with my Monaca login information it syncs the app to the phone and launches. Am I missing a step? Do I need to build the app before debugging on a mobile device with the debugger app?

Hope I’m being clear, this is the first project that I’m using Monaca, PhoneGap, and Onsen.

[Andi]

@steveracine it’s quite clear and you don’t need to build if you are using the debugger (except if you included custom cordova plugins, in that case you need to build a custom debugger). I’m wondering if this happens just with a specific template or with all templates. Could you please try and let me know? Also, could you please tell me which templates are you using? Thank you!

[steveracine]

@Andi I am using the Onsen UI V2 JS Splitter template.

I will try to create a new project with another template and will reply with the results.

Thanks!

[steveracine]

@Andi So I’ve tried a few different things, and I think I narrowed down the problem to the version of Onsen UI that I was including in my project.

When I created a new project using the Navigation template, everything looked good on the mobile debugger and the cloud based. Then I installed the Onsen UI package with the newest 2.0 RC and it broke on mobile. When I moved it back to version 1.3.17 it worked on the mobile debugger.

So, it looks like the problem is with the newest 2.0 RC of Onsen UI.

[Andi]

It’s because the basic template doesn’t get the resources from Monaca but it’s already included in lib dir. If you want to use internal Monaca’s version, you need to remove all the references of the lib directory in index.html :)