Websites in verschillende schermformaten bekijken met Chrome


Met de DevTools van de Google Chrome-browser kun je websites in verschillende schermformaten bekijken om zo te zien hoe een responsive website eruit ziet op een telefoon of tablet. Dit is handig voor webontwikkelaars, content managers, maar ook voor gewone gebruikers die de functionaliteiten van websites ontwikkeld voor mobiel gebruik (zoals Instagram) willen benutten.

DevTools openen in Google Chrome

Om de DevTools in Chrome te openen klik je op het menu-icoontje rechtsboven in je scherm en vervolgens op Meer hulpprogramma's. In het uitklapmenu dat nu verschijnt klik je op Hulpprogramma's voor ontwikkelaars. Je kunt het ook sneller doen door de toetsen Control + Shift + I in te drukken:


Pagina's in verschillende formaten bekijken

Als je in de DevTools-modus bent, kun je op het scherm-icoontje klikken om de Device Toolbar (apparatentaakbalk) te openen. Dat kun je ook doen door op Control + Shift + M te drukken:




Op deze taakbalk kun je vervolgens kiezen of je de website als Responsive wilt bekijken of de formaten zelf invoeren. Maar er staan ook al een aantal formaten van bekende apparaten in, waardoor je meteen kunt zien hoe de website eruit ziet op bijvoorbeeld een iPhone of een Samsung Galaxy S5:



Mocht je nog andere apparaten in gedachte hebben, dan kun je die schermformaten onder de naam van het desbetreffende apparaat ook toevoegen door op het menu-icoontje van DevTools te klikken en Add Device te selecteren.

Afbeelding: © Google.
Gepubliceerd door RoelCCM. Laatste update 5 januari 2018 om 04:47 door BobCCM.
Het document met titel "Websites in verschillende schermformaten bekijken met Chrome" van CCM (https://nl.ccm.net/) is onder voorwaarden van de Creative Commons-licentie gepubliceerd. Je kunt dit artikel kopiëren en kopieën van het artikel aanpassen volgens onze algemene voorwaarden.