De smartphonemarkt stopt niet met groeien. Zelfs Google beloont alle "webvriendelijke" pagina's in zijn zoekresultaten. Om deze reden worden steeds meer websites geoptimaliseerd om correct te openen op alle soorten mobiele apparaten, zelfs als we de desktopversies buiten beschouwing laten, of sommige functies of inhoud daarin beperken. Webbrowsers, zoals: Kopen Google Reviews Chrome , detecteren vanaf waar we een website laden (een pc, een mobiel, tablet, enz.), en de bijbehorende versie opvragen bij de server. Maar gelukkig is het heel gemakkelijk om de server voor de gek te houden.
Wanneer we de webbrowser gebruiken, zijn we meestal gewend om er een URL in te typen, of direct een zoekopdracht in de zoekmachine te doen, en te wachten op de resultaten. Maar weten we echt alles wat eronder gebeurt als we dit doen?
De Chrome Developer Console
Alle webbrowsers, vooral Chrome, hebben allerlei functies en hulpmiddelen voor alle gebruikers. Een van hen is de ontwikkelconsole . Zoals de naam al doet vermoeden, is dit een console die is ontworpen zodat webontwerpers kunnen zien hoe hun website werkt, in detail kunnen weten wat er aan de frontend gebeurt en verschillende wijzigingen en aanpassingen op de pagina "on the fly" kunnen testen.
We kunnen deze console op elk moment openen door simpelweg op de F12-toets op ons toetsenbord. We kunnen deze console ook openen door ergens op een pagina met de rechtermuisknop te klikken en de " Inspecteren ” optie, of met de sneltoets Besturing + Shift + I. Dit wordt geopend (standaard, hoewel we dit kunnen wijzigen) in het rechterdeel van het venster, en van daaruit zullen we een groot aantal opties kunnen zien.
We zullen de volledige HTML kunnen zien van de pagina die we open hebben staan, alle elementen waaruit deze bestaat, alle verbindingen die met de server worden gemaakt, de prestaties van de pagina, het geheugen dat deze in beslag neemt … Absoluut alles wat met internet te maken heeft.
We kunnen elementen aan de code toevoegen , elk punt op de pagina wijzigen, inhoud verwijderen die ons niet interesseert, fouten zien, mogelijke knelpunten of problemen detecteren die de SEO van het web negatief kunnen beïnvloeden ... de mogelijkheden zijn eindeloos. We kunnen zelfs code rechtstreeks vanaf uw console in de pagina injecteren om te zien hoe deze reageert.
Natuurlijk moeten we er rekening mee houden dat de wijzigingen die we vanaf deze console aanbrengen lokaal zijn. We hacken de betreffende website niet en slaan ook geen wijzigingen op. Om de pagina opnieuw te laden, hoeven we alleen maar op F5 te drukken om hem bij te werken, en hij keert terug naar zijn oorspronkelijke staat.
Om de console te sluiten, kunnen we opnieuw de F12-toets gebruiken, of gewoon op de sluitknop klikken die we rechtsboven in deze ontwikkelconsole vinden.
Het weergavetype van een website wijzigen
Een van de meest interessante tools die we in deze ontwikkelconsole kunnen vinden, is de mogelijkheid om het type apparaat te wijzigen dat het laden van de pagina simuleert. Chrome gebruikt standaard de eigenschappen van onze pc (dat wil zeggen, geef aan de server aan dat we een computer zijn en, afhankelijk van de resolutie en het aandeel van het scherm, zal de corresponderende pagina tonen) om de pagina weer te geven. Maar als het web responsive is, kan dit veranderen.
Om dit te doen, openen we de ontwikkeltools die we zojuist in het vorige punt hebben gezien, en we zullen naar een klein pictogram kijken dat in de linkerbovenhoek van dat gedeelte verschijnt.
Met dit pictogram kunnen we snel het type weergave van de webbrowser wijzigen. Zodra we erop klikken, kunnen we zien hoe de grootte van de pagina verandert , en de manier waarop de elementen worden geladen. Als dit niet het geval is, moeten we mogelijk op F5 drukken om opnieuw te laden.
Bovenaan zien we een balk van waaruit we verschillende aspecten van deze mobiele weergave kunnen wijzigen. We kunnen bijvoorbeeld simuleren: hoe het web eruit zou zien op een specifiek apparaat of pas de zoomniveaus aan. We kunnen ook handmatig de afmetingen van het scherm specificeren, in pixels, als geen van de standaard opties zich aanpassen aan wat we zoeken.
Een zeer interessante knop die we ook kunnen vinden, is degene waarmee we het computerscherm kunnen draaien. We kunnen dus zien hoe het web eruit zou zien als gebruikers het in liggende modus spelen.
Wanneer we de gewenste tests hebben uitgevoerd, kunnen we deze modus eenvoudig verlaten door de ontwikkelaarsconsole te sluiten. Nogmaals, het kan zijn dat we de pagina moeten vernieuwen om deze weer correct weer te geven.
Chrome-extensies
Naast het gebruik van de ontwikkelaarsconsole, zullen we dit ook kunnen doen met enkele extensies die we volledig gratis kunnen vinden in de Chrome Store. Enkele van de beste zijn als volgt:
Mobiele weergaveschakelaar
Met deze extensie kunnen we met één klik schakelen tussen de normale weergave en de mobiele weergave. Wanneer het wordt geïnstalleerd, wordt een pictogram in de werkbalk gemaakt, dat als een schakelaar fungeert, afhankelijk van of we het geactiveerd of gedeactiveerd willen hebben. Standaard simuleert het een iOS 14 systeem, maar we kunnen het aanpassen en de extensie naar wens aanpassen.
Responsieve kijker
Nog een zeer nuttige tool voor ontwikkelaars om te controleren hoe goed hun responsieve websites werken. Hierdoor kunnen we meerdere schermen, van verschillende afmetingen, tegelijkertijd zien. Op deze manier kunnen we verschillende configuraties in beeld hebben en controleren of alles er correct uitziet en geen problemen geeft in welk type apparaat dan ook.
Mobiele simulator voor Chrome
Met deze tool kunnen we een groot aantal echte apparaten simuleren (5 Android modellen, 15 Apple, 4 tablets en 4 speciale apparaten) om te kunnen zien hoe de pagina's eruitzien, afhankelijk van de CSS die wordt aangevraagd volgens de grootte van het scherm elk.
Responsieve webdesign-tester
Ten slotte stelt deze extensie, hoewel minder bekend, ons in staat om grondig te testen hoe responsieve weergaven van een website werken op basis van verschillende parameters. Het stelt ons in staat om met verschillende mobiele telefoons te testen, inclusief standaard de meest voorkomende resoluties en verhoudingen. Bovendien stuurt deze extensie de juiste User-Agent naar de server zodat de resultaten nauwkeuriger zijn. Het werkt zelfs offline, iets wat niet alle extensies doen.
