Vous avez 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 ? Vous êtes peut-être un développeur Web ou vous souhaitez le devenir et vous devez simuler un navigateur mobile pour le projet sur lequel vous travaillez. Quelles^(Regardless) que soient vos raisons, voici comment accéder à un émulateur de navigateur mobile dans Google Chrome , Mozilla Firefox , Microsoft Edge et Opera :

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. Ensuite, appuyez sur les CTRL + SHIFT + I de votre clavier ou, avec la souris, cliquez sur les trois points verticaux dans le coin supérieur droit pour ouvrir le menu "Personnaliser et contrôler Google Chrome" . ^{(“Customize and control Google Chrome”)}Choisissez Plus d'outils,^{(More tools, )} suivi de Outils de développement^{(Developer Tools)} .

Accéder aux outils de développement^{(Access Developer Tools)} dans Google Chrome

Cliquez ou appuyez sur le bouton "Basculer la barre d'outils de l'appareil"^{(“Toggle device toolbar”)} (il ressemble à un smartphone à côté d'une tablette) ou appuyez sur CTRL + Shift + M sur votre clavier. Cela active la barre d'outils de l'appareil où la page mobile est chargée. Par défaut, la barre d'outils de l'appareil utilise un modèle Responsive pour le site que vous avez chargé. ^(Responsive)Cliquez^(Click) dessus et choisissez l'appareil mobile que vous souhaitez émuler. Vos options incluent de nombreux iPhones, iPads, Surface Duo , deux appareils Samsung Galaxy et un simulateur de navigateur mobile Moto G4 pour PC.^{(Moto G4 mobile)}

Comment activer l'émulateur de navigateur mobile dans Google Chrome

ASTUCE :^(TIP:) Malheureusement, vous ne pouvez utiliser le raccourci clavier CTRL + Shift + M qu'après avoir activé les outils de développement.

Naviguez^(Navigate) sur le site que vous souhaitez tester, basculez entre les différents smartphones et tablettes et voyez à quoi il ressemble. Lorsque vous avez terminé, appuyez sur le bouton X (Fermer)^{(X (Close))} dans le coin supérieur droit des outils de développement de Google Chrome pour revenir au mode de navigation standard sur le bureau.

Fermeture de l'émulateur de navigateur mobile Google Chrome

ASTUCE :^(TIP:) Si vous êtes un grand utilisateur de Google Chrome , vous souhaiterez peut-être également apprendre à utiliser les options de contrôle multimédia de Google Chrome^{(how to use Google Chrome’s media control options)} .

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. Ensuite, appuyez sur CTRL + Shift + M sur votre clavier ou cliquez sur le bouton burger dans le coin supérieur droit pour ouvrir le menu de Firefox et choisissez Développeur Web^{(Web Developer)} .

Accéder aux outils de développement Web dans ^{(Web Developer)}Firefox

Vous voyez un menu rempli d'outils utiles aux développeurs Web. Dans la liste, sélectionnez "Responsive Design Mode", et ce mode particulier d'affichage d'une page Web est chargé dans Firefox .

Choisissez le mode de conception réactive^{(Responsive Design Mode)} dans Firefox

Firefox active le mode de conception réactif^{(Responsive Design Mode)} . En haut de la fenêtre, vous voyez les paramètres utilisés par ce mode d'émulation. Si aucun appareil n'est sélectionné, cliquez ou appuyez sur Responsive pour ouvrir une liste déroulante avec les appareils disponibles pour l'émulation, puis choisissez celui que vous souhaitez simuler.

Vous pouvez simuler le navigateur mobile pour de nombreux iPhones, l'iPad, le Kindle Fire ( Firefox est le seul navigateur à proposer cette option d'émulation) et les appareils Samsung Galaxy S9 .

Utiliser l'émulateur de navigateur mobile dans Firefox

Lorsque vous avez terminé les tests avec l'émulateur de navigateur pour smartphone, appuyez sur le bouton X (Fermer le mode de conception réactif)^{(X (Close Responsive Design Mode))} dans le coin supérieur droit de Mozilla Firefox .

Fermez l'émulateur de navigateur mobile dans Firefox

