Sencha Touch: Cmd-built app not working on mobile browser - javascript

I am working with ST2.3.1 and Cmd 4. My app builds and runs fine on my desktop browser but does not launch on a browser on my mobile device. The loading dots with blue background shows up and then just hangs.
I tried this with a testing build on an iPhone 4S with Safari and Chrome, with similar results. So I pulled up the app in Safari, and opened Safari Web Inspector to see what's going on, and I cannot see anything unusual in the index.html. I have taken a screenshot and attached it below. The fact that the loading dots show up and the index.html loads means that I dont have a problem accessing the webserver.
Any ideas why the app may not be launching? Should I expect a testing build from cmd to work just the same way on a mobile browser as on a desktop, or does that require additional setup/configuration? My build settings are otherwise unchanged and use default settings mostly. Could this be a Mac OS X firewall problem? It's running on default factory settings.
Thanks in advance!

Related

Android Native/Stock/Default Browser Won't load my React Web App

So my react web application loads perfectly fine on Android Chrome Browser, and other browsers such as UC Browser, Safari on iOS.
However, recently we found that the web application loads blank page when opened using Android Native/Stock/Default Browser ( The blue globe icon ) found on any Samsung / Lenovo devices.
I was able to use weinre / ngrok to attach web debugger, but I was not able to find any errors. The browser would just stop requesting for more static assets and stop doing anything.
I ran another test for my internal web application which is also a react web app (same config), and it loads fine on Android Native/Stock/Default Browser. I'm looking for clue as to what may cause this browser to stop requesting from the webserver...
Thx

How to debug JavaScript in IOS Action App Extension?

With iOS, Action App Extension, one could run a JavaScript code against HTML. However, after quite some search on Google, I have not found any document explaining how to debug in this situation (insert a break point or simply add/view console out statement).
It's not too hard, although recently I've had an issue with the page showing up when connected to the simulator. In that case I just ended up using my phone directly. (Apparently you need to start desktop Safari after the iOS Simulator has started to inspect "remote" Simulator sessions)
Ensure that on the device Settings->Safari->Advanced->Web Inspector is on
(Make sure you've Trusted the computer from the device)
Start MobileSafari on your device by running from Xcode and choosing Safari
-- this isn't necessary but you can decode the iOS Objective-C/Swift code as well. You can just start MobileSafari manually and it will be visible in desktop Safari.
Start Safari on your desktop, make sure Show Develop menu in menu bar is on in Preferences.
In the Develop menu you will see your device name, say 'BSharer's iPhone'
select the page name underneath your device name, say 'en.m.wikipedia.org - Wikipedia'.
You are now debugging that device page on your desktop.
There are options to 'Automatically start debugger etc...', but I've found that when I tried these my code would not execute.
You can't place debugger statements in the app extension JavaScript as it isn't injected until your App Extension starts. Instead I would add a debugger; statement to my app extension JavaScript code which will pause the debugger in the app extension JavaScript code at the debugger; statement.
Start your app extension by selecting it in the Share menu, set any other breakpoints you are interested in, then hit the continue button on the debugger.
You will also catch uncaught exceptions of course.
The official documentation for this is here.
Make sure you remove the debugger; line from production code.

Javascript: debugging on mobile

I've created a simple app using requirejs, angularjs and ui-grid. All it does is to get some data from an excel file and show it on the grid.
It works nicely when I view it on my desktop, but on mobile (Samsung Galaxy S3) it gives an error (shows the {{myBoundVar}} as if angualr app has not started). On Nexus 4, it shows the site, but with an empty grid (although I can see it has taken the data, since I see the grid's headers which are taken from the excel).
I can't seem to debug it, since using remote debugging shows the site correctly (just like it shows it correctly on desktop).
Is there a way to debug directly on mobile (e.g. just see the JS errors)?
You are looking for Remote Debugging on Android with Chrome which allows you to open a live Chrome DevTools window for your website on your android from your Chrome Desktop isntallation as long as you are running Android KitKat or above.
Simply enable developer options on your device, connect it's USB to your computer and visit chrome://inspect in your Chrome browser. More detailed instructions are at https://developer.chrome.com/devtools/docs/remote-debugging.

Remote debugging javascript on iPad from a Windows machine possible?

I have an iPad with iOS 6.1 connected to a windows 8 machine. I would like to be able to debug some javascript code running on the iPad.
The safari on iPad has a web inspect option that needs the iPad to be connected by wire to computer and then can be accessed in Safari for desktop's develop menu. I installed Safari 5 for Windows but don't see the iPad detected in the develop menu.
Any other ideas ?
The Firefox Tools Adaptor allows one to use Firefox DevTools for Safari on iOS.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
For remote debuggin I use Weinre.
Weinre has almost everything you need, but lacks a JavaScript debugger.
It has a WebInspector for DOM manipulations, network traffic, timeline, resources and a console.
Checkout this project on GitHub: weinre-remote-debug to setup weinre locally.
Another option described on this page is jsconsole.com. By appending a <script> tag to your page (or running a bookmarklet on your device) you get access to a JS console.
To start, go to jsconsole.com and run :listen in the prompt. This will give you a unique session ID and a script tag that you insert into your mobile web page.
Now, any console output that your mobile page generates will be streamed to the console open in your desktop web browser, including any errors!
It is certainly no replacement for a full web inspector, but it can get you out of trouble when you don’t have access to a Mac.
Source: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/

Best way to debug Javascript on an iPhone app?

I'm doing some rough development on the iPhone. I'm writing a native iPhone app, which uses an UIWebView object to load web sites with javascript. I find very difficult to debug the javascript code on an iPhone.
What are the methods/techniques available for this matter?
Since Safari on the iPhone is using webkit, you could use the debugger built into desktop Safari's web inspector. While there will probably be some quirks that are different between platforms, it will give you a pretty good idea of what's going on in the interpreter.
If you have access to an Android phone, you can debug your application using desktop Chrome's full developer tools and a USB cable (very convenient).
That means the debugger, profiler, HTML inspector, etc, all running on your mobile phone, but accessed through chrome running on your laptop/desktop computer.
Android Chrome and iPhone Mobile Safari are usually more similar to each other than Desktop Safari is to Mobile Safari, the screen format will be similar, the layout similar, and you'll be able to try real touch events, etc.
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the android Chrome app, and a USB cable.
You have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Similar to Adrian Harris, it is possible to debug any website on the iphone by creating a dummy project in dashcode, clicking on "Mobile Safari" and then "Run"
Once the iPhone Simulator opens and safari opens with the dummy project website, click on the url bar of safari, enter any public url, and when you are at the site, you can click "Pause" and the debugger will pop up after any javascript code runs. At this point, variables can be inspected, breakpoints set, etc.
I know this is an old question, but wanted to update the answers with the latest info ->
The new safari (for mac) has a way to use the web inspector on an actual iphone or ipad in real time if you have the latest software (safari, iOS6, and MacOS) and an attached (with a cable) iDevice.
You access it by enabling it in the "advanced" safari preferences on the iphone, then under the develop menu in safari on the mac. See here for more info: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515
You can also access the simulators in the same way (installed with xCode).
I agree with pjbeardsley. I would add to use your web page within http://www.testiphone.com/ just so you can see what the dimensions will be like. I would definitely use Safari and the Web Inspector for it as well
I have had mixed success using Dashcode which has a javascript debugger paired with the iPhone Simulator. It is a bit tricky to get working because you can't launch it without opening a project. But as I recall, I posted the project on the web, launched a placeholder project, and then debugged the placeholder project in Dashcode. Then I navigated to my url in the Simulator and was able to set breakpoints. There were probably a few other hoops to jump through, but once it was working, it was like I had a real debugger within Mobile Safari, which was great.
Good luck

Categories

Resources