Websites in verschillende schermformaten bekijken met Chrome

Stel een vraag

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.
Jean-François Pillou

Onze content is geschreven in samenwerking met IT-experts, onder leiding van Jean-François Pillou, de oprichter van CCM.net en Digital Director bij de Figaro Group. CCM is een toonaangevende internationale tech-website en is beschikbaar in elf verschillende talen.

Meer over het team van CCM