Vous êtes de retour 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 tester et appuyez sur les CTRL + SHIFT + I de votre clavier ou cliquez sur les trois points horizontaux ( "Paramètres et plus"^{(“Settings and more”)} ) dans le coin supérieur droit de Microsoft Edge . Dans le menu qui s'affiche, accédez à Plus d'outils^{(More tools)} puis à Outils de développement^{(Developer Tools)} .

Accéder aux outils de développement dans ^(Developer)Microsoft Edge

Cliquez sur le bouton "Basculer l'émulation de l'appareil"^{(“Toggle device emulation”)} (il ressemble à un smartphone à côté d'une tablette) ou appuyez sur CTRL + Shift + M sur votre clavier. Cela active la barre d'outils de l'émulateur de navigateur mobile. Par défaut, il utilise un modèle Responsive pour le site que vous avez chargé. ^(Responsive)Cliquez^(Click) dessus et choisissez l'appareil mobile que vous souhaitez émuler. Vos 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, passez d'un appareil mobile à l'autre et voyez à quoi il ressemble. Lorsque vous avez terminé, appuyez sur le bouton X (Fermer)^{(X (Close))} dans le coin supérieur droit de Microsoft Edge.

Fermez l'émulateur de navigateur mobile dans Microsoft Edge

Vous êtes maintenant de retour 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 ( "Personnaliser et contrôler Opera"^{(“Customize and control Opera”)} ). Dans le menu qui s'ouvre, choisissez Développeur^(Developer) suivi de Outils^{(Developer tools)} de développement . Si vous préférez le clavier, appuyez sur les CTRL+Shift+I pour le même résultat.

Accéder aux outils de développement dans Opera

Les outils de développement^{( Developer tools)} sont affichés sur le côté droit de la fenêtre du navigateur. Cliquez sur le bouton "Basculer la barre d'outils de l'appareil"^{(“Toggle device toolbar”)} (il ressemble à un smartphone à côté d'une tablette) ou appuyez sur CTRL + Shift + M sur votre clavier. La barre d'outils de l'appareil s'affiche à gauche. Par défaut, il utilise un modèle Responsive pour le site que vous avez chargé. ^(Responsive)Cliquez^(Click) 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^(Close) ) 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-^(Are) vous satisfait des options d'émulation de navigateur mobile disponibles ?

Vous savez maintenant comment émuler toutes sortes 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 chances sont plutôt minces, 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.

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do you need to access a smartphоne browser еmulator on your РC tо test the mobile versiоn of a website you are interested in? Maybe you аre a web developer, or you want to become оne, and you need to simulate a mobile browser for the project you are working on. Regardless of your reasons, here іs how to access a mobile browser emulator in Google Chrome, Mozilla Firefox, Mіcrosoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• Comment couper un onglet dans Chrome, Firefox, Microsoft Edge et Opera

• Comment imprimer un article sans annonces dans tous les grands navigateurs

• Comment broyer un site Web à la barre des tâches ou au Start Menu dans Windows 10

• Comment faire Chrome le default browser dans Windows 10 (Firefox & Opera)

• Comment changer le default browser dans Windows 11

• Put Chrome et autres navigateurs en plein écran (Edge, Firefox, et Opera)

• Comment désactiver les notifications Chrome: Tout ce que vous avez besoin de savoir

• Comment zoomer et zoom arrière dans votre web browser

• Où sont stockés des cookies dans Windows 10 pour tous les grands navigateurs?

• Make InPrivate or Incognito shortcuts pour Firefox, Chrome, Edge, Opera, ou Internet Explorer

• Comment mettre de côté des onglets dans Microsoft Edge et les utiliser plus tard

• Quelle version de Chrome ai-je? 6 façons de savoir

• Comment débloquer Adobe Flash Player sur Windows 10's Microsoft Edge

• Exportez les mots de passe de Chrome, Firefox, Opera, Microsoft Edge et Internet Explorer

• 12 façons de gérer les onglets dans Microsoft Edge

• Quelle version de Microsoft Edge ai-je?

• Comment faire le texte plus grand dans Chrome, Edge, Firefox et Opera?

• Go incognito avec un shortcut key dans Chrome, Edge, Firefox et Opera

• Comment changer le search engine sur Chrome pour Windows, MacOS, Android et IOS

• Comment obtenir, configurer et supprimer des extensions Microsoft Edge