So I'm trying to develop a webapplication and I'm trying to check it out on mobile.
I'm currently using Cordova and JQuery Mobile together with ripple.js to view my application in my browser.
The first issue (as far as I know) is that ripple.js will work best in Google Chrome, so this is my only test platform.
The second issue is that when I toggle Device Mode on, it doesn't show me the black dot (cursor) when I enter the rendered version.
I'll explain my situation or a scenario:
As an example I'll go to http://google.com
I press F12 to enter developer mode
I click the Toggle Device Mode button
I will see my cursor, until I enter the generated mobile canvas. While I would normally see a black transparant dot, I now see nothing.
I can however click and drag like I would normally do, but I can't see what I'm doing.
The things I already tried:
Reset all the flags back to default
Reset all developer tool settings to default
(edit) Installed a previous version of Chrome AND Chromium
So question is, how do I get my cursor back?
Extra: I'm using version 49.0.2623.87 m, but that's not related since my co-worker, has the same version and he sees the cursor.
(edit) currently I'm using the mouse option where I press Ctrl to see the circle which indicates where my cursor is, but this really has to be a temp solution.
(edit) I fixed it by doing a combination of things. So I'm not sure which exact thing fixed it. I removed a few programs that I installed after it still worked. I uninstalled about 4 of them. Also I did an update of my graphics card and then did a reboot. So it could be either the graphics card update, the software uninstall and/or the reboot.
I had the same issue. (note this question might be a duplicate of this one)
Following the advice on the Chrome forum here I changed the Quantization Range in my Intel HD Graphics Control Panel from "Default Range" to "Full Range". The touch pointer (grey circle) appeared immediately.
If that doesn't help you may have to change refresh rate too. Changing from 59p Hz to 60p Hz or some other refresh rate might help.
This should also help.
Open the mouse control panel.
Select the Pointer Options tab in the Mouse Properties window.
Then enable Display pointer trails option.
In case you don't like or are getting annoyed, like me, due to the trailer. Move the slider to the Short position and the trailer becomes near to non-existent or invisible.
I fixed it myself, yet I'm not exactly sure how I did it. I edited my original post and added the solution in the last paragraph.
Had the same on my Asus laptop with Chrome 66
Resolution that worked for me
Graphics Control Panel > Display > General Settings > Scaling > Change to Scale full screen.
OFF your Asus Eye Care Switcher.
I am posting this as answer because above mentioned answer didn't work for me but I had this issue when I had a monitor attached to my laptop, for development work. I played around with my display settings and discovered that IF the scale on my second monitor did not match the scale on my laptop, the mobile development mode cursor would disappear. (windows 10)
If this is an issue for anyone just go into Display settings -> Display -> Scale and Layout --> make sure that both your laptop/desktop matches the display scale of your second monitor.
Hope this will help.
Related
i'm struggling with the classic HTML input of type file. I was using it on my angular application and i had freeze sometimes, the whole browser became unresponsive, and the only thing that works is the scroll.
You can't click any buttons, select any text or even change tab on the browser for about 5 seconds. I tried a lot of different file type and sizes and it doesn't change any of this, it even freeze sometimes when i don't select any file in the explorer and i click the close button directly.
So I thought it was my implementation that was bad and i went to the Mozilla developper website where you have an example and I have exactly the same behaviour. I also tried to take only the HTML from the Mozilla website and put it alone on a .html file and again, same behaviour.
This does not occur 100% of the time, but I would argue that on my end it does it about 60/70 % of the times.
I tried it on chrome and Firefox (both up to date), on multiple computer (all running Windows though) and i have the same behaviour on all of them.
I don't have any error or anyting in the consoles.
I don't know what to do with this, i'm pretty sure it can't be the file's input on the whole web that are bugged, but i tried a lot of various things with always the same results. Should i report it somewhere? ( if so, where? ) Or what would you suggest to do to investigate this further?
I couldn't find anyone discussing this issue on the internet apart for this thread that had no solution, they also say in this thread that the bug is not reproducible in Edge, but i just tried and it does the same thing.
Thanks for reading me and for any help about this.
Chrome freezes for few seconds when after any use of file field.
It was because I had a shortcut in "Quick Access" menu in windows explorer. This shortcut has been linked with a folder shared by network. I've removed this shortcut and everything is good now.
Same here, I have a mapped network drive that is not responding, this make a 5 seconds delay. After unmapping the drive, no more delay. The delay is the same in firefox or chrome.
Same here, if you want to remove it, on Windows 10, click on the icon Quick access (blue star), then right click on the dead link appearing in the "Frequent folders" panel on the right panel and choose "Unpin/Remove from Quick access". There should be no error message.
On the iPhone's Instagram app browser(in app) if you open a website that includes html inputs of any type, something strange happens.
In the beginning everything is working, but once you tap an input and type something ( and the keyboard is opened), after you close the keyboard you can't click on anything anymore because all buttons/inputs/elements are clickable in a different location than where they showed ( button is showed in the original 100px location but click events are now on 50px).
It looks like after the keyboard opens the whole location calculation is shifted up(because the keyboard pushes the whole body up)
How to even begin to debug such thing ?
Honestly, I've been there. There is no way to debug the in-app browser (you can try on an iphone device mirroring with Chrome in MAC, but you will eventually fail), but I've tried without success.
It turned out that after digging around with similar issues, there was a caching issue and some disabled features with WP ENGINE from my client. They were able to fix it by allowing some parameters on nginx settings and then the In App browser wasn't stucked anymore.
I know every issue is different, but at this time, I haven't found a way to debug the In - App browser.
I can't speak to iOS specifically, but there definitely are ways to remote debug things.
My go-to for stuff like this (speaking from experience of browsers on gaming consoles) is Weinre: https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html You get something similar to Chrome Developer Tools, but it works over a Socket.IO connection.
Another tool I like to use is Fiddler. While it won't help you with your DOM issues, if you ever need to debug network stuff on oddball devices, it's perfect. It serves as a proxy server and can intercept all your connections, including HTTPS. https://www.telerik.com/fiddler
Turns out, that it's a fixed position and it's not supported, which means when keyboard is closed, the system will push back the whole view but click events stay up (because it's being pushed up when you open a keyboard).
So instead of make it an absolute modal, which has it's own problem, we keep it fixed, BUT, we do the pushing up/down by our own.
We could just push the screen back down on input unfocused, but if user click the next field you get unwanted behavior, so we create a delay based machine like so :
var isfocused=0;
var focusTimer=0;
$("input").blur(function() {
isfocused=0;
focusTimer = setTimeout(focusDone, 150);
});
$("input").focus(function(){
isfocused=1;
});
function focusDone(){
if(isfocused===0)
$(window).scrollTop(0,0);
clearTimeout(focusTimer);
}
This works great on social browsers, with fixed positioned modals that has inputs inside them.
I'm trying to view the emulation panel but I can't find it anywhere. Everywhere I've looked it says to open an overrides panel to find it but that's missing too. I also can't find any helpful or new answers to my question. Pressing esc only opens up console and there's nothing in settings that seems to help. Can someone please tell me how to reach it?
Instead of emulation in the drawer Device Mode is now offered for emulating other devices. It provides many benefits over the old emulation mode, such as taking into account the meta viewport tag on render. So what you see is much closer to what you'd get in real life.
I'm using 51.0.2704.103 (64-bit) on a Mac.
Cmd-Opt-i to open console.
Click the button with three vertical dots and the very top right of the Developer Tools window.
Select: more tools > sensors:
If the console draw is not already open it will open. Either way there should now be a sensors tab next to the console tab on the console draw. Click this tab and follow your nose from there.
Note that this tab had an x by it. Hitting this will hide the sensors tab and next time you use it you will need to follow the steps above again to reinstate it.
Google Chrome shows a gray circle cursor when dev tools is active. Why is this happening and how do I make this stop?
Nov 29th, 2017 Update:
Quick Update brought to you by #Howdy_McGee.
Chrome 62 you have to Add Device Type, there's no longer an option for Show Device Type.
Why is this happening?
As Randy Hall points out below "This cursor indicates a "touch", such as your finger, for emulating touch events in (the) Chrome browser."
July 20th, 2017 Update: (version 59.0.3071.115) Just checking in again, looks like the below is still valid even through a bunch of Chrome updates. They have changed the wording of Show device type to Add device type. I've changed the wording below, but the image does not reflect the change.
They have also changed the way the device type settings work, explained below.
Once in responsive mode (via F12, then ctrl + shift + m) you will need to select the settings section indicated by the 3 grey circles, then select Add device type. Once you do this, a new drop down will appear next to the dimensions area, select Mobile (no touch). I imagine they did this so that you don't have to keep it on desktop and adjust the user agent type to a mobile device as I've described below.
What do the Device Types mean?
As of today (July 20th, 2017), the same settings for device type exist (as shown in the image above), but they work a bit differently than previously before:
Mobile: Now scales the content on the page when resizing the window (to accurately simulate pixel density on a mobile device). The circle that replaces your mouse, simulates a screen touch action when clicking (full fledged mobile development / testing).
Mobile (no touch): Also scales the content on the page when resizing the window, but continues to use your regular mouse cursor for your click actions.
Desktop: Does not scale content, uses regular mouse cursor (full fledged desktop development / testing).
Desktop (touch): Also does not scale content, but replaces your regular mouse cursor with a circle that will simulate screen touches on click.
But I still want to emulate a specific mobile device...
There is still a way to override the user-agent with this Mobile (no touch) setting set. When you're looking at your console (brought up via F12), you'll see the 3 vertical circles there next to the console tab, click them and bring up Network Conditions. Within this section you'll see that User agent is set to Select Automatically, just turn this off and use the drop-down to change to the user-agent you want to emulate as. This will allow you to emulate as a specific mobile device.
This cursor indicates a "touch", such as your finger, for emulating touch events in Chrome browser.
In the dev tools window, click the settings (gear) button in the bottom right. Go to the Overrides tab and disable Emulate touch events.
I'm posting this here because it took me a LONG while to find it via searches, and I know others have been having the same issue.
Update via Paulo Manuel Santos' comment:
From Chrome 32 the Emulation is configured in a different place. This is how I get to it: Elements, press Esc, Emulation, Sensors, Emulate touch screen
At july 2017 this option calls Add device type:
On Chrome 50 it seems the Emulation option is not available..
My workaround was to add a custom device with the 'Mobile (no touch)' option..
When you click this ICON to activate (change to blue); The Grey Circle CURSOR will appear as representing finger touch for devices, and Deactivating this will simulate desktop version and Showing POINTER Cursor.
None of the above answers worked for me... So after clicking the aforementioned 3 dots in the bottom right corner, I selected Settings and then Restore defaults and reload
It's not a clean solution, but I had just to choose a new dock side position and then I was back to work
Just deselect the Toggle device toolbar
https://i.stack.imgur.com/3lcFl.png
Is it possible to create some kind of fullscreen mode (e.g. no window title bar) in Tk applications?
I used to use the wm overrideredirect trick in my code. Recently I found it to be buggy on Ubuntu. Not sure why, maybe a gnome issue, maybe a glx issue. Currently I'm using:
wm attributes . -fullscreen 1
which so far works on Windows and Linux. Haven't tested on Mac although I don't see why it wouldn't work.
OK read the man page. It says it works on Windows, OSX (Quartz) and X11.
Additional info
for those who didn't believe me
The man page says:
-fullscreen
Places the window in a mode that takes up the entire
screen, has no borders, and covers the general use area
(i.e. Start menu and taskbar on Windows, dock and menubar
on OSX, general window decorations on X11).
which seems to imply that the window decorations (title bar etc) is removed in -fullscreen mode. And in my real-world experience (I just checked my code 2 seconds ago) that seems to be the case on Windows and Ubuntu (linux). Don't know if it's true for OSX but the man page says it should be.
If this is ever not true on any platform then I believe it is a bug in the documentation. In which case it should be noted in the man page clearly on which platform are window decorations not removed.
Yes. You wan to set the overrideredirect flag on a toplevel.
toplevel .top
wm overrideredirect .top 1
If you run this interactively you need to withdraw the window and them deiconify it so that the window manager has a chance to remove the frame from the window.
This only removes the window manager decorations. You need to manage the size as a separate step in the normal way.
For more information see the man page on the wm command