Het paneel 'Codedekking' helpt u ongebruikte JavaScript- en CSS-code te vinden. Door ongebruikte code te verwijderen, kunt u de laadtijd van uw pagina versnellen en het mobiele dataverbruik van uw gebruikers besparen.
Overzicht
Het meeleveren van ongebruikte JavaScript- of CSS-code is een veelvoorkomend probleem in webdevelopment. Stel bijvoorbeeld dat u de knopcomponent van Bootstrap op uw pagina wilt gebruiken. Om de knopcomponent te gebruiken, moet u een link naar het stylesheet van Bootstrap in uw HTML toevoegen, zoals dit:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
Dit stylesheet bevat niet alleen de code voor de knopcomponent. Het bevat de CSS voor alle Bootstrap-componenten. Maar je gebruikt geen van de andere Bootstrap-componenten. Je pagina downloadt dus een hoop CSS die niet nodig is. Deze extra CSS is om de volgende redenen een probleem:
- De extra code vertraagt het laden van je pagina. Zie Render-Blocking CSS .
- Als een gebruiker de pagina op een mobiel apparaat bezoekt, verbruikt de extra code mobiele data.
In het paneel 'Coverage' kunt u uw pagina vastleggen en een rapport bekijken van het totale aantal gebruikte en ongebruikte bytes aan CSS- en JavaScript-bronnen. Ook kunt u de code volgen in het paneel 'Sources' .
Open het paneel 'Dekking'
- Open de ontwikkelaarstools .
- Open het opdrachtmenu .
Begin met het typen van
coverage, selecteer de opdracht 'Show Coverage' en druk vervolgens op Enter om de opdracht uit te voeren. Het 'Coverage'- paneel wordt geopend in het zijmenu .
Als alternatief kunt u in de rechterbovenhoek meer selecteren: Meer opties > Meer tools > Dekking .
Codedekking vastleggen
Om de codedekking vast te leggen:
Om het dekkingsbereik in te stellen, selecteert u in de actiebalk bovenaan het paneel 'Dekking' de optie 'Per functie' of 'Per blok' in de vervolgkeuzelijst.
Om de opname te starten, klikt u op de knop Vernieuwen' in het midden van het paneel. Het 'Coverage'- paneel laadt de pagina opnieuw, legt de code vast die nodig is om de pagina te laden en gaat door met de opname terwijl u met de pagina interacteert.
Om de registratie van code coverage te stoppen, klikt u op Stop de instrumentatie van de coverage en toon de resultaten in de actiebalk van het paneel.
Analyseer de codedekking
De tabel in het paneel 'Dekking ' laat zien welke bronnen zijn geanalyseerd en hoeveel code er binnen elke bron wordt gebruikt.
Klik op een rij om die bron in het paneel Bronnen te openen en een regel-voor-regel overzicht te zien van gebruikte en ongebruikte code. Ongebruikte regels code zijn gemarkeerd met verticale grijze lijnen naast de kolom met regelnummers aan de linkerkant.
- De kolom 'URL' bevat de URL van de geanalyseerde bron.
- De kolom 'Type' geeft aan of de bron CSS, JavaScript of beide bevat.
- De kolom 'Totaal aantal bytes' geeft de totale grootte van de bron in bytes weer.
- De kolom 'Ongebruikte bytes' geeft het aantal bytes weer dat niet is gebruikt.
- De kolom 'Gebruiksvisualisatie' toont een visualisatie van de kolommen 'Totaal aantal bytes' en 'Ongebruikte bytes' . Het grijze gedeelte van de balk geeft de ongebruikte bytes weer. Het groene gedeelte geeft de gebruikte bytes weer.
Om het rapport te filteren op URL, kunt u deze opgeven in het filter in de actiebalk.
De statusbalk onderaan het paneel 'Dekking' toont het percentage gebruikte code. De statusbalk houdt rekening met filters.
Naast de filterbalk kunt u in de vervolgkeuzelijst ' Alles' selecteren, of alleen CSS of JavaScript weergeven in uw rapport.
Om extensiecode in uw rapport op te nemen, schakelt u Inhoudsscripts' in.
Om uw rapport te exporteren, klikt u op 'Dekkingsbereik .