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/
Related
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 use the new navigator.bluetooth Web Bluetooth APIs to connect to an older Bluetooth device, however using the requestDevice({acceptAllDevices: true}) method seems to not working.
According to the docs, it should show all of the bluetooth devices without any filters, but the Chrome beta on Android is not picking up any devices whatsoever, as seen in the picture.
I'm using the Web Bluetooth Terminal with the modified mentioned method above, and getting zero luck in listing any devices.
My device is not BLE, and I'm trying to use the SerialPort "SPP" profile similar to this question, which I believe has the UUID of 0x1101 or 00001101-0000-1000-8000-00805f9b34fb.
How do I list the nearby or paired Bluetooth devices on Chrome mobile for Android?(Additional Info: Chrome 56 on Android 6.0, the Bluetooth device is a HC-05 module - tested and confirmed working correctly with a dozen of Android Bluetooth terminal apps.)
Web Bluetooth supports only Bluetooth Low Energy devices for now. You won't be able to connect to Bluetooth Classic devices with this Web API.
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.