I implemented automatic theme applying feature using the Navigator userAgent Property to guess the device type. When running in the Ripple emulator this property returns my desktop browser's user-agent.
Does Ripple allow to determine the current device in other way?
if you are using phonegap this link can help you to identify the device http://docs.phonegap.com/en/2.3.0/cordova_device_device.md.html#device.name
Related
I have a custom touch screen device with a standard display resolution(1360x768), running Linux and Google Chrome in kiosk mode, as the GUI control interface.
On a development machine(much larger display resolution), the Chrome devtools, are great for simulating the target display. However, everytime I shutdown and restart Chrome I have to re-enter the custom display device in the devtools Device menu.
Is there a way to save this so the custom device is always available in the list of available devices?
i want to test my site on feature phone like nokia asha phones , user agent does not give exact behavior . for smartphone i can connect my android device to chrome browser using USB debug mode and can inspect element , how to do this thing for feature phone
You can't. The DevTools remote debugging uses a very specific protocol to talk to the remote device over. If that device doesn't expose the protocol, you can't see into it with DevTools directly.
When a PC connects to an Android device via USB, the device's information can be found on chrome://inspect. How can I get this information in a Chrome extension？
That information isn't available in the Chrome Apps/Extensions API. You should file a feature request at crbug.com explaining your use case.
If you write a Chrome App, you'll have access to the chrome.usb API, where you can connect to specific devices. See Spark's ADB functionality for an example: https://github.com/dart-lang/spark.
When I run my web application on the Tizen Web Simulator and the Tizen Emulator using the same resolution (HD 720x1280) and density (DPI), the display does not match. Which one is closer to the display on the actual Tizen device?
Tizen Emulator is closer to the actual device because does an actual emulation so it has an OS image build on it.
Web Simulator is simulating the API, the Web Runtime, and some of the connectivity using Chromium's Webkit engine. It is a simulated environment and there is support only fort the HTML5 applications and not for the native applications.
From my experience with the Tizen Web application API, Tizen Emulator was closer to the actual device compared with the simulator.
There is a scale menu for Tizen Emulator. You can find context menu when you click to right mouse button on the tizen emulator. 4 scales available.
1x
3/4x
1/2x
1/4x
'1x' is closer to actual Tizen device. Tizen simulator display is similar '1/2x' scale of tizen emulator for me.
The Emulator is indeed closer to the device display than the simulator.
However, if you want to see how your app would look on a device, why not flash the Tizen image on a device?
they can be found here, and i'm sure instructions are there also:
http://download.tizen.org/releases/2.1/tizen-2.1/
I know about firebug and the developer tools for the major modern desktop browsers, but I can't find any way of debugging JavaScript code on mobile browsers.
What are some high level techniques I can use to debug code on mobile browsers?
Android devices can be put into developer mode by going through settings>Phone status then tapping on "Build number" 7 times. This allows you to do a bunch of things (see step 5) including USB debugging. (Some devices might have Build number under Software Info)
To activate USB debugging, look in Settings for the newly appeared "{ } Developer Options", open this and switch on USB debugging. Connect your device using a direct USB connection.
In Chrome on your desktop, in the usual developer tools panel used for debugging, look in the menu for more tools>remote devices. With Discover USB devices selected, you should now see your mobile device on the side.
Select it to see a list of all the chrome tabs you have open and the ability to enter URLs directly.
Selecting one of the links will open up a new window with a mirror of your device screen on the left and all the familiar chrome debug tools on the right. You can still control your device directly or use the mouse on the mirrored screen. It even rotates.
full details on remote debugging from google and how to enable developer mode (link as above) from askvg.com
Android provides a tool set for these purposes:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Apple does it a similar way:
https://developer.apple.com/safari/tools/
Tutorial: https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/
You can debug on Safari Mobile with any iPhone/iPad. In Developer menu you can find your device and you can then debug your code with inspector.
If you have an Android Device instead, you can debug on Chrome Desktop (remember to active the debug mode) with chrome://inspect
On the IPhone you can go into settings>Safari>advanced and turn web inspector on
Sometimes I get bugs reported by customers that are not reproducible every time or in our testing. For such cases I recommend Lucky Orange. It records the user activity and also has the option to record console messages.
PS - I'm not an affiliate, I use them for my own projects and like it.
Another solution for basic debugging (which many times is all is needed), is having a console polyfill on mobile without the need to plug into USB on desktop.
mobileConsole is such a console polyfill.
Hope it helps someone, I found it useful.