Chrome DevTools-revoluties 2013

Arthur Evans

Tim Statler

Invoering

Naarmate de complexiteit en functionaliteit van webapplicaties is toegenomen, geldt dat ook voor Chrome DevTools. In deze samenvatting van Paul Irish's Google I/O 2013 talk Chrome DevTools Revolutions 2013 krijgt u een kijkje in de nieuwste functies die een revolutie teweegbrengen in de manier waarop u webapplicaties bouwt en test.

Als je de lezing van Paul hebt gemist, kun je hem hierboven bekijken (ga je gang, we wachten wel) of je kunt meteen naar het overzicht gaan:

• Met Workspaces kunt u DevTools gebruiken als uw broncode-editor.
• Als u Sass gebruikt, zult u de mogelijkheid geweldig vinden om Sass-bestanden (.scss) live te bewerken in DevTools en uw wijzigingen onmiddellijk op de pagina te zien.
• Het op afstand debuggen van pagina's in Chrome voor Android is al een tijdje mogelijk, maar de ADB-extensie maakt het verbinden met Android-apparaten eenvoudiger. Met Reverse Port Forwarding kunt u vanaf uw apparaat eenvoudig verbinding maken met localhost op uw ontwikkelmachine.
• Prestaties zijn altijd een zorg in webapplicaties, en DevTools heeft een aantal nieuwe functies om u te helpen knelpunten op te sporen, waaronder de nieuwe Flame Chart-visualisatie voor CPU-profilering en verschillende nieuwe tools voor het debuggen van prestatieproblemen met betrekking tot weergave en geheugengebruik.

Deze functies zijn live in Chrome 28 en nu beschikbaar in het stabiele updatekanaal.

Werkruimtes

Met werkruimten kunt u bronnen die vanaf een lokale webserver worden aangeboden, toewijzen aan bestanden op schijf, zodat u elk type bronbestand in het paneel Bronnen kunt bewerken en deze wijzigingen op schijf kunt laten behouden. Op dezelfde manier verschijnen wijzigingen die u in uw externe editor aanbrengt onmiddellijk in het paneel Bronnen.

De onderstaande schermafbeelding toont een voorbeeld van werkruimten in actie. De Agenda-site is via localhost geladen, terwijl het Bronnenpaneel de weergave van het lokale bestandssysteem van de hoofdmap van de site toont. Bewerkingen die u aanbrengt in de bestanden in deze map worden op de schijf bewaard. In de onderstaande schermafbeelding zijn enkele niet-opgeslagen wijzigingen aangebracht in Calendar.css, daarom wordt er een asterisk naast de bestandsnaam geplaatst.

Als u op Control+S of Command+S drukt, blijven de wijzigingen op de schijf behouden.

Op dezelfde manier worden wijzigingen die u aanbrengt in de stijlen van een element in het paneel Elementen weerspiegeld in zowel het paneel Bronnen als in uw externe editor. Merk op dat:

• DOM-wijzigingen in het paneel Elementen blijven niet behouden. Alleen stijlwijzigingen in het paneel Elementen blijven behouden.
• Alleen stijlen die in een extern CSS-bestand zijn gedefinieerd, kunnen worden gewijzigd. Wijzigingen in element.style of inline-stijlen worden niet op schijf bewaard. Als u inlinestijlen heeft, kunt u deze wijzigen in het paneel Bronnen.
• Stijlwijzigingen in het paneel Elementen blijven onmiddellijk behouden; u hoeft niet op Control+S of Command+S te drukken.

Een werkruimtemap toevoegen

Het gebruik van werkruimten bestaat uit twee delen: de inhoud van een lokale map beschikbaar maken voor DevTools, en die map toewijzen aan een URL.

Een nieuwe werkruimtemap toevoegen:

1. Klik in DevTools op Instellingen om DevTools-instellingen te openen.
2. Klik op Werkruimte .
3. Klik op Map toevoegen .
4. Blader naar de map met de bronbestanden van uw project en klik op Selecteren .
5. Klik desgevraagd op Toestaan ​​om DevTools volledige toegang tot de map te geven.

In het paneel Bronnen wordt de nieuwe werkruimtemap weergegeven, samen met de bronnen die via localhost zijn geladen. U kunt nu bestanden in uw werkruimtemap live bewerken, en deze wijzigingen blijven op de schijf behouden.

Een map aan een URL toewijzen

Nadat u een werkruimtemap heeft toegevoegd, kunt u deze aan een URL toewijzen. Telkens wanneer Chrome de opgegeven URL laadt, geeft het paneel Bronnen de inhoud van de werkruimtemap weer in plaats van de inhoud van de netwerkmap.

