In het dekkingspaneel kunt u ongebruikte JavaScript- en CSS-code vinden. Als u ongebruikte code verwijdert, kan het laden van uw pagina worden versneld en kunnen de mobiele gegevens van uw gebruikers worden bespaard.
Overzicht
Het verzenden van ongebruikt JavaScript of CSS is een veelvoorkomend probleem bij webontwikkeling. Stel dat u bijvoorbeeld de knopcomponent van Bootstrap op uw pagina wilt gebruiken. Om de knopcomponent te gebruiken, moet u een link naar het stijlblad van Bootstrap in uw HTML toevoegen, zoals deze:
...
<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 stijlblad bevat niet alleen de code voor de knopcomponent. Het bevat de CSS voor alle componenten van Bootstrap. Maar u gebruikt geen van de andere Bootstrap-componenten. Uw pagina downloadt dus een heleboel CSS die hij niet nodig heeft. Deze extra CSS is om de volgende redenen een probleem:
- De extra code vertraagt het laden van uw pagina. Zie Render-blokkerende CSS .
- Als een gebruiker de pagina op een mobiel apparaat bezoekt, verbruikt de extra code zijn mobiele data.
In het paneel Dekking kunt u uw pagina opnemen en een rapport bekijken van het totaal aantal gebruikte en ongebruikte bytes aan CSS- en Javascript-bronnen, en de code volgen in het paneel Bronnen .
Open het dekkingspaneel
- Open Devtools .
- Open het Commandomenu .
Begin met het typen van
coverage, selecteer de opdracht Show Coverage en druk vervolgens op Enter om de opdracht uit te voeren. Het dekkingspaneel wordt geopend in de lade .
U kunt ook in de rechterbovenhoek more_vert Meer opties > Meer tools > Dekking selecteren.
Recordcodedekking
Codedekking vastleggen:
Om het dekkingsbereik in te stellen, selecteert u in de actiebalk bovenaan het paneel Dekking Per functie of Per blok in de vervolgkeuzelijst.
Om de opname te starten, klikt u op Instrumentatiedekking starten en pagina opnieuw laden. Het paneel Dekking laadt de pagina opnieuw, legt de code vast die nodig is om de pagina te laden en zet de opname voort terwijl u met de pagina communiceert.
Als u de registratie van codedekking wilt stoppen, klikt u op Instrumentatiedekking stoppen en resultaten weergeven .
Analyseer 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 Bronnenpaneel te openen en een regel per regel uitsplitsing te bekijken van de gebruikte en ongebruikte code. Alle ongebruikte coderegels zijn gemarkeerd met rode lijnen naast de kolom met regelnummers aan de linkerkant.
- De URL- kolom is de URL van de bron die is geanalyseerd.
- In de kolom Type wordt aangegeven of de bron CSS, JavaScript of beide bevat.
- De kolom Totaal bytes is de totale grootte van de bron in bytes.
- De kolom Ongebruikte bytes bevat het aantal bytes dat niet is gebruikt.
- De laatste, naamloze kolom is een visualisatie van de kolommen Totaal aantal bytes en Ongebruikte bytes . Het rode gedeelte van de balk bestaat uit ongebruikte bytes. Het grijze gedeelte bestaat uit gebruikte bytes.
Als u het rapport op URL wilt filteren, geeft u dit op in het filter in de actiebalk.
De statusbalk onder aan het dekkingspaneel toont het percentage gebruikte code. De statusbalk houdt rekening met filteren.
Naast de filterbalk kunt u in de vervolgkeuzelijst Alles selecteren, of alleen CSS of JavaScript om in uw rapport weer te geven.
Als u extensiecode in uw rapport wilt opnemen, schakelt u Inhoudsscripts in.
Om uw rapport te exporteren, klikt u op Dekking exporteren .