Launch chrome as an emulator using javascript - javascript

I have a website where editors write articles using a custom built CMS. Once done they generally test these articles on desktop, but not mobile. To fix this I was wondering if there is an easy way to launch chrome using html/javascript such that I can provide it a url and one of the device emulators? (Keep in mind these are non tech people, and would be easily confused if I asked them to emulate themselves). If thats not possible then launch chrome in a new tab with specific width and height (which matches a mobile device)? Also if possible I would prefer these new windows to be incognito so that I do not save cookies in their sessions. Is there any way to do this? Any ideas would be appreciated. Thanks for reading

Chrome Provides Device Emulator as shown in below screenshot. by pressing the f12 ( Developers tool ) you can find the option. by selecting that "Device Emulator" Icon. You can choose the device as shown in below screenshot and change the device Os and device type and resolution and Orientation.

Related

DPR not working on firefox/chrome inspector

My last question was closed for some reasons (Chrome Inspector not even 1% accurate to real mobile devices)
However as it seems the problem was related to the DPR. I will attach images to show my problem
Chrome/Firefox Inspector with DPR 2.0 for Iphone 6/7/8:
Real Iphone 6:
I can not simulate the DPR on any website on any browser on my pc or my friends pc. It will always scale like 1. Doesnt matter if I use DPR 1,2 or 3.
So my questions is how to successfully simulate DPR 2.0?
I guess the problem is DPR or is it something else?
First of all the bigger text was my bad, my iphone got bigger text set that was the reason why the text was different. However the core of this topic is still the same and the resolution is different to chrome inspector and real devices. However mostly because of the browser taskbars.
As it seems no browser related inspector solution is working. However even when some people said it is not possible to emulate real devices it´s actually possible and also by google itself with android studio:
https://developer.android.com/studio
You can use any android version and create any resolution you want. You can also test localhost from your host os inside of your emulated smartphone browser by using this instead of the default localhost/127.0.0.1:
10.0.2.2
You can also open inspector of your emulated device from your main os! By using:
chrome://inspect/#devices
And here is starting the real question. Why does this inspector window clone the correct device resolution from the emulated device? I mean it´s literally the default chrome inspector window again. Very confusing.
They even clone the menubar, even when it´s now showing, the resolution and everything else was cloned 1to1 compared to the android studio emulator.
However I guess it´s more realtime streaming than actually cloning.
That´s to the point it´s not possible..
Also maybe very nice to know that you can use the fullscreen API to dodge problems with those annoying browser taskbars which crash your ui and take space. You can use this code to enter fullscreen with user gesture:
<button id="goFS">Go fullscreen</button>
<script>
$("#goFS").on("click",function(){
// this works with scroll - do not use document.body.requestFullscreen();
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
if(document.fullscreenElement){
console.log('fullscreen detected');
}
});
</script>
In fact it´s really sad that you have to download android developer software just to emulate real display solutions as web designer. I hope google will build in this technology in future inside of their chrome inspector.
Also I guess apple is providing the same software for their ios app development. So you should be able to emulate iphones their too. However as far as I read you must use a MAC machine for this.
Hope this will help anybody.

Debugging UC Mini browser

I am doing a web application. While trying to open the webiste on UC mini browser in data saving mode from my mobile device the css styles are not getting compiled.Is there any way to debug?
Thanks in advance.
There are no very good ways to debug it. UCMini (or UCWeb in light speed mode) is a remote proxy browser. As far I know, there is no debug console for it. The only thing you can do is throw JavaScript alert()s to try and debug various JS breakage issues.
But if you are concerned about a very weird layout. Keep in mind that you will never see a normal CSS in those modes. UCMini is not a normal browser. It's a Firefox 10 proxy engine that will shrink your content into a single column, in a similar way Opera Mini does in single column view mode.
A couple good other helpful things to know about that browser's context:
The target screen size is 800x600. So in portrait, it shrinks it all to approximately 600px (in one column), and 800px in landscape. And due to the Firefox 3-10(ish) engine, CSS support is limited.
I could say about our experience (FareCompare.com). Nodejs consoles + Frontend (Dojo) alerts. That's all we could find for our few bugs.
P.S. Pay attention that UC is working in one page mode. As far as I know, it is impossible to open new tab there. window.open() works the same as location.replace( url ).

Custom multi-touch gestures in Javascript

I'm developing a web-app and want to use JavaScript and HTML5 for gestures. I came across this -http://scripty2.com/demos/touch/ , but for this we need Starlight browser (http://starlight-webkit.org/Starlight/).
I don't want to restrict users to a specific browser. For Firefox I found this ( http://felipe.wordpress.com/2010/08/11/multitouch-in-firefox4/ ).
So I was wondering if someone can point me to any resource that won't restrict me to a particular browser. My goal is to define custom gestures.
-AB
I've tried to use these firefox resources but they didn´t work on my HP TouchSmart 300.
So here´s my solution:I´ve found my way using TuioJs and npTuioClient . This connects TUIO to your desktop browser. It works on firefox and chrome, didn´t try on IE.
Unfortunately, we cannot expect that an average user will set up TUIO just to visit our website, but anyway, it is a solution. Let´s hope there will be better solutions using HMTL5 in the near future.

debugging css ipad

I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

Categories