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
Related
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 have worked successfully with Web MIDI API and Chrome 52 on my Mac laptop - for example recognizing connected MIDI instruments. But Web MIDI API does not seem to work or recognize connected instruments when I use Chrome 52 in my Samsung Galaxy S5 running Android 5.0.1. I've tried, for example, Web MIDI API tests online like this one, unsuccessfully (all of which work fine on the laptop).
Native apps do recognize my MIDI devices just find in my Galaxy phone - they are connected via a working USB OTG cable. But Chrome (or Opera) are not. Any help will be appreciated. I've tried Chrome Dev and Chrome Beta, same result. I wonder if the problem is the phone, or perhaps the Android version?
UPDATE: I have also tried with an Android tablet of different brand and Android 6.0 (Marshmallow). The result is the same: navigator.requestMIDIAccess() is successful (it invokes the success callback with the midiAccess object as expected), but midiAccess has no inputs or outputs, even though a device is connected. The same tablet recognizes the device when using a native app.
UPDATE 2: Success! The problem was the electronic piano I was using to test. For some reason my laptop Chrome did find my Yamaha piano, but Android Chrome did not (they are the same version of chrome). I moved to another keyboard (a newer Roland piano) and now both Android Chrome and MacOS Chrome now detect it.
You must testing your devices for knowing is reading for USB Host. You can use application like that for testing : app test USB Host
If your device don't USB Host ready you can activate that with root mode.
The problem was the electronic piano I was using to test. For some reason my laptop Chrome did find my Yamaha piano, but Android Chrome did not (they are the same version of chrome). I used a different, newer keyboard (a newer Roland piano) and now both Android Chrome and MacOS Chrome now detect it.
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.
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).
I am looking for tools that allow to perform profiling of websites on mobile devices similar to what Firebug and Chrome dev tools allow to do.
I have used Weinre quite extensive. While it is an awesome tool to use with real devices, it does not provide facilities for run-time profiling.
Has anyone heard or used any tools that allow to do so?
Here is a great list of mobile performance testing tools from Steve Sauders (the guy that wrote the book "High Performance Web Sites"):
Mobile Perf bookmarklet - An uber bookmarklet with links to multiple other bookmarklets useful for mobile (mine)
Jdrop - JSON in the cloud for gathering data on mobile devices (mine)
Mobitest - Connects WebPagetest.org to Android and iPhone devices (Blaze.io)
pcapperf - Get HTTP waterfall charts from your mobile device connected to a wifi hotspot, blog post (open source)
WebWait - The only way I can think of to measure page load times on real devices over 3G - load URL in an iframe (Michael Mahemoff)
weinre - Web Inspector Remote, very cool way to debug your mobile device remotely (Patrick Mueller)
Reflow Timer - Bookmarklet to measure reflow time (Lindsey Simon, open source)
Favelet Suite - An uber bookmarklet, tons of features! (slayeroffice)
Source: http://stevesouders.com/mobileperf/
UPDATE:
You can use Chrome Devtools with an Android device and you can use Safari Devtools on a Mac with an iOS device.
Chrome: https://developer.chrome.com/devtools/docs/remote-debugging
Safari: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/
You connect via USB
You can profile/debug/inspect Chrome-on-Android using the desktop Chrome developer tools interface:
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the Chrome app, and a USB cable.
Its a bit annoying to setup, because 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.
Additionally, Google appears to be supporting this feature for new dev-tool Crhome extensions like PageSpeed.
For iOS debugging on Mac, you can use desktop Safari:
connect your device with a USB cable
start the app on the device
launch Safari on your computer
go to Develop -> device_name -> file_name.html
(if the Develop menu is not available for you, then go to Edit menu > Preferences... > Advanced tab and check Show Develop menu in menu bar checkbox)
It launches standard Safari web inspector, which is pretty similar to Chrome Developer Tools, although somewhat limited compared to it.