web-dev-qa-db-fra.com

Google Chrome affiche le curseur en cercle gris

Google Chrome affiche un curseur en cercle gris lorsque les outils de développement sont actifs. Pourquoi cela se produit-il et comment puis-je arrêter cela?

43
Randy Hall

Mise à jour du 29 novembre 2017:

Mise à jour rapide présentée par @ Howdy_McGee .

Chrome 62 vous devez ajouter un type d'appareil, il n'y a plus d'option pour afficher le type d'appareil.

Pourquoi cela se produit-il?

Comme le souligne Randy Hall ci-dessous "Ce curseur indique un" toucher ", tel que votre doigt, pour émuler des événements tactiles dans (le) Chrome navigateur."

Mise à jour du 20 juillet 2017: (version 59.0.3071.115) En vérifiant à nouveau, il semble que ce qui suit est toujours valide même à travers un tas de Chrome mises à jour. Ils ont changé le libellé de Show device type En Add device type. J'ai changé le libellé ci-dessous, mais l'image ne reflète pas le changement.

Ils ont également modifié le fonctionnement des paramètres device type, Comme expliqué ci-dessous.

Une fois en mode réactif (via F12, Puis ctrl + shift + m), Vous devrez sélectionner la section des paramètres indiquée par les 3 cercles gris, puis sélectionner Add device type. Une fois que vous faites cela, une nouvelle liste déroulante apparaîtra à côté de la zone de dimensions, sélectionnez Mobile (no touch). J'imagine qu'ils l'ont fait pour que vous n'ayez pas à le garder sur le bureau et à régler le user agent type Sur un appareil mobile comme je l'ai décrit ci-dessous.

enter image description here

Que signifient les types de périphériques?

À ce jour (20 juillet 2017), les mêmes paramètres pour device type Existent (comme indiqué dans l'image ci-dessus), mais ils fonctionnent un peu différemment qu'auparavant:

  • Mobile: Met à l'échelle le contenu de la page lors du redimensionnement de la fenêtre (pour simuler avec précision la densité de pixels sur un appareil mobile). Le cercle qui remplace votre souris, simule une action tactile de l'écran lorsque vous cliquez (développement/test mobile à part entière).

  • Mobile (sans toucher): Échelle également le contenu de la page lors du redimensionnement de la fenêtre, mais continue à utiliser le curseur de votre souris habituel pour vos actions de clic.

  • Bureau: Ne met pas à l'échelle le contenu, utilise un curseur de souris normal (développement/test complet du bureau).

  • Bureau (tactile): Également ne met pas à l'échelle le contenu, mais remplace le curseur de votre souris habituel par un cercle qui simulera les touches d'écran au clic.

Mais je veux toujours émuler un appareil mobile spécifique ...

Il existe toujours un moyen de remplacer l'agent utilisateur avec cet ensemble de paramètres Mobile (no touch). Lorsque vous regardez votre console (affichée via F12), Vous verrez les 3 cercles verticaux à côté de l'onglet console, cliquez dessus et affichez Conditions du réseau . Dans cette section, vous verrez que User agent Est défini sur Select Automatically, Désactivez-le et utilisez le menu déroulant pour passer à l'agent utilisateur que vous souhaitez émuler. Cela vous permettra d'émuler en tant qu'appareil mobile spécifique.

enter image description here

46
Tony M

Ce curseur indique un "toucher", tel que votre doigt, pour émuler des événements tactiles dans le navigateur Chrome.

Dans la fenêtre des outils de développement, cliquez sur le bouton des paramètres (engrenage) en bas à droite. Accédez à l'onglet Overrides et désactivez Emulate touch events.

Je poste ceci ici parce qu'il m'a fallu longtemps pour le trouver via les recherches, et je sais que d'autres ont eu le même problème.

Mise à jour via le commentaire de Paulo Manuel Santos:

De Chrome 32 l'émulation est configurée dans un endroit différent. Voici comment j'y arrive: éléments, appuyez sur Echap, émulation, capteurs, émuler l'écran tactile

26
Randy Hall

En juillet 2017, cette option appelle Ajouter un type d'appareil :

enter image description here


enter image description here


enter image description here

7
valex

Sur Chrome 50, il semble que l'option d'émulation ne soit pas disponible .. Ma solution de contournement consistait à ajouter un appareil personnalisé avec l'option 'Mobile (sans toucher)' ..

4
solex16

Aucune des réponses ci-dessus n'a fonctionné pour moi ... Donc, après avoir cliqué sur les 3 points susmentionnés dans le coin inférieur droit, j'ai sélectionné Paramètres puis Restaurer les valeurs par défaut et recharger

Ce n'est pas une solution propre, mais je devais juste choisir une nouvelle position côté quai, puis j'étais de retour au travail

2
binte

Click this icon to switch between mobile/desktop version

Lorsque vous cliquez sur cette ICÔNE pour l'activer (changer en bleu); Le Curseur Cercle Gris apparaîtra comme représentant le toucher du doigt pour les appareils, et la désactivation simulera la version de bureau et l'affichage du curseur POINTER.

1
Shaf