Résumé des étapes
Besoin d’accéder à un émulateur de navigateur de smartphone sur votre PC pour tester la version mobile d’un site web qui vous intéresse ? Peut-être êtes-vous un développeur Web, ou souhaitez-vous le devenir, et avez-vous besoin de simuler un navigateur mobile pour le projet sur lequel vous travaillez. Quelles que soient vos raisons, voici comment accéder à un émulateur de navigateur mobile dans Google Chrome, Mozilla Firefox, Microsoft Edge et Opera :
Étapes rapides :
Comment activer et utiliser l’émulateur de navigateur mobile dans Google Chrome
- Dans Google Chrome, accédez au site Web que vous souhaitez afficher dans l’émulateur de navigateur mobile.
- Appuyez sur les touches CTRL + SHIFT + I de votre clavier pour accéder aux outils de développement.
- Appuyez sur CTRL + Maj + M sur votre clavier pour ouvrir la barre d’outils de l’appareil,
- Cliquez sur la barre d’outils de l’appareil et choisissez l’appareil mobile que vous souhaitez émuler.
Comment activer et utiliser l’émulateur de navigateur mobile dans Google Chrome
Dans Google Chrome, accédez au site Web que vous souhaitez afficher dans l’émulateur de navigateur mobile. Appuyez ensuite sur la CTRL + MAJ + I touches du clavier ou, avec la souris, cliquez sur les trois points verticaux dans le coin supérieur droit pour l’ouvrir «Personnaliser et contrôler Google Chrome» menu choisir Plus d’outils, suivie par Outils de développement.
Accéder aux outils de développement dans Google Chrome
Cliquez ou appuyez dessus «Basculer la barre d’outils de l’appareil» (ressemble à un smartphone à côté d’une tablette) ou appuyez sur CTRL + Maj + M sur ton clavier Cela active la barre d’outils de l’appareil sur lequel la page mobile est chargée. Par défaut, la barre d’outils de l’appareil utilise une Sensible modèle pour le site de fret. Cliquez dessus et choisissez l’appareil mobile que vous souhaitez émuler. Leurs options incluent de nombreux iPhones, iPads, Surface Duo, deux appareils Samsung Galaxy et un simulateur de navigateur mobile Moto G4 pour PC.
Comment activer l’émulateur de navigateur mobile dans Google Chrome
CONSEILS: Malheureusement, vous pouvez utiliser le CTRL + Maj + M raccourci clavier uniquement après avoir activé les outils de développement.
Parcourez le site que vous souhaitez tester, basculez entre différents smartphones et tablettes et voyez à quoi il ressemble. Lorsque vous avez terminé, appuyez sur la XFermer) dans le coin supérieur droit des outils de développement de Google Chrome pour revenir au mode de navigation standard du bureau.
Fermez l’émulateur de navigateur mobile Google Chrome
CONSEILS: Si vous êtes un gros utilisateur de Google Chrome, vous voudrez peut-être également apprendre à utiliser les options de contrôle multimédia de Google Chrome.
Comment activer et utiliser l’émulateur de navigateur mobile dans Mozilla Firefox
Dans Mozilla Firefox, ouvrez le site pour lequel vous souhaitez utiliser un simulateur de navigateur mobile. Puis appuyez CTRL + Maj + M sur votre clavier ou cliquez sur le bouton hamburger dans le coin supérieur droit pour ouvrir le menu Firefox et choisissez développeur web.
Accéder aux outils de développement Web dans Firefox
Vous verrez un menu rempli d’outils utiles pour les développeurs Web. Dans la liste, sélectionnez «Mode de conception réactif» et cette manière particulière de visualiser une page Web est chargée dans Firefox.
Choisissez le mode de conception réactif dans Firefox
activer firefox Mode de conception réactif. Dans la partie supérieure de la fenêtre, vous verrez les paramètres utilisés par ce mode d’émulation. Si aucun appareil n’est sélectionné, cliquez ou tapez sur Sensible pour ouvrir une liste déroulante avec les périphériques disponibles pour l’émulation, puis choisissez celui que vous souhaitez simuler.
Il peut simuler le navigateur mobile pour de nombreux iPhones, iPads, Kindle Fire (Firefox est le seul navigateur qui offre cette option d’émulation) et les appareils Samsung Galaxy S9.
Utiliser l’émulateur de navigateur mobile dans Firefox
Lorsque vous avez terminé de tester l’émulateur de navigateur de smartphone, appuyez sur la touche X (mode de conception quasi réactif) dans le coin supérieur droit de Mozilla Firefox.
Fermez l’émulateur de navigateur mobile dans Firefox
Vous êtes revenu au mode de navigation standard du bureau.
Comment activer et utiliser l’émulateur de navigateur mobile dans Microsoft Edge
Microsoft Edge utilise le même moteur de rendu que Google Chrome et propose les mêmes émulateurs de navigateur pour smartphone. Pour y accéder, visitez le site Web que vous souhaitez essayer et appuyez sur le bouton CTRL + MAJ + I touches du clavier ou cliquez sur les trois points horizontaux («Configuration et plus») dans le coin supérieur droit de Microsoft Edge. Dans le menu qui s’affiche, accédez à Plus d’outils et alors Outils de développement.
Accéder aux outils de développement dans Microsoft Edge
Clique dessus «Changer d’émulation d’appareil» (ressemble à un smartphone à côté d’une tablette) ou appuyez sur CTRL + Maj + M sur ton clavier Cela active la barre d’outils de l’émulateur de navigateur mobile. Par défaut, il utilise un Sensible modèle pour le site de fret. Cliquez dessus et choisissez l’appareil mobile que vous souhaitez émuler. Ses options incluent les mêmes smartphones et tablettes que Google Chrome.
Accéder à l’émulateur de navigateur mobile dans Microsoft Edge
Parcourez le site que vous souhaitez tester, basculez entre différents appareils mobiles et voyez à quoi il ressemble. Lorsque vous avez terminé, appuyez sur la XFermer) dans le coin supérieur droit de Microsoft Edge.
Fermez l’émulateur de navigateur mobile dans Microsoft Edge
Il est maintenant revenu au mode de navigation standard du bureau.
Comment activer et utiliser l’émulateur de navigateur mobile dans Opera
Dans Opera, visitez la page Web que vous souhaitez afficher comme si vous utilisiez un appareil mobile. Cliquez ensuite sur l’icône Opera en haut à gauche («Personnalisez et contrôlez Opera»). Dans le menu qui s’ouvre, choisissez développeur suivie par Outils de développement. Si vous préférez le clavier, appuyez sur la CTRL + Maj + I touches pour le même résultat.
Accéder aux outils de développement dans Opera
La Outils de développement sont affichés sur le côté droit de la fenêtre du navigateur. Clique dessus «Basculer la barre d’outils de l’appareil» (ressemble à un smartphone à côté d’une tablette) ou appuyez sur CTRL + Maj + M sur ton clavier La barre d’outils de l’appareil s’affiche à gauche. Par défaut, il utilise un Sensible modèle pour le site de fret. Cliquez dessus et choisissez l’appareil mobile que vous souhaitez émuler dans la liste des options. Opera propose les mêmes émulateurs de navigateur mobile que Google Chrome et Microsoft Edge, car il est basé sur le même moteur de rendu (Chromium).
Accéder à l’émulateur de navigateur mobile dans Opera
Lorsque vous avez terminé les tests, appuyez sur le bouton X (Fermer) dans le coin supérieur droit pour revenir au mode de navigation standard sur le bureau.
Fermez l’émulateur de navigateur mobile dans Opera
Êtes-vous satisfait des options d’émulation de navigateur mobile disponibles ?
Vous savez maintenant comment émuler tous les types d’appareils mobiles dans votre navigateur Web préféré. Cependant, vous remarquerez peut-être que la plupart des navigateurs Web offrent les mêmes options d’émulation qui favorisent les iPhones et les iPads. Si vous souhaitez émuler un smartphone ou une tablette Android moderne, vos options sont assez limitées, même dans Google Chrome, le navigateur développé par la société derrière Android. Si vous souhaitez obtenir les meilleurs résultats, vous devrez peut-être utiliser deux navigateurs pour cette tâche : Chrome et Firefox, ou Firefox et Edge ou Opera. Avant de partir, dites-nous ce que vous pensez des options disponibles.