How do you debug javascript in Xcode?
One thing that I can do is open the page in OS X Chrome browser, but naturally this will not work for application flow involving native code. Is there a smart Xcode trick that I am missing.
With the release of iOS 6, Apple released remote Web Inspector for their Mobile Safari in conjunction with Mac Safari 6, and this is huge. Basically you have all the features and power of Web Inspector in regular Safari, for your mobile apps, including Phonegap apps. I've used weinre and this makes it obsolete for newer versions of iOS (but not for old versions of iOS, non-iOS devices such as android, or if you're on Windows).
Here's how it works (requires a Mac, either xCode 4.5+ running an iOS 6+ simulator or an iOS 6+ device, and Safari 6+ on your Mac):
in your ios simulator or ios device,open settings --> Safari --> Advanced --> Web Inspector --> (turn On) . (this is on by default in the simulator, but its worth checking)
In Safari, after you've started your phoneGap/cordova app and its loaded & running, access iPhone Simulator or your device from the Develop menu. You can enable Develop menu in Safari's Advanced Preferences, if its not already.
More discussion at the bottom of:
http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
(also, if you read about a "secret private interface" somewhere, this doesn't work anymore.)
Try using weinre it is a really good tool to debug javascript applications on mobile devices.
http://people.apache.org/~pmuellr/weinre/docs/latest/
Although you will still not be able to debug the script step-by-step as it gives on desktop but gives lot more detail than xcode (~ for javascript).
Related
I'm developing an simples website using html, css/bootstrap and JS. I received feedback by Iphone user that some features not working in IOS mobile. Some Images not loading and counter-up not working too. In windows and android is working fine (chrome and Firefox). The question is, how I create a environment for simulate a IOS mobile for check how safari browser load my site? I tried install safari in windows but it not show equals execution in IOS. I think that browsershots not is a good ideia, because it works only with static content, and in the moment return 500 internal server error.
Microsoft BrowserStack provides a full test environment, however beyond the complimentary trial period it is not free. For errors related to pageload or reference, I would suggest you use device emulation and network throttling in a browser: Safari, Firefox, Chrome.
Some browsers are more forgiving of errors, so you may even have a typo. Is your trustworthy friend using an outdated browser while you require modern feature support? The scope of the problem seems undeserving of a bill for membership or tech support.
We have recently released our mobile friendly version of our #Angular (javascript) app. We used google chrome dev-tools to develop and test our UI, we also used different devices to end-to-end test. We had some difficulty to reproduce some of the device specific issues in Chrome dev-tools.
So, now we are looking for a mobile browser Emulator, any recommendation of any product out there that could helps us? If we can debug in the emulator that would be awesome.
The devices that we are supporting is Apple and Google devices (mobile and tablets). Our developers are using Windows for development.
A colleague of mine refereed me to use browserstack
Genymotion, for android emulator https://www.genymotion.com/fun-zone/
I'm working on a web-app, and there are several issues(HTML markup and js functionality) that are reproduced only on Ipad and iPhone. The problem is - I don't have any ios devices. How can I reproduce, and then debug (like I do in browsers web developer tools) those issues on windows 10?
If you have iMac, MacBook or any Mac OS device you can use Xcode application and run real device simulator.
If you don't have such device you can use online services like https://www.browserstack.com
I'm trying to debug an error on Chrome for iPad. How can I do that?
Additional info:
I know how to debug Safari for iOS. I just don't have a Mac at the moment.
Is it true that I need Safari on MacOS X to remote debug Chrome for iOS?
Does Desktop Chrome allow anything?
Is Chrome for iOS just a webview application?
You cannot directly remote debug Chrome on iOS currently. It uses a uiWebView that may act subtly different than Mobile Safari
You have a few options.
Option 1: Remote-debug Mobile Safari using Safari's inspector. If your issue reproduces in Mobile Safari, this is definitely the best way to go. In fact, going through the iOS simulator is even easier.
Option 2: Use Weinre for a slimmed down debugging experience. Weinre doesn't have much features but sometimes it's good enough.
Option 3: Remote debug a proper uiWebView that functions the same.
Here's the best way to do this. You'll need to install XCode.
Go to github.com/paulirish/iOS-WebView-App and "Download Zip" or clone.
Open XCode, open existing project, and choose the project you just downloaded.
Open WebViewAppDelegate.m and change the urlString to be the URL you want to test.
Run the app in the iOS Simulator.
Open Safari, Open the Develop Menu, Choose iOS Simulator and select your webview.
Safari Inspector will now be inspecting your uiWebView.
I've had some success with the iOS remote debug webkit adapter.
Install ios-webkit-debug-proxy and libimobiledevice
npm install remotedebug-ios-webkit-adapter -g
Enable remote debugging in Safari - iOS Settings => Safari preferences => enable "Web Inspector"
Make your computer trust your iOS device- starting iTunes could prompt the "Trust this computer" dialog.
remotedebug_ios_webkit_adapter --port=9000
Open tabs should show up in chrome://inspect/#devices
If you're just looking for the console logs, there's chrome://inspect, which will display console.log of other tabs in iOS Chrome.
The Firefox Tools Adaptor allows one to use Firefox DevTools to debug websites on Safari or Google Chrome for iOS or Android.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
Is it true that I need Safari on MacOS X to remote debug Chrome for iOS?
As far as I understand, yes.
Does Desktop Chrome allow anything?
No
Is Chrome for iOS just a webview application?
Yes, the app would be rejected otherwise, this is why Mozilla originally did not build a browser for iOS.
new iOS 6 feature is, that you can debug html and javascript running on device or simulator in desktop safari. I suppose, that this feature is based on Webkit Remote Debugging Protocol.
How can I connect to webkit running on iPhone without desktop Safari?
I can do this for mobile Chrome running on Android using websockets, but how can I do that for iOS devices?
The ios-webkit-debug-proxy project (from Google!) does this.
You want to look at this code https://github.com/leftlogic/remote-debug/tree/master/safari - although it fails when it actually comes to RPC calls that use __rpc_forwardSocketData.
If you've got any ideas why several of us are interested!
You need to open up the iPhone Simulator and browse to a website.
Then open Safari and choose "Develop" from the menubar. There is a the option called "iPhone Simulator".
If you hover over this you can see all of the open websites of the simulator.
This gives you the same inspector Safari uses. You can even see hovered elements in the iPhone Simulator.