Où se trouve le nouvel onglet Émulation dans le tiroir de la console Chrome?
J'utilise fréquemment l'onglet Remplacements dans les outils de développement Chrome pour émuler d'autres appareils tels que IPhone et IPad, mais après la mise à niveau vers la dernière version (32.0.1700.76 m), tout dans l'onglet Remplacements a disparu et a été remplacé par une case à cocher indiquant "Afficher l'émulation" dans le tiroir de la console ".
Le fait de cocher cette case n'active pas la vue "Emulation" dans le tiroir de la console. Le bouton "Afficher la console" semble être désactivé.
Voir ici pour plus d'informations.
Avant de commencer, ouvrez la console dev tools (sur un Mac, cmd-option-i)
- Ouvrez le panneau Paramètres dans la console d'outils de développement (cliquez sur l'icône représentant une roue dentée à droite).
- Cochez la case "Afficher la vue" Émulation "dans le tiroir de la console (vous avez apparemment déjà terminé cette étape) et fermez l'écran.
- Basculez vers l’onglet sources de la console des outils de développement
- Appuyez sur Echap pour faire apparaître un écran qui glisse depuis le bas.
- Sélectionnez l'onglet Emulation sur ce deuxième écran.
Le lien ci-dessus contient également une note indiquant:
Remarque: Les outils d'émulation de DevTools étaient auparavant contenus dans un volet Remplacements dans le panneau Paramètres. Le panneau Emulation est la nouvelle sous-fenêtre Remplacements.
Après avoir installé Chrome (ou sa version Edge Chrome Canary ), vous devriez être en mesure de réaliser une émulation mobile appropriée dans les outils de développement de Chrome. Je les active généralement par Clic droit> Inspect Element
Pour les apprenants visuels comme moi, je viens d'inclure une capture d'écran complète.
J'utilise la version 58.0.3029.110 de Google Chrome, où Emulation n'est plus disponible, mais toutes les fonctionnalités sont toujours disponibles:
Appareil et écran
Appuyez sur Ctl + shift + m ou cliquez sur Toggle device toolbar, vous les trouverez en haut au milieu de l'onglet de votre navigateur. (Vous trouverez plus d'options dans la section More option.)
Agent utilisateur et capteurs
L'agent utilisateur est maintenant renommé en Network Conditions et se trouve dans Customise and control DevTools> More tools> Network conditions. On peut également trouver Sensors au même endroit (par exemple, Customise and control DevTools> More tools> Sensors).
Le message "Afficher la vue d'émulation dans le tiroir de la console" prête à confusion.
En général, notre onglet de la barre d’outils chrome dev est sélectionné comme onglet de la console ou nous essayons de le savoir dans l’onglet de la console.
Le problème, c'est que le tiroir de la console ne s'ouvre pas lorsque l'onglet de la console est sélectionné.
Je semble l'avoir résolu. Lors de la mise à niveau vers Chrome Canary (version 34.0.1789.0 canary), le problème était résolu.
http://www.google.co.uk/intl/fr/chrome/browser/canary.html
J'ai rencontré ce problème et il m'a fallu un certain temps pour le résoudre, malgré les réponses fournies. Je suis sur la version 37.0.2062.103 m. Tout d'abord, dans cette version, il n'y a pas de volet Remplacer, ni d'afficher la vue "Émulation" dans le tiroir de la console. Il est activé par défaut (je suppose), mais un peu caché. La clé consiste à appuyer d'abord sur la touche ECHAP mode dev (maintenant je ne sais pas s'il est activé par défaut). Vous devriez voir un volet avec 4 "onglets" incluant "Émulation" en bas. J'ai cité les onglets car il me semblait plus être une barre d'état et je garde en cliquant dessus et rien ne se passe, jusqu'à ce que j'ai accidentellement redimensionné le volet.
Doux ... Ce comportement (émulation de périphérique en cours et mode débogage) fonctionne dans Chromium sous Linux Ubuntu en appuyant sur F12 puis sur l'icône du tiroir. :)
Plus d'infos: Quelques informations supplémentaires, notamment des captures d'écran