Een werkruimtemap toewijzen aan een URL:

1. Klik in het deelvenster Bronnen met de rechtermuisknop of houd Control+klik op een bestand in een werkruimtemap.
2. Selecteer Toewijzen aan netwerkbron .

   

3. Selecteer de overeenkomstige netwerkbron op de momenteel geladen pagina.

   

4. Laad de pagina opnieuw in Chrome.

Het Bronnenpaneel zou nu alleen de inhoud van de lokale werkruimtemap van uw site moeten tonen, en niet de localhost-bronnen, zoals hieronder weergegeven.

Opmerking: als u nog steeds de localhost-bronnen ziet, vernieuw dan de pagina in Chrome.

Er zijn twee andere manieren om een ​​netwerkmap aan een werkruimtemap te koppelen:

• Klik met de rechtermuisknop (of Control+klik) op een netwerkbron en selecteer Toewijzen aan bestandssysteembron .
• Voeg toewijzingen handmatig toe op het tabblad Werkruimte van het dialoogvenster DevTools-instellingen.

Foutopsporing in Sass/CSS-bronkaart

Met foutopsporing in Sass (CSS Source Map) kunt u Sass-bestanden (.scss) live bewerken in het deelvenster Bronnen en de resultaten bekijken zonder dat u DevTools hoeft te verlaten of de pagina hoeft te vernieuwen. Wanneer u een element inspecteert waarvan de stijlen worden geleverd door een door Sass gegenereerd CSS-bestand, geeft het paneel Elementen een link weer naar het .scss-bestand, niet naar het gegenereerde .css-bestand.

Als u op de link klikt, wordt het (bewerkbare) SCSS-bestand in het paneel Bronnen geopend. U kunt alle gewenste wijzigingen in dit bestand aanbrengen.

Wanneer u wijzigingen in een SCSS-bestand opslaat (in DevTools of elders), genereert de Sass-compiler de CSS-bestanden opnieuw. Vervolgens laadt DevTools het nieuw gegenereerde CSS-bestand opnieuw.

Opmerking: technisch gezien zou deze functie moeten werken met elke CSS-preprocessor die bronkaarten ondersteunt. Lees voor meer informatie werken met CSS-preprocessors in de DevTools-documentatie.

Sass-foutopsporing gebruiken

Als u Sass-foutopsporing in Chrome wilt gebruiken, heeft u de pre-releaseversie van de Sass-compiler nodig. Dit is de enige versie die momenteel het genereren van bronkaarten ondersteunt.

gem install sass -v '>=3.3.0alpha' --pre

U moet ook de Sass-foutopsporingsfunctie inschakelen in DevTools-experimenten:

1. Open over:vlaggen in Chrome.
2. Schakel Experimenten met ontwikkelaarstools inschakelen in.
3. Start Chrome opnieuw.
4. Open DevTools-instellingen en klik op Experimenten .
5. Schakel Ondersteuning voor Sass in (of Sass stylesheet debugging , afhankelijk van de browserversie die u gebruikt).

Zodra Sass is geïnstalleerd, start u de Sass-compiler om te kijken naar wijzigingen in uw Sass-bronbestanden en maakt u bronkaartbestanden voor elk gegenereerd CSS-bestand, bijvoorbeeld:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Als u Compass gebruikt, houd er dan rekening mee dat Compass de pre-releaseversie van Sass nog niet ondersteunt, dus u kunt Sass-foutopsporing niet gebruiken met Compass.

Hoe het werkt

Voor elk SCSS-bronbestand dat het verwerkt, genereert de Sass-compiler een bronkaartbestand (.map-bestand) naast de gecompileerde CSS. Het brontoewijzingsbestand is een JSON-bestand dat de toewijzingen tussen het .scss-bestand en de .css-bestanden definieert. Elk CSS-bestand bevat een annotatie die de URL van het bronkaartbestand specificeert, ingebed in een speciaal commentaar:

/*# sourceMappingURL=<url>; */

Gegeven bijvoorbeeld het volgende SCSS-bestand:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass genereert een CSS-bestand zoals dit, met de sourceMappingURL-annotatie:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Hieronder ziet u een voorbeeld van een bronkaartbestand:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Gemakkelijker foutopsporing op afstand in Chrome voor Android

Een aantal nieuwe functies in DevTools maken foutopsporing op afstand in Chrome voor Android eenvoudiger in te stellen: de ADB-extensie en reverse port forwarding.

De ADB Chrome-extensie vereenvoudigt het instellen van foutopsporing op afstand. Het biedt de volgende voordelen:

