Naarmate meer en meer mensen gaan surfen op hun mobiele apparaten, wordt het steeds belangrijker voor ons - de webmasters - om ervoor te zorgen dat onze websites goed worden weergegeven in de mobiele browser. Responsive web design is waarschijnlijk de beste keuze, maar toch moet er nog veel getest worden om ervoor te zorgen dat alles goed past in alle apparaten en op het scherm. Het is bijna onmogelijk om alle mobiele apparaten ter wereld te bemachtigen, maar met een handige tool in de ontwikkelaarstool van Google Chrome, kunt u eenvoudig uw website testen in een grote lijst met mobiele apparaten (zonder een cent te besteden).

De emulatie van de apparaatmodus in de ontwikkelaarshulpmiddelen van Chrome is een handig hulpmiddel om uw website te testen op meerdere mobiele apparaten. Zoals de naam al aangeeft, emuleert het de browser op verschillende apparaten, zodat u kunt zien hoe uw website in elke browser wordt weergegeven.

Om aan de slag te gaan, opent u Chrome en laadt u de website die u wilt testen. Druk op F12 ("Cmd + Opt + I" voor Mac OS X) om de ontwikkelaarstool te openen. U kunt ook met de rechtermuisknop klikken en "Inspect Element" selecteren.

Klik in het venster Developer Tool op het mobiele pictogram in de linkerbovenhoek.

Schakel terug naar het hoofdvenster van Chrome en je zou de website in een rastermodus zien veranderen.

Nu hoeft u alleen maar het mobiele apparaat in de vervolgkeuzelijst "Apparaat" te selecteren. De website zal zichzelf automatisch aanpassen om te passen bij de schermgrootte van het apparaat.

Als u door de lijst met apparaten bladert, vindt u enkele van de populaire apparaten zoals iPhone 3GS, 4, 5, 6, 6 Plus, Samsung Galaxy Note, enzovoort.

Andere dingen die u in de apparaatmodus kunt testen, zijn het wijzigen van de schermresolutie, het instellen van de pixelverhouding, het wijzigen van de user agent van de browser, enz.

Om de "apparaatmodus" te verlaten, keert u eenvoudigweg terug naar het Developer Tool-venster en klikt u opnieuw op het mobiele pictogram of sluit u eenvoudig het venster Developer Tool.

Conclusie

De ontwikkelaarstool in Google Chrome is een zeer krachtige en nuttige tool voor webmasters en ontwikkelaars om hun websites te testen en debuggen. Er is ook een vergelijkbaar hulpmiddel in Firefox (in feite komen de meeste browsers met een ontwikkelaarstoolmodus), maar die in Chrome wordt geleverd met meer functies en is gemakkelijker te gebruiken.