Hoe de mobiele browser-emulator te gebruiken in Chrome, Firefox, Edge en Opera

Heeft u toegang nodig tot een browser-emulator voor smartphones op uw pc om de mobiele versie van een website waarin u geïnteresseerd bent te testen? Misschien ben je een webontwikkelaar, of wil je dat worden, en moet je een mobiele browser simuleren voor het project waaraan je werkt. Ongeacht uw redenen, hier leest u hoe u toegang krijgt tot een mobiele browseremulator in Google Chrome, Mozilla Firefox, Microsoft Edge en Opera:

Inhoud

1. Hoe de mobiele browser-emulator in Google Chrome in te schakelen en te gebruiken
2. Hoe de mobiele browser-emulator in Mozilla Firefox in te schakelen en te gebruiken?
3. Hoe de mobiele browser-emulator in Microsoft Edge in te schakelen en te gebruiken?
4. Hoe de mobiele browser-emulator in Opera in te schakelen en te gebruiken
5. Bent u tevreden met de beschikbare emulatie-opties voor mobiele browsers?

Hoe de mobiele browser-emulator in Google Chrome in te schakelen en te gebruiken

Navigeer in Google Chrome naar de website die u wilt bekijken in de mobiele browseremulator. Druk vervolgens op de toetsen CTRL + SHIFT + I op uw toetsenbord of klik met de muis op de drie verticale stippen in de rechterbovenhoek om het menu "Google Chrome aanpassen en beheren" te openen. Kies Meer tools, gevolgd door Developer Tools .

Toegang tot ontwikkelaarstools in Google Chrome

Klik of tik op de knop "Toggle device toolbar" (het lijkt op een smartphone naast een tablet) of druk op CTRL + Shift + M op je toetsenbord. Dit activeert de apparaatwerkbalk waar de mobiele pagina is geladen. Standaard gebruikt de apparaatwerkbalk een responsieve sjabloon voor de site die u hebt geladen. Klik erop en kies het mobiele apparaat dat u wilt emuleren. Je opties omvatten veel iPhones, iPads, Surface Duo, twee Samsung Galaxy-apparaten en een Moto G4 mobiele browsersimulator voor pc.

Hoe de mobiele browser-emulator in Google Chrome in te schakelen

TIP: Helaas kunt u de sneltoets CTRL + Shift + M alleen gebruiken nadat u de ontwikkelaarstools hebt ingeschakeld.

Navigeer naar de site die u wilt testen, schakel tussen de verschillende smartphones en tablets en kijk hoe deze eruitziet. Als u klaar bent, drukt u op de X -knop (Sluiten) in de rechterbovenhoek van de ontwikkelaarstools van Google Chrome om terug te gaan naar de standaard bladermodus op het bureaublad.

De mobiele browser-emulator Google Chrome sluiten

TIP: Als je een zware Google Chrome-gebruiker bent, wil je misschien ook leren hoe je de mediabesturingsopties van Google Chrome gebruikt .

Hoe de mobiele browser-emulator in Mozilla Firefox in te schakelen en te gebruiken?

Open in Mozilla Firefox de site waarvoor u een mobiele browsersimulator wilt gebruiken. Druk vervolgens op CTRL + Shift + M op uw toetsenbord of klik op de burger-knop in de rechterbovenhoek om het menu van Firefox te openen en kies Webontwikkelaar .

Toegang tot de hulpprogramma's voor webontwikkelaars in Firefox

Je ziet een menu vol tools die handig zijn voor webontwikkelaars. Selecteer in de lijst "Responsive Design Mode" en deze specifieke modus voor het bekijken van een webpagina wordt in Firefox geladen.

Kies de responsieve ontwerpmodus in Firefox

Firefox schakelt de Responsive Design-modus in . Boven aan het venster ziet u de parameters die door deze emulatiemodus worden gebruikt. Als er geen apparaat is geselecteerd, klikt of tikt u op Responsief om een ​​vervolgkeuzelijst te openen met apparaten die beschikbaar zijn voor emulatie en kiest u vervolgens degene die u wilt simuleren.

Je kunt de mobiele browser simuleren voor veel iPhones, de iPad, de Kindle Fire (Firefox is de enige browser die deze emulatieoptie biedt) en Samsung Galaxy S9-apparaten.

