Invoering
Google Chrome is een rijke en krachtige webbrowser, die baanbrekend is voor wat mogelijk is voor toepassingen op internet. Google heeft hard gewerkt om eindgebruikers een zeer snelle, zeer stabiele en veelzijdige browse-ervaring te bieden. Google heeft er ook voor gezorgd dat ontwikkelaars zoals jij een geweldige ervaring hebben met Chrome. De Developer Tools, gebundeld en beschikbaar in Chrome en Safari, geven webontwikkelaars en programmeurs diepgaande toegang tot de interne onderdelen van de browser en hun webapplicatie.
De Developer Tools maken deel uit van het open source Webkit-project. Het grootste deel van de discussie in dit artikel is van toepassing op zowel Google Chrome als Safari. De schermafbeeldingen zijn echter gemaakt met Google Chrome 6, dus er kunnen kleine verschillen zijn in uw browser.
In dit artikel geven we een overzichtsrondleiding door Developer Tools en wijzen we op de meest populaire en nuttige functies. Onze doelgroep zijn webontwikkelaars die de Developer Tools nog niet kennen of nog niet hebben onderzocht. We zijn er echter zeker van dat u, zelfs als u een ervaren webontwikkelaar bent, een paar tips zult oppikken.
Als uw exemplaar van Developer Tools niet helemaal overeenkomt met de schermafbeeldingen in dit artikel, raden we u aan te upgraden naar versie 5, zodat u mee kunt doen en toegang krijgt tot alle hier beschreven functies.
Overzicht
In totaal zijn er acht hoofdgroepen met tools beschikbaar (zie Developer Tools), en de mogelijkheden worden bij elke release uitgebreid. Chrome 5 biedt nu elementen, bronnen, scripts, tijdlijn, profielen, opslag, audits en console.
Elementen
Met de Elements-tool kunt u de webpagina zien zoals de browser deze ziet. Dat wil zeggen dat u met de Elements-tool de onbewerkte HTML, de onbewerkte CSS-stijlen en het Document Object Model kunt zien en deze in realtime kunt manipuleren.
Bronnen
Gebruik de tool Bronnen om te zien welke componenten uw webpagina of applicatie vraagt van webservers, hoe lang deze verzoeken duren en hoeveel bandbreedte vereist is. U kunt ook de HTTP-aanvraag- en antwoordheaders voor elk van uw bronnen bekijken. De Hulpmiddelentool is perfect om u te helpen de laadtijden van pagina's te versnellen.
Scripts
Om in het JavaScript van een pagina te kijken, gebruikt u de tool Scripts. Hier vindt u een lijst met scripts die vereist zijn voor de pagina, plus een volledig functionele scriptdebugger. U kunt het JavaScript zelfs direct wijzigen!
Tijdlijn
Voor geavanceerde timing- en snelheidsanalyse biedt de Tijdlijn-tool diepgaand inzicht in de verschillende Chrome-activiteiten achter de schermen. U kunt leren hoe lang het duurt voordat de browser DOM-gebeurtenissen afhandelt, pagina-indelingen weergeeft en het venster tekent.
Profielen
Met de tool Profielen kunt u de prestaties van JavaScript-scripts vastleggen en analyseren. U kunt bijvoorbeeld leren welke functies de meeste tijd nodig hebben om uit te voeren, en precies bepalen waar u deze moet optimaliseren.
Opslag
Moderne webapplicaties vereisen meer persistentie dan alleen cookies, en de Storage-tool helpt u bij het volgen, opvragen en debuggen van lokale browseropslag. Deze tool kan gegevens weergeven en opvragen die zijn opgeslagen in lokale databases, lokale opslag, sessieopslag en cookies.
Controle
Met de Audittool is het alsof u uw eigen weboptimalisatieconsulent naast u heeft zitten. Deze tool kan een pagina analyseren terwijl deze wordt geladen en suggesties en optimalisaties bieden om de laadtijd van de pagina te verkorten en de waargenomen (en werkelijke) responsiviteit te vergroten.
Troosten
Last but zeker not least bieden de Developer Tools een volledig uitgeruste console. Vanuit de console kunt u willekeurig JavaScript invoeren en programmatisch communiceren met uw pagina.
Opstarten
Het is gemakkelijk om de ontwikkelaarstools te starten vanuit Chrome.
Voor elk besturingssysteem kunt u eenvoudig met de rechtermuisknop op een element op de pagina klikken en de optie "Element inspecteren" in het contextmenu selecteren. Hierdoor worden de ontwikkelaarstools geopend en wordt rechtstreeks naar het element geklikt waarop u hebt geklikt.
Als u dit in actie wilt zien, gaat u naar http://www.google.com in de Chrome-browser. Klik met de rechtermuisknop op het Google-logo en u ziet de volgende opties:
Als u "Element inspecteren" selecteert, worden de ontwikkelaarstools weergegeven, die er als volgt uit zouden moeten zien:
Merk op hoe de ontwikkelaarstools op het tabblad Elementen werden geopend en automatisch naar de <img> -tag voor het Google-logo gingen en deze markeerden. Dit is erg handig als u nieuwsgierig bent welke HTML een bepaald pagina-element heeft gegenereerd.
U kunt de ontwikkelaarstools ook openen met een eenvoudige sneltoets. Probeer, afhankelijk van uw besturingssysteem, het volgende:
- Op Windows en Linux selecteert u de toetsen
Control-Shift-J. - Op een Mac selecteert u de toetsen
Command-Option-J.
Ten slotte kunt u ervoor kiezen om de tools te openen vanuit het hoofdbrowsermenu.
Op een Mac selecteert u in de menubalk van het hoofdprogramma Beeld, Ontwikkelaar, Ontwikkelaarstools.
Op een Windows-pc gebruikt u het Pagina-menu rechtsboven en selecteert u Ontwikkelaar, Ontwikkelaarshulpmiddelen.
Nu u de ontwikkelaarstools open en gereed heeft, gaan we beginnen met het verkennen van de elementen op de startpagina van Google.
Elementen
Het eerste tabblad in de Developer Tools is Elements. Dit is uw venster in de structuur van de webpagina, weergegeven zoals uw browser deze ziet.
DOM-surfen
U bezoekt vaak de tabbladen Elementen wanneer u het HTML-fragment voor een bepaald aspect van de pagina moet identificeren. U bent bijvoorbeeld misschien benieuwd of een afbeelding een HTML id-attribuut heeft en wat de waarde van dat attribuut is.
Het tabblad Elementen is soms een betere manier om de bron van een pagina te bekijken. Op het tabblad Elementen wordt de DOM van de pagina mooi opgemaakt, zodat u gemakkelijk HTML-elementen, hun voorouders en hun nakomelingen kunt zien. Te vaak hebben pagina's die u bezoekt verkleinde of simpelweg lelijke HTML, waardoor het moeilijk is om te zien hoe de pagina is gestructureerd. Het tabblad Elementen is uw oplossing om de echte onderliggende structuur van de pagina te bekijken.
Het volgende is bijvoorbeeld de uitvoer van de 'bronweergave' van de startpagina van Google.
Het is moeilijk om de bovenstaande bron te lezen omdat deze is geoptimaliseerd en verkleind. Het formaat is goed voor clients en servers, maar moeilijk voor ontwikkelaars!
Als u in plaats daarvan de bron van een pagina wilt lezen, gebruikt u het tabblad Elementen om een mooi gedrukte, syntaxisgeaccentueerde elementhiërarchie te bekijken.
Op het tabblad Elementen kunt u ook door de stijlen, statistieken, eigenschappen en gebeurtenislisteners voor elk element op de pagina bladeren, er interactie mee hebben en soms zelfs deze wijzigen.
Stijlen browsen
Het trapsgewijze karakter van CSS maakt de Stijlen-browser op het tabblad Elementen erg handig. Soms storten stijlen in elkaar en verschijnen er onbedoelde beelden. Als u weet welke stijlregel de browser op het element toepast, kunt u een dergelijk probleem oplossen.
Als u op een element op het tabblad Elementen klikt, worden alle stijlen weergegeven die aan dat element zijn gekoppeld.
In de bovenstaande schermafbeelding ziet u dat we alle stijlkenmerken kunnen zien die worden toegepast. De opvulling komt bijvoorbeeld rechtstreeks uit het stijlattribuut van het <img> -element. De breedte en hoogte komen echter voort uit hun respectievelijke oorspronkelijke kenmerken. Interessant is dat je kunt zien dat er ook stijlen zijn overgenomen van de <center> -tag, de <body> -tag en andere.
Hoewel het geweldig is om de individuele stijlen te zien en waar ze vandaan komen, is het ook erg handig om de uiteindelijke set stijlen te zien nadat deze is berekend en op het element is toegepast. U kunt het eindproduct zien door het menu Computed Style te selecteren, zoals weergegeven in de onderstaande schermafbeelding.
Vervolgens bekijken we kort de andere functies van het tabblad Elementen. In toekomstige artikelen zullen we het volgende gedetailleerder bespreken.
Doosmodel
U kunt het boxmodel zien zoals het op het geselecteerde element wordt toegepast door het menu Metrieken te selecteren:
Elementeigenschappen
U kunt alle eigenschappen van het element zien, zoals JavaScript en de DOM het zouden zien, door het menu Eigenschappen te selecteren:
Gebeurtenisluisteraars
En tot slot kun je via het menu Gebeurtenislisteners zelfs de gebeurtenislisteners zien die aan het element zijn gekoppeld of er doorheen borrelen:
Samenvatting
Er is veel functionaliteit beschikbaar via het Elementen-tabblad, en toekomstige artikelen zullen dieper ingaan op de afzonderlijke menu’s.
U moet het tabblad Elementen gebruiken als u wilt zien hoe de pagina er in de browser zelf uitziet. Veelvoorkomende problemen zoals "hoe wordt deze stijl berekend?" of "Welke HTML-tags hebben deze component gegenereerd?" worden snel en eenvoudig beantwoord via het tabblad Elementen.
Beschouw het tabblad Elementen als een uber-"bekijkbron" en krijg zeer scherp zicht op uw pagina.
Nadat u de pagina heeft onderzocht, vraagt u zich misschien af hoe HTML, CSS en afbeeldingen daar überhaupt terecht zijn gekomen. Het tabblad Bronnen, dat hierna wordt beschreven, laat zien hoe de clientbrowser en de webserver communiceren om deze bronnen te verzenden.
Bronnen
Zodra uw applicatie functioneert, zou uw volgende stap het optimaliseren van de netwerk- en bandbreedteprestaties moeten zijn. U moet ernaar streven om de overdracht van uw applicatie, van server naar client, zo snel en efficiënt mogelijk te laten verlopen. Uw gebruikers zullen u dankbaar zijn voor het snel laden van pagina's, u bespaart geld op bandbreedte en serverbronnen, en u scoort ook beter in de zoekresultaten van Google (die nu rekening houden met de snelheid van de site).
Het tabblad Bronnen in Developer Tools is uw venster op de communicatie tussen de webserver en de clientbrowser. U kunt alle door de browser opgevraagde bronnen zien (dit is altijd erg verrassend!), de tijd die nodig is om ze van de server te ontvangen en hoeveel bandbreedte er tijdens de overdracht wordt gebruikt.
Ironisch genoeg beïnvloedt het gebruik van het tabblad Bronnen de laadprestaties van de pagina en is daarom standaard uitgeschakeld. De eerste keer dat u de functionaliteit gebruikt, moet u deze inschakelen voor de pagina die u bekijkt.
Ik raad u aan de standaardinstelling "Alleen inschakelen voor deze sessie" geselecteerd te laten, omdat u niet onnodig een kleine prestatiestraf wilt oplopen. Zodra u op "Resource-tracking inschakelen" klikt, wordt de pagina opnieuw geladen en zullen de Developer Tools de bronnen controleren en weergeven die vanaf de server worden verzonden.
De volgende schermafbeelding toont de bronnen die nodig zijn en geladen zijn voor de startpagina van Google.
Er staat veel informatie op dit scherm, dus laten we het stukje bij beetje bekijken.
Het standaardgedrag is om u te laten zien hoe lang het duurde om alle bronnen voor de pagina op te vragen en te laden. Als u door de bronnenlijst naar beneden scrollt, zal dit u misschien verbazen, omdat u wellicht niet weet hoeveel individuele verzoeken er door de klant worden gedaan. Een groot aantal verzoeken van de klant kan de prestaties ernstig beïnvloeden. Het verkrijgen van inzicht in wat er gevraagd wordt, is de eerste stap naar optimalisatie en uiteindelijke vermindering van de middelen.
Als u alleen geïnteresseerd bent in afbeeldingen of stijlbladen, kunt u het brontype filteren met behulp van het menu direct onder het hoofdtabblad.
U leert ook de volgorde waarin de bronnen worden aangevraagd. Met behulp van de tijdlijnweergave krijgt u mogelijk een beter inzicht in waarom bepaalde elementen op uw pagina later verschijnen dan andere.
Nadat u een overzicht heeft gekregen van alle aangevraagde bronnen en hoe deze de volledige aanvraagtijdlijn samenstellen, wilt u dieper ingaan op de afzonderlijke bronnen.
Als u merkt dat er elke keer dat u de pagina bezoekt, bepaalde bronnen worden opgevraagd, is dat een teken dat uw caching-headers niet correct zijn geconfigureerd. U kunt alle headers van een bron bekijken door op de bron in de linkerlijst te klikken.
Gebruik de Headers-weergave om ervoor te zorgen dat de verwachte HTTP-reactiecode is ingesteld en dat de juiste headers worden opgegeven. Als de bron bijvoorbeeld zelden of nooit wordt gewijzigd, moet uw server een Expires-header instellen voor ver in de toekomst. Hierdoor wordt de browser geïnformeerd dat de bron tot die datum niet opnieuw mag worden opgevraagd. Dit vermindert het aantal HTTP-verbindingen dat nodig is voor uw pagina, waardoor uw site sneller wordt.
Samenvatting
Er is nog veel meer te vinden op het tabblad Bronnen, dat we in een toekomstig artikel zullen bespreken.
Gebruik het tabblad Bronnen om inzicht te krijgen in de manier waarop uw clientbrowser communiceert met de webserver. Met behulp van deze informatie, inclusief verzoektijd, verzoekgrootte en verzoekvolgorde, kunt u slimme optimalisaties doorvoeren om de serverbelasting en kosten te verminderen, de snelheid te verhogen en de gebruikerservaring te verbeteren.
Snelheid is erg belangrijk voor uw website, uw gebruikers en zoekmachines. Zodra u het aantal en de omvang van de bronnen hebt verminderd en de juiste HTTP-gesprekken hebben plaatsgevonden, is de volgende stap het onderzoeken en optimaliseren van de scripts die op uw pagina worden uitgevoerd. Gelukkig doet het tabblad Scripts, dat hierna wordt besproken, precies dat.
Aanvullende bronnen
Voor meer informatie over de Developer Tools kunnen we het volgende aanbevelen:
- Chrome Developer Tools-presentatievideo en dia's van Google I/O 2010
- Handleiding voor Chrome-ontwikkelaarstools
En houd natuurlijk html5rocks.com in de gaten voor deel 2 van dit artikel, samen met veel andere geweldige HTML5- en Chrome-inhoud.