Google Chrome shows gray circle cursor

Solution 1:

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.

Solution 2:

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

Solution 3:

At july 2017 this option calls Add device type: