Een voorbeeld van uw website op verschillende apparaten bekijken met Google Chrome

Wanneer u een website maakt, wilt u dat deze responsief is en zich aanpast aan verschillende schermformaten. Een manier om dit te testen is door de ingebouwde ontwikkelaarstools van Google Chrome te gebruiken.

Met DevTools van Chrome kunt u fouten opsporen in verschillende aspecten van uw website. Dit omvat het wijzigen en bekijken van de HTML-broncode en CSS. Het stelt u ook in staat om client-side JavaScript-code te debuggen en netwerkverkeer te bekijken.

DevTools heeft ook een optie om een ​​voorbeeld van uw website op verschillende apparaten te bekijken. Dit omvat verschillende soorten mobiele apparaten, iPads, tablets en meer.

Om de apparaatwerkbalk in Google Chrome te openen, moet u de Venster Chrome-ontwikkelaarstools:

1. Open een website.
2. Klik met de rechtermuisknop op de pagina en klik op Inspecteren.
3. Het Chrome DevTools-venster wordt geopend. Het kan aan de zijkant of onderkant van uw browser worden geopend, of als een nieuw venster.
4. Linksboven in het venster staan ​​twee pictogrammen. Klik op het pictogram dat meerdere apparaten van verschillende grootte toont.
instagram viewer
5. Het scherm verandert om u te laten zien hoe de website eruit zou zien op een mobiel apparaat.

Schakelen tussen verschillende apparaten

Gebruik de vervolgkeuzelijst bovenaan de apparaatwerkbalk om tussen verschillende apparaten te schakelen.

1. Helemaal bovenaan de werkbalk wordt weergegeven op welk type apparaat u uw website momenteel bekijkt. Klik op de vervolgkeuzelijst om een ​​ander apparaat uit de lijst te kiezen.
2. In plaats van een bestaand apparaat te kiezen, kun je ervoor kiezen om de website responsive te bekijken. Klik op de vervolgkeuzelijst en selecteer de Snel reagerend keuze.
3. Naast de vervolgkeuzelijst kun je er ook voor kiezen om een ​​aangepaste breedte en hoogte van een apparaat in te voeren.
4. In plaats van een breedte en hoogte in te typen, kunt u ook op de hoeken van het venster klikken en slepen om de grootte aan te passen.

Een aangepast apparaat toevoegen

Als u een aangepaste breedte en hoogte wilt opslaan, kunt u een aangepast apparaat toevoegen. De apparaatwerkbalk geeft dan uw nieuwe apparaat weer in de vervolgkeuzelijst voor apparaten.

1. Klik op de vervolgkeuzelijst met alle apparaten.
2. Klik op Bewerk.
3. Zorg ervoor dat u onder de zijbalk Instellingen de Apparaten tabblad geselecteerd. Hier kunt u ook een lijst bekijken met meer apparaten waaruit u kunt kiezen.
4. Klik op Aangepast apparaat toevoegen.
5. Voer een naam, breedte en hoogte in voor het apparaat. Zorg ervoor dat u ook het apparaattype selecteert, bijvoorbeeld of het een mobiel of desktopapparaat is. Als je de. uitbreidt Hints voor gebruikersagenten optie, kunt u andere details toevoegen, zoals het apparaatmodel, merk of versie.
6. Klik op Toevoegen.
7. Ga terug naar de vervolgkeuzelijst met alle apparaten. U ziet uw nieuwe aangepaste apparaat in de lijst.
8. U kunt deze details later opnieuw bewerken door terug te gaan naar de aangepaste apparaatpagina. Klik op de Bewerk knop naast de naam van uw apparaat om te beginnen met bewerken.

Het is om verschillende redenen erg handig om een ​​voorbeeld van uw website op verschillende apparaten en schermformaten te kunnen bekijken.

Ten eerste kunt u de prestaties van uw website op verschillende apparaten testen. Sommige mobiele telefoons hebben mogelijk hogere netwerksnelheden of CPU-beperking dan andere.

Met de apparaatwerkbalk kunt u schakelen tussen verschillende netwerksnelheidsopties. Hiermee kunt u de snelheid van eventuele oproepen naar een server testen of het laden en weergeven van gegevens op uw website testen.

Bovendien kunt u ook bekijken hoe het ontwerp eruitziet op een bepaald apparaat, vanuit een UI-oogpunt. Als u gebruik maakt van CSS-mediaquery's, kunt u deze tool gebruiken om te controleren of ze werken zoals u verwacht.

U kunt het DevTools-venster van Google Chrome gebruiken om te testen hoe uw website zich aanpast aan verschillende schermformaten en om ervoor te zorgen dat uw website responsief is. U kunt het ook gebruiken om de prestaties van uw website te testen en of uw mediaquery's werken zoals verwacht.

U kunt de DevTools van Google Chrome ook voor andere doeleinden gebruiken. U kunt het gebruiken om eventuele CSS-problemen op te sporen door de CSS te wijzigen op het tabblad Stijlen van het Element-venster. Hierdoor kunt u eventuele CSS-wijzigingen meteen bekijken, wat uw codeerworkflow kan versnellen.

Hoe Google Chrome te gebruiken om CSS te debuggen

Lees volgende