Als u ooit wilt weten hoe uw favoriete websites zijn gestructureerd, kunnen de "Inspecteer" -services van een browser een verborgen zegen zijn. We hebben de tool 'Inspect' van Chrome besproken en Firefox heeft ook een vergelijkbaar aanbod.

De Firefox "Inspect Element" -tool kan u helpen bij het onderzoeken van de onderbouwing van de werking van een website, inclusief de HTML- en CSS-elementen die het gebruikt, de belasting op het netwerk, de latency van de laadelementen en de bestanden die het in de opslag plaatst, zoals cookies.

Ervaren ontwikkelaars vinden misschien niet veel nieuws in deze inleiding. Nieuwelingen en dagelijkse webgebruikers moeten echter een nieuwe, krachtige kant vinden voor de mogelijkheden van Firefox en een groot aantal bestanden en bewerkingen die zich onder elke site op internet bevinden.

Installatie

Als u Firefox gebruikt, hoeft u verder niets te doen. Als u Firefox wilt gaan gebruiken en Windows, Linux, Mac, iOS of Android gebruikt, volgt u deze link om de nieuwste versie van de browser te vinden. Installeer de gedownloade installatiebestanden zoals u dat gewend bent door er op te dubbelklikken of op te tikken als u op een smartphone bent.

Grote Linux-distro's komen waarschijnlijk met Firefox vooraf geïnstalleerd of hebben exemplaren van Firefox in hun Software center / pakketrepository's die de gebruiker gemakkelijk kan installeren.

"Inspect Element" openen

Na de installatie van Firefox, kunt u zijn inspecteur vinden door met de rechtermuisknop op een element op een webpagina te klikken. Dat toont u een vervolgkeuzemenu zoals hieronder afgebeeld, waar "Inspect Element" zich onderaan de lijst bevindt.

Inspecteur

Als u op 'Inspect Element' klikt, wordt het infovenster onder aan uw scherm onmiddellijk geopend. Op dit punt worden de titels een beetje wazig omdat de inspecteur technisch het "Inspector" -gedeelte van zijn diensten heeft geopend.

In elk geval wordt het element waarop u hebt geklikt weergegeven in het midden van het gereedschap en wanneer u met uw muis over dat element beweegt, zoals het tag Ik zweef over in de onderstaande schermafbeelding - de "Inspector" zal dat visuele element op je scherm markeren in de webpagina zelf.

Dit maakt het gemakkelijk om te weten naar welke elementen u kijkt. Het maakt het ook gemakkelijk om de verschillende eigenschappen van die elementen te vinden. Als u naar de rechterkant van de "Inspecteur" kijkt, ziet u de eigenschappen van die specifieke persoon tag, inclusief de instellingen voor marge, opvulling, rand, lettergrootte en verticale uitlijning.

Als u door het rechterdeelvenster bladert, kunt u de eigenschappen zien die het van andere elementen heeft geërfd. U kunt zelfs de eigenschappen in dat venster wijzigen en ze in realtime op de webpagina zien verschijnen.

Stijl-editor

U kunt verder gaan op het gebied van cascading style sheets (CSS) door de werkbalk bovenaan het infovenster te volgen. Klik op de plek waar het "Style Editor" staat om een ​​nieuw dialoogvenster te openen met drie nieuwe panelen onder aan het scherm.

Hier ziet u de twee stijlbladbestanden die DuckDuckGo gebruikt, de elementen van het eerst geselecteerde stijlblad en de verschillende "@media" -regels van dat blad, die responsief ontwerp bepalen voor kleinere en grotere schermen.

Je kunt deze stylesheets bewerken zoals je kunt in het gedeelte "Inspector". In dit geval zijn er veel regels om uit te kiezen: 1262 regels in het eerste stylesheet alleen.

Als u nog verder in de werkbalk naar 'Netwerkcontrole' navigeert, vindt u de verzoeken van de website voor die bestanden en hun statussen. Andere elementen zoals afbeeldingen en lettertypen kunnen ook op dat tabblad aanwezig zijn en u kunt al die verzoeken en de grootte van elk bestand bekijken nadat de aanvraag is verwerkt.

Prestatie

Wanneer u het tabblad "Prestaties" opent, moet u op de knop "Opnameprestaties starten" klikken om de inspecteur informatie te laten verzamelen. Binnen een paar seconden ontdekt het de frames per seconde (FPS) die uw pagina uitvoert, gebeurtenissen in documentobjectmodel (DOM) die plaatsvonden en herrekeningen van stijl, naast de tijd (meestal in milliseconden) dat deze elementen naar laden.

Voor deze site kunt u de gemarkeerde DOM-gebeurtenis zien, een mouseover die 603 milliseconden duurde om te laden. De gemiddelde FPS voor deze pagina was ongeveer 39. En de grafiek met mijn reeks reactietijden bereikte 9000 milliseconden voor sommige evenementen.

Geheugen

In het tabblad "Geheugen" moet u ook op een knop klikken - "Snapshot maken" - om informatie te verzamelen. Voor mij genereerde het een kaart met gebeurtenissen die ongeveer 600 Kb aan reeksen, 1 Mb aan objecten en 1 Mb aan scripts toont die hun weg naar het geheugen vinden. U kunt dezelfde elementen op verschillende manieren bekijken door op het vervolgkeuzemenu te klikken met de tekst 'Structuurkaart', zoals u kunt zien in deze schermafbeelding.

opslagruimte

Als u tenslotte op het tabblad "Opslag" klikt, ziet u de permanente bestanden die een website op uw computer heeft geplaatst. Relevant voor de meeste gebruikers, dit omvat cookies. U kunt zien dat er een is geladen in de onderstaande afbeelding.

U kunt in het rechterdeelvenster zien dat deze specifieke cookie halverwege het volgende decennium verloopt en dat ik deze heb geopend tijdens de sessie waarin dit artikel werd geschreven.

Conclusie

Er is veel om doorheen te slepen wanneer u de Firefox-inspecteur gebruikt. Deze introductie tot de verschillende delen moet je een tijdje bezig houden.

Neem even de tijd om de HTML-elementen van een site te wijzigen. Bezoek een paar verschillende websites om hun laadtijden te bekijken. Ontdek hoeveel cookies een bepaalde pagina probeert op te slaan op uw computer. Soms kan die informatie u een pauze geven.

Hopelijk geeft deze ontdekkingsreis je meer inzicht in wat websites doen, zodat ze kunnen functioneren zoals je verwacht. Het kan veel meer zijn dan je eerder hebt gerealiseerd.

Afbeeldingscredit: Firefox Quantum-startpagina van DepositPhotos