Gebruik de mobiele browser-emulator in Firefox

Wanneer u klaar bent met testen met de browser-emulator voor smartphones, drukt u op de X-knop (Responsive Design Mode sluiten) in de rechterbovenhoek van Mozilla Firefox.

Sluit de mobiele browser-emulator in Firefox

U bent terug in de standaard bladermodus op het bureaublad.

Hoe de mobiele browser-emulator in Microsoft Edge in te schakelen en te gebruiken?

Microsoft Edge gebruikt dezelfde rendering-engine als Google Chrome en biedt dezelfde browser-emulators voor smartphones. Om toegang te krijgen, gaat u naar de website die u wilt testen en drukt u op de toetsen CTRL + SHIFT + I op uw toetsenbord of klikt u op de drie horizontale stippen ( "Instellingen en meer" ) in de rechterbovenhoek van Microsoft Edge. Ga in het menu dat verschijnt naar Meer tools en vervolgens naar Developer Tools .

Toegang tot de ontwikkelaarstools in Microsoft Edge

Klik op de knop "Toggle device emulation" (het lijkt op een smartphone naast een tablet) of druk op CTRL + Shift + M op je toetsenbord. Dit activeert de werkbalk van de emulator voor mobiele browsers. Standaard gebruikt het een Responsive- sjabloon voor de site die u hebt geladen. Klik erop en kies het mobiele apparaat dat u wilt emuleren. Uw opties omvatten dezelfde smartphones en tablets als Google Chrome.

Toegang tot de mobiele browser-emulator in Microsoft Edge

Blader door de site die u wilt testen, wissel tussen de verschillende mobiele apparaten en kijk hoe deze eruitziet. Als u klaar bent, drukt u op de X-knop (Sluiten) in de rechterbovenhoek van Microsoft Edge.

Sluit de mobiele browser-emulator in Microsoft Edge

U bent nu terug in de standaard bladermodus op het bureaublad.

Hoe de mobiele browser-emulator in Opera in te schakelen en te gebruiken

Ga in Opera naar de webpagina die u wilt bekijken alsof u een mobiel apparaat gebruikt. Klik vervolgens op het Opera-pictogram in de linkerbovenhoek ( "Opera aanpassen en beheren" ). Kies in het menu dat wordt geopend de optie Ontwikkelaar gevolgd door Hulpprogramma's voor ontwikkelaars . Als u de voorkeur geeft aan het toetsenbord, drukt u op de toetsen CTRL+Shift+I voor hetzelfde resultaat.

Toegang tot de ontwikkelaarstools in Opera

De ontwikkelaarstools worden weergegeven aan de rechterkant van het browservenster. Klik op de knop "Toggle device toolbar" (het lijkt op een smartphone naast een tablet) of druk op CTRL + Shift + M op je toetsenbord. De werkbalk van het apparaat wordt aan de linkerkant weergegeven. Standaard gebruikt het een Responsive- sjabloon voor de site die u hebt geladen. Klik erop en kies het mobiele apparaat dat u wilt emuleren uit de lijst met opties. Opera biedt dezelfde emulators voor mobiele browsers als Google Chrome en Microsoft Edge, omdat het op dezelfde rendering-engine (Chromium) is gebaseerd.

Toegang tot de mobiele browser-emulator in Opera

Wanneer u klaar bent met testen, drukt u op de X-knop (Sluiten) in de rechterbovenhoek om terug te gaan naar de standaard bladermodus op het bureaublad.

Sluit de mobiele browser-emulator in Opera

Bent u tevreden met de beschikbare emulatie-opties voor mobiele browsers?

Nu weet je hoe je allerlei soorten mobiele apparaten kunt emuleren in je favoriete webbrowser. U zult echter merken dat de meeste webbrowsers dezelfde emulatie-opties bieden die de voorkeur geven aan iPhones en iPads. Als je een moderne Android-smartphone of -tablet wilt emuleren, zijn je kansen vrij klein, zelfs in Google Chrome - de browser die is ontwikkeld door het bedrijf achter Android. Als u de beste resultaten wilt, moet u mogelijk twee browsers gebruiken voor deze taak: Chrome en Firefox, of Firefox en Edge of Opera. Vertel ons voordat u vertrekt wat u van de beschikbare opties vindt.