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
Related
I'm running an application which is in the cloud on Chromium Browser on Linux (Raspberry Pi OS).
When I click on a textbox (where the text is already there) it selects the text for half of the second and then it automatically shows the context menu preventing me from modifying the content. (This also happens in Windows in Chrome).
This does not happen in the desktop app and in Firefox on Windows. I was wondering why that is? Is there a setting to change this? I noticed that behaviour works as expected if you hold the finger on the text box for 2 seconds however the single-finger touch just highlights and shows the context menu which is not practical.
I would essentially want to swap this the other way around; touch and hold to simulate right click and click to select.
This only happens in Chrome. I do not have much control of the cloud application therefore I was wondering if there is any particular setting in Chrome which controls this behaviour. I tried changing the system settings on windows. I went to chrome://flags and disabled the following:
Omnibox rich entity suggestions; Send tab to self omnibox sending animation; Touch UI layout;
Touch initiated drag and drop; Enable experimental fling animation; Enable resampling input events;
Context menus show full URLs; Show autofill predictions;
Omnibox preserve default match against async update; Experimental system keyboard lock;
Omnibox on device head suggestions; Select HW overlay strategies; WebUI tab strip;
Select which UI to use for translate bubble; WebUI tab strip demo options; Scrollable TabStrip;
Omnibox on-focus suggestions; Substring matching for autofill suggestions;
Omnibox local entity suggestions; Omnibox Zero Suggestions on SERP / On-Focus Query Refinement;
Omnibox Experimental Keyword Mode; Filtering scroll predictions; Focus mode;
Zero-copy rasterizer; Omnibox Experimental Suggest Scoring;
Enable Probing on Navigation Predictor Isolated Prerenders; Hardware Media Key Handling;
Media Session Service; Audio Focus Enforcement;
I also went into the developer settings to see if there is anything in there but was unsuccessful.
I also tried the google extension to block right-click behaviour however it did not work.
I would like to go back to developers of the cloud app and ask them to correct this but the only question is why it works on other browsers.
I tried other browsers on Raspberry Pi but they nowhere near the performance of chromium.
I work on Chrome with 2 to 3 tabs and the title of these are keep changing on various processes running in the background.
Now the situation is that the titles are quite long and I need to keep track of them.
By default, Chrome tab show the title through a label when we hover on it for more than 4 seconds. But the application changes title in less than that time. Now I can handle these by coding in our application, but other users can't do the same.
Is it possible to increase the width of the title of Chrome tabs?
Otherwise, is there a way to set Chrome to display the label instantly?
Google Canary this option is available, Google Canary (https://www.google.com/chrome/canary/) you can use Dev builds
after installation set the chrome flags
open Chrome canary and go to chrome://flags
Search for Scrollable TabStrip
From the drop-down menu next to Scrollable TabStrip, select Enabled there are 3 four additional options medium width, large width
use those
The only way to do this would be by touching the source code of Chrome, which I highly recommend to avoid.
Otherwise, I don't think it is possible to change the tab width settings/ display time of the hovering label from Chrome's settings.
Even using the experiments section of Chrome(using chrome://flags/), we can't do the same.
But do keep an eye on the upcoming updates if this feature ever comes up.
I use a program called Organizr that runs in the browser and in order to make it easier to use I use the create shortcut option in chrome and check the box to have it open as a window. This is nice because it doesn't have the address bar/tabs/bookmarks bloat from the main browser but the issue is that it has a wide white bar across the top with site information, and it doesn't go away when I make the window fullscreen which is problematic since I use Organizr to access my Plex library and watch videos. Can anyone advise on how to hide/remove this info bar from the window?
There's the thin bar at the very top that just says Organizr and that is fine, but the bar below it with the (i) and it says Organizr V2 and localhost is what I'm talking about.
(This is a repost from https://support.google.com/chrome/thread/8422935?hl=en)
I'm late here and what I'm going to propose here is not even a real solution because it slightly change the window's top bar (at least on edge chromium it becomes white and you can't manage anymore addons and other things):
add this option --app=https://www.yoursitehere.domainhere (replace yoursite.domainhere with the link of the site you want see as app) to the destination (in shortcut property).
If you find any other solution would be awesome
Is there a way to force Internet Explorer and Edge to use a particular favicon for the address bar/tab icon?
In general I'm using a different design (with a wider margin) for "live tile" (or whatever Microsoft calls them)... and for some reason these browsers keep choosing one of those images (defined in browserconfig.xml or one of the Apple icons... not sure) to use in the address bar.
This is not what I want, because the one in the address bar/tab icon needs to have a smaller margin and transparent background.
Is there a safe and consistent method to say "use this icon for the address/tab bar icon", and "use this icon for the tile or whatever?"
EDIT: Another acceptable workaround for this would be if there was a way to specify that the images with a background/margin would ONLY be used for "tile" so that the others would be favicon(s) only? I don't fully understand what logic IE/Edge use to choose which icon to display.
The favicon package generated by RealFaviconGenerator behaves the way you want: In its tabs, Edge picks the classic "desktop" icon, while it uses the tile icons for sites added to home screen. More precisely, Edge is using the classic 32x32 PNG icon as the tab icon.
I advice you to first run the compatibility test with Edge on your machine to make sure it behaves as described above (I didn't have a Surface tablet or something like this to test it).
Full disclosure: I'm the author of RealFaviconGenerator.
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.