• Bundelt Android Debug Bridge (ADB), zodat u het niet hoeft te installeren.
• Geen opdrachtregelinteractie vereist.
• UI voor het eenvoudig starten en stoppen van de ADB-daemon en het bekijken van aangesloten apparaten.

Met Reverse Port Forwarding kunt u Chrome op Android eenvoudig verbinden met een webserver die op uw localhost draait, iets dat sommige netwerkomgevingen moeilijk maken zonder enkele DNS-trucs.

De ADB-extensie gebruiken

Installeer eerst de ADB Chrome-extensie vanuit de Chrome Web Store. Klik op Toevoegen aan Chrome om de extensie te installeren.

Opmerking: het installeren van extensies vanuit de Chrome Web Store wordt niet ondersteund in Windows 8. Als u problemen ondervindt bij het installeren vanuit de Chrome Web Store, raadpleegt u Foutopsporing op afstand op Android voor alternatieve installatie-instructies.

Na installatie verschijnt er een grijs Android-menupictogram in Chrome. Om ADB te starten, klikt u op het pictogram en vervolgens op Start ADB .

Zodra ADB is gestart, wordt het menupictogram groen en wordt het aantal momenteel verbonden apparaten weergegeven, indien aanwezig.

Klik op Apparaten bekijken om de about:inspect- pagina te openen, waarop elk aangesloten apparaat en de bijbehorende tabbladen worden weergegeven. Om een ​​tabblad in DevTools te inspecteren, klikt u op de link "inspecteren" naast de URL ervan.

Als u geen aangesloten apparaten ziet, controleer dan of uw apparaat is aangesloten op USB en of USB-foutopsporing is ingeschakeld in de Chrome voor Android-instellingen. Voor meer gedetailleerde instructies en stappen voor probleemoplossing raadpleegt u Foutopsporing op afstand op Android .

Omgekeerde port forwarding (experimenteel)

Normaal gesproken draait er een webserver op uw lokale ontwikkelmachine en wilt u vanaf uw apparaat verbinding maken met die site. Als de ontwikkelmachine en het apparaat zich op hetzelfde netwerk bevinden, is dit eenvoudig. Maar in sommige gevallen, zoals op beperkte bedrijfsnetwerken, is dit misschien niet mogelijk zonder een paar slimme DNS-trucs. Een nieuwe functie in Chrome voor Android, genaamd reverse port forwarding, maakt dit eenvoudig. Het werkt door een luisterende TCP-poort op uw apparaat te creëren die verkeer via USB doorstuurt naar een bepaalde TCP-poort op uw ontwikkelmachine.

Om deze functie te gebruiken heeft u het volgende nodig:

• Chrome 28 of hoger geïnstalleerd op uw ontwikkelmachine
• Chrome voor Android Bèta geïnstalleerd op uw apparaat
• Android Debug Bridge (ADB Chrome-extensie of volledige Android SDK) geïnstalleerd op uw ontwikkelmachine

Als u reverse port forwarding wilt gebruiken, moet uw apparaat zijn aangesloten voor foutopsporing op afstand, zoals beschreven in De ADB-extensie gebruiken. Vervolgens moet u reverse port forwarding inschakelen en een port forwarding-regel voor uw toepassing toevoegen.

Schakel eerst reverse port forwarding in:

1. Open Chrome op uw ontwikkelmachine.
2. Schakel in about:flags Experimenten met ontwikkelaarstools inschakelen in en start Chrome opnieuw.
3. Open over:inspecteer . U zou uw mobiele apparaat en een lijst met geopende tabbladen moeten zien.
4. Klik op de link 'inspecteren' naast een van de vermelde sites.
5. In het DevTools-venster dat wordt geopend, opent u het paneel Instellingen.
6. Schakel onder Experimenten Reverse port forwarding inschakelen in.
7. Sluit het DevTools-venster en ga terug naar about:inspect .

Voeg vervolgens een port forwarding-regel toe:

1. Klik nogmaals op de link "inspecteren" om DevTools te openen en open DevTools-instellingen opnieuw.
2. Klik op het tabblad Poort doorsturen .
3. Voer in het veld Apparaatpoort het poortnummer in waarmee Chrome verbinding moet maken op uw Android-apparaat (standaard is dit 8080).
4. Voeg in het veld Doel het poortnummer toe waarop uw webtoepassing op uw ontwikkelmachine draait.

   

5. Open localhost in Chrome voor Android: , waar is de waarde die u hebt ingevoerd in het veld Apparaatpoort (standaard is 8080).

U zou de inhoud moeten zien die door uw ontwikkelmachine wordt aangeboden.

Vlamdiagramvisualisatie voor JavaScript-profielen

De nieuwe Flame Chart-weergave biedt een visuele weergave van JavaScript-verwerking in de loop van de tijd, vergelijkbaar met die in de tijdlijn- en netwerkpanelen.

De horizontale as is de tijd en de verticale as is de call-stack. Bovenaan het paneel ziet u een overzicht dat de gehele opname toont, en u kunt "inzoomen" op een deel van het overzicht door dit met uw muis te selecteren, zoals hieronder weergegeven. De tijdschaal voor de detailsweergave wordt dienovereenkomstig kleiner.

In de detailweergave wordt een call-stack weergegeven als een stapel functieblokken. Een blok dat bovenop een ander blok ligt, werd aangeroepen door het onderste functieblok. Als u over een bepaald blok zweeft, worden de functienaam en timinggegevens weergegeven:

• Naam — De naam van de functie.
• Zelftijd : hoe lang het duurde om de huidige aanroep van de functie te voltooien, inclusief alleen de instructies in de functie zelf, exclusief de functies die deze aanriep.
• Totale tijd — De tijd die nodig was om de huidige aanroep van deze functie en alle functies die hierdoor werden aangeroepen te voltooien.
• Geaggregeerde zelftijd — Totale tijd voor alle aanroepen van de functie in de opname, exclusief functies die door deze functie worden aangeroepen.
• Geaggregeerde totale tijd — Totale totale tijd voor alle aanroepen van de functie, inclusief functies die door deze functie worden aangeroepen.

Als u op een functieblok klikt, wordt het bijbehorende JavaScript-bestand geopend in het paneel Bronnen, op de regel waar de functie is gedefinieerd.

Om de vlammengrafiek te gebruiken:

1. Klik in DevTools op het tabblad Profielen .
2. Kies Record JavaScript CPU-profiel en klik op Start .
3. Wanneer u klaar bent met het verzamelen van gegevens, klikt u op Stoppen .
4. Selecteer in de profielweergave de visualisatie Vlamdiagram .

   

Vijf belangrijke functies voor prestatiemeting

Dit overzicht van revolutionaire ontwikkelingen in DevTools wordt afgerond met een aantal nieuwe functies voor het onderzoeken van prestatieproblemen:

• Continue schildermodus
• Tonen van Paint-rechthoeken en laagranden
• FPS-meter
• Geforceerde synchrone lay-outs vinden (layout thrashing)
• Volgen van objecttoewijzingen

Continue schildermodus

De modus voor continu schilderen is een optie in de DevTools-instellingen ( Rendering > Continu opnieuw schilderen van pagina's inschakelen ) waarmee u de weergavekosten van afzonderlijke elementen of CSS-stijlen kunt identificeren.

Normaal gesproken schildert Chrome alleen naar het scherm als reactie op een lay-out of stijlwijziging, en alleen die delen van het scherm die moeten worden bijgewerkt. Wanneer u het continu opnieuw schilderen van pagina's inschakelt, wordt het hele scherm voortdurend opnieuw geverfd. Een heads-up-display toont de tijd die Chrome nodig heeft om de pagina te schilderen, evenals het bereik van de tijden, en een grafiek die de verdeling van recente verftijden laat zien. De horizontale lijn over het histogram geeft de 16,6 ms-markering aan.

Het voordeel van het gebruik hiervan is dat u door de DOM-structuur in het paneel Elementen kunt lopen en individuele elementen kunt verbergen (druk op de H- toets om het momenteel geselecteerde element te verbergen), of de CSS-stijlen van een element kunt uitschakelen. U kunt zien hoeveel tijd een element of stijl toevoegt aan de weergave van de pagina, indien aanwezig, door wijzigingen in de tekentijd van de pagina op te merken. Als het verbergen van een enkel element de verftijden aanzienlijk verkort, weet je dat je je moet concentreren op de styling of constructie van dat element.

Om de continue pijnmodus in te schakelen:

1. Open DevTools-instellingen. 1. Schakel op het tabblad Algemeen onder Rendering de optie Continu opnieuw schilderen van pagina's inschakelen in.

Opmerking: als u deze optie niet ziet in Instellingen, opent u about:flags , schakelt u GPU-compositing in op alle pagina's en start u Chrome opnieuw op.

Zie Lange verftijden profileren met de continue tekenmodus van DevTools voor meer informatie.

Verfrechthoeken en laagranden worden weergegeven

Een andere optie in DevTools is om te laten zien in welke rechthoekige delen van het scherm wordt geschilderd. (Instellingen > Rendering > Verfrechthoeken tonen). In de onderstaande schermafbeelding wordt bijvoorbeeld een verfrechthoek getekend over het gebied waar een CSS-zweefeffect werd toegepast op de paarse afbeelding. Dit is goed, omdat het een relatief klein deel van het scherm beslaat.

U wilt ontwerp- en ontwikkelingspraktijken vermijden die ervoor zorgen dat het hele scherm opnieuw wordt geverfd. In de volgende schermafbeelding scrollt de gebruiker bijvoorbeeld door de pagina. Eén verfrechthoek omringt de schuifbalk en een andere omringt de hele rest van de pagina. In dit geval is de boosdoener de achtergrondafbeelding op het lichaamselement. De afbeeldingspositie is ingesteld op vast in CSS, waardoor Chrome bij elke scroll de hele pagina opnieuw moet schilderen.

FPS-meter

De FPS-meter geeft de huidige framesnelheid van de pagina weer, de minimale en maximale framesnelheid, een staafdiagram dat de framesnelheid in de loop van de tijd weergeeft en een histogram dat de variabiliteit van de framesnelheid laat zien.

Om de FPS-meter weer te geven:

1. Open DevTools-instellingen.
2. Klik op Algemeen .
3. Schakel onder Rendering Versnelde compositie forceren en FPS-meter weergeven in .

U kunt forceren dat de FPS-meter altijd verschijnt door about:flags te openen, FPS-teller in te schakelen en Chrome opnieuw te starten.

Geforceerde synchrone lay-outs vinden (layout thrashing)

Om de weergaveprestaties te maximaliseren, groepeert Chrome normaal gesproken de door uw applicatie aangevraagde lay-outwijzigingen en plant een lay-outpassage om de gevraagde wijzigingen asynchroon te berekenen en weer te geven. Als een applicatie echter vraagt ​​naar de waarde van een layout-afhankelijke eigenschap (zoals offsetHeight of offsetWidth), wordt Chrome gedwongen om onmiddellijk en synchroon een pagina-indeling uit te voeren. Deze zogenaamde geforceerde synchrone lay-outs kunnen de weergaveprestaties aanzienlijk verminderen, vooral wanneer ze herhaaldelijk worden uitgevoerd op grote DOM-bomen. Dit scenario wordt ook wel "layout thrashing" genoemd.

Een tijdlijnopname waarschuwt u wanneer deze een geforceerde synchrone lay-out detecteert met een geel waarschuwingspictogram naast de overeenkomstige tijdlijnrecord. Als u over een van deze records beweegt, worden stapelsporen weergegeven voor de code die de lay-out ongeldig heeft gemaakt, en de code die de lay-out heeft geforceerd.

Deze pop-up toont ook het aantal knooppunten dat moet worden opgemaakt, de grootte van de herindelingsboom, het bereik van de indeling en de hoofdmap van de indeling.

Zie Tijdlijndemo: Diagnose van geforceerde synchrone lay-outs voor meer informatie.

Volgen van objecttoewijzingen

Het volgen van objecttoewijzing is een nieuw type geheugenprofiel dat de toewijzing in de loop van de tijd weergeeft. Wanneer u het bijhouden van toewijzingen start, maakt DevTools in de loop van de tijd continu heap-snapshots. Het heaptoewijzingsprofiel laat zien waar objecten worden gemaakt en identificeert het vasthoudpad.

Objecttoewijzingen bijhouden:

1. Klik in DevTools op het tabblad Profielen .
2. Kies Heaptoewijzingen vastleggen en klik op Start .
3. Wanneer u klaar bent met het verzamelen van gegevens, klikt u op Opname heap-profiel stoppen (de rode cirkel in de linkerbenedenhoek van het profileringsvenster).

Canvasprofilering (experimenteel)

Ten slotte is hier een volledig experimentele functie om te verkennen. Met canvasprofilering kunt u WebGL-oproepen die op een canvaselement zijn gemaakt, opnemen en afspelen. U kunt door afzonderlijke WebGL-oproepen of oproepgroepen bladeren en de weergegeven resultaten bekijken. U ziet ook de tijd die nodig was om die specifieke oproepen opnieuw af te spelen.

Canvasprofilering gebruiken:

1. Schakel de Canvas-inspectiefunctie in op het tabblad Experimenten van de DevTools-instellingen. (Als u dit tabblad niet ziet, opent u about:flags , schakelt u Experimenten met ontwikkelaarstools inschakelen in en start u Chrome opnieuw.)
2. Klik op het tabblad Profielen .
3. Selecteer Canvasframe vastleggen en klik op Momentopname maken .
4. U kunt nu de oproepen verkennen die zijn gebruikt om het canvasframe te maken.