Dekking: Vind ongebruikt JavaScript en CSS

Kayce Basken
Sofia Emelianova
Sofia Emelianova
GitHub

In het dekkingspaneel in Chrome DevTools 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.

Codedekking analyseren.

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.

Open het dekkingspaneel

  1. Open het Commandomenu .

  2. Begin met het typen coverage , selecteer de opdracht Show Coverage en druk vervolgens op Enter om de opdracht uit te voeren. Het dekkingspaneel wordt geopend in de lade .

    Het dekkingspaneel.

Recordcodedekking

Codedekking vastleggen:

  1. Om het dekkingsbereik in te stellen, selecteert u in de actiebalk bovenaan het paneel Dekking Per functie of Per blok in de vervolgkeuzelijst.

  2. Om de opname te starten, klikt u op Vernieuwen 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.

  3. Als u de registratie van codedekking wilt stoppen, klikt u op stop_circle 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 voor regel uitsplitsing te zien van de gebruikte en ongebruikte code. Alle ongebruikte coderegels zijn gemarkeerd met rode lijnen naast de kolom met regelnummers aan de linkerkant.

Een codedekkingsrapport.

  • 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 check_box Inhoudsscripts in.

Om uw rapport te exporteren, klikt u op Download Dekking exporteren .