jquery mobile application works in chrome simulator but not in actual device - jquery-mobile

We have a ASP.net web application integrated with DotNetNuke.
The mobile version uses jQuery mobile 1.6.X.
While trying to test the application it works well in Chrome simulator(our staging environment is publicly exposed). But it does not work in any of the actual device.
Can anyone suggest how to debug this ?

For Android you can attach the device to the pc and go to chrome-> developer tools -> inspect devices
Make sure your phone is set to developers mode with usb debugging on.
For iOS you can attach your phone to a mac and open safari, develop menu and then the device you want to inspect.
There you will find the javascript console, source, style and everything you normally need for website debugging.

Related

remote debug chrome on iphone using windows

I know to debug mobile safari you'll need a mac, but is it possible to debug ios version of chrome on a windows machine (via a usb cable)? seems like a simple question, but for some reason I can't find anything on it using google. everything I find always seems to point to debugging mobile safari via mac or debugging mobile chrome for mac users.
FYI: I plan on getting the device, but I need to know if the aforementioned is possible before getting the iphone.

Debugging PhoneGap on Device

Normally I'm a JEE guy but these days I'm working on a mobile app. I chose PhoneGap because there are not so many needs to UI and I thought this would be the easiest way to serve the app on many platforms.
I'm wondering if my setup is good and if it's possible to get console output when running on the device. I'm working on MacOS and iPhone6.
I installed PhoneGap and Cordova via npm and serving the files with phonegap serve.
For local debugging I'm using the chrome plugin "Ripple".
For debugging on the device I'm using the PhoneGap Developer App from the AppStore, together with weinre on my Laptop to get some debugging data. In weinre I can see everything except console outputs. Is this normal? Or any idea how I could get the console to weinre, too?
I also found some tutorials on the web using XCode and some native iPhone emulator but didn't get this working yet. Which way is the more preferable way of debugging on device?
You don't need any tool for debugging cordova app. For iOS just start the app in stimulator and start safari. In safari go to Develop > 'your pc name' > ios simulator.
http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
For Android run the app in your device and in the chrome go to http://chrome://inspect/#devices
Weinre is quite old and should not be be used anymore, instead, you want to use the remote debugging tools in your browser. For iOS, you can use Safari to debug your Cordova app. I've got a full article here, https://dzone.com/articles/overview-mobile-debugging, but the process involves doing one setting on your mobile device, and then simply opening up Safari and going to the debug menu. You can also do this with Chrome and Android apps.
Another option is GapDebug (https://www.genuitec.com/products/gapdebug/) which lets you do iOS and Android together in one Chrome tab.

How to run JQuery mobile application on Android Emulator?

Am a new comer in JQuery mobile.I developed a simple application in JQuery Mobile using Netbeans and run successfully on desktop browser.But I want to check its fit for mob screen.So I want to run that app on Android Emulator.I just run Android emulator but I dont know how to call my project from where and how?please help me...Thanks in advance.
You will need to launch your web browser under your emulator and then connect to your server. If you are running your jquery mobile web site on a local development machine, you can likely connect to it via IP address and port
Example:
http://192.168.33.10:65637
Krishna to be able to execute jQuery mobile as a android/iPhone app you need a wrraper framework like phonegap/cordoba (cordoba is its new name.
This is an excellent tutorial for windows platform. In case of iMac you will find more help (tutorial) on phonegap developer pages.
Basically phonegap acts as wrapper between HTML/JS and rest of mobile platform. Because of that you must create separate version for android and separate version for iPhone. It will also give you access to phone hardware like camera, compass etc.
If you need more help give me a comment and I will try to help you as best as I can.
First of all host your created website into IIS or IIS7, for that copy paste your website folder into wwwroot folder in inetpub folder in c drive. this folders will be available after installing iis or iis7, after doing this go to your desktop browser(ie, opera, google chrome, etc).
then type this, "localhost/yourWebsitefolderName/" then press enter, if your website is opened in your local browser then you can try below thing to oopen it in your emulator.
Start your android emulator, in emulator open the mobile browser, then type
"10.0.2.2/yourWebsitefolderName/"

Debugging web app in iPad Simulator

I am developing a web app for iPad and testing it on Safari on Mac and Safari on iPad Simulator. Now there are some issues with CSS in iPad Simulator which work quite well in Safari on Mac.
Now my question is,
Is there a powerful debugging tool for Safari in iPad Simulator?
When running safari in an XCode device simulator, the desktop Safari (v6) Develop menu shows those devices. From there, you can fire up the developer tools (DOM browser etc.) for the mobile browser. This helped me debug an mobile safari css issue without hardware.
Note: As of iOS6 this is not the correct way of doing remote debugging, leaving this answer for historical reasons but you should look into remote inspection with Safari, here is a good article: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector
Have a look at this, (a bash script I wrote) https://gist.github.com/2241976. It will allow you to open the iPad simulator and run Webkit's remote inspector, which will look just like this.
iWebInspector is quite a powerful tool for the iOs simulator's Safari.
It uses the same inspector as Chrome and it works nicely (I've used it myself and found it really helpful).
From their website
iWebInspector is a free tool to debug, profile and inspect web
applications running on iOS Simulator (iPhone or iPad). You can check
resources, see and change HTML & CSS, use breakpoints on JavaScript
code, create charts and more just as if you were on Safari for
Desktop, Chrome or Firebug.
It works for any web in Safari -the web browser-, for a chrome-less
webapp (full-screen) and also for apps using UIWebView -including
PhoneGap applications-.

What options for web site development for iPad are available?

I'm developing a site one of the targets of which is iPad.
What options do I have to debug client side (DOM inspector, style viewer/editor, javascript console, network analyzer - all thing every major desktop browser has) when viewing the site from iPad?
I'm not looking for some kind firebug lite, or anything that makes me to debug site from iPad itself. (This would be too tedious.) Instead, what I'm after is some sort of remote debugger for mobile Safary, allowing me to work with sites opened on iPad from a desktop machine, or an iPad emulator with same capabilities. I know there is the emulator that comes in bundle with official SDK, but does it have such means?
It's the first time I'm facing the problem, so not to blame!
This is what I'm aware of:
weinre (But does it really work?)
Check out BugSense and their HTML5 (javascript) installation

Resources