Abdeckung: Nicht verwendete JavaScript- und CSS-Elemente finden

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Im Bereich Abdeckung können Sie nicht verwendeten JavaScript- und CSS-Code finden. Wenn Sie nicht verwendeten Code entfernen, können Sie das Seitenladetempo beschleunigen und die mobilen Daten Ihrer Nutzer sparen.

Codeabdeckung analysieren

Übersicht

Das Senden nicht verwendeter JavaScript- oder CSS-Dateien ist ein häufiges Problem bei der Webentwicklung. Angenommen, Sie möchten die Schaltflächenkomponente von Bootstrap auf Ihrer Seite verwenden. Wenn Sie die Schaltflächenkomponente verwenden möchten, müssen Sie in Ihrem HTML-Code einen Link zum Bootstrap-Stylesheet hinzufügen. Das geht so:

...
<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>
...

Dieses Stylesheet enthält nicht nur den Code für die Schaltflächenkomponente. Es enthält das CSS für alle Bootstrap-Komponenten. Sie verwenden jedoch keine der anderen Bootstrap-Komponenten. Ihre Seite lädt also eine Menge CSS herunter, das nicht benötigt wird. Dieses zusätzliche CSS ist aus folgenden Gründen ein Problem:

  • Der zusätzliche Code verlangsamt das Laden der Seite. Weitere Informationen finden Sie unter CSS, das das Rendering blockiert.
  • Wenn ein Nutzer über ein Mobilgerät auf die Seite zugreift, werden seine mobilen Daten durch den zusätzlichen Code verbraucht.

Im Bereich Abdeckung können Sie Ihre Seite aufzeichnen und sich einen Bericht über die insgesamt verwendeten und nicht verwendeten Bytes von CSS- und JavaScript-Ressourcen ansehen. Außerdem können Sie den Code im Bereich Quellen verfolgen.

Bereich „Abdeckung“ öffnen

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü.

  3. Geben Sie coverage ein, wählen Sie den Befehl Abdeckung anzeigen aus und drücken Sie die Eingabetaste, um den Befehl auszuführen. Der Bereich Abdeckung wird in der Seitenleiste geöffnet.

    Im Bereich „Abdeckung“

Alternativ können Sie rechts oben auf das more_vert Weitere Optionen > Weitere Tools > Abdeckung klicken.

Codeabdeckung erfassen

So erfassen Sie die Codeabdeckung:

  1. Um den Abdeckungsbereich festzulegen, wählen Sie in der Aktionsleiste oben im Bereich Abdeckung in der Drop-down-Liste die Option Pro Funktion oder Pro Block aus.

  2. Klicken Sie zum Starten der Aufzeichnung auf Instrumentierungs-Abdeckung starten und Seite aktualisieren. Im Bereich Abdeckung wird die Seite neu geladen, der zum Laden der Seite erforderliche Code erfasst und die Aufzeichnung fortgesetzt, während Sie mit der Seite interagieren.

  3. Wenn Sie die Aufzeichnung der Codeabdeckung beenden möchten, klicken Sie auf Instrumentierungs-Abdeckung beenden und Ergebnisse anzeigen.

Codeabdeckung analysieren

In der Tabelle im Bereich Abdeckung sehen Sie, welche Ressourcen analysiert wurden und wie viel Code in jeder Ressource verwendet wird.

Klicken Sie auf eine Zeile, um diese Ressource im Bereich Quellen zu öffnen und eine Zeile für Zeile aufgeschlüsselte Liste des verwendeten und nicht verwendeten Codes aufzurufen. Nicht verwendete Codezeilen sind mit roten Linien neben der Spalte mit den Zeilennummern links markiert.

Einen Bericht zur Codeabdeckung.

  • In der Spalte URL sehen Sie die URL der analysierten Ressource.
  • In der Spalte Typ wird angegeben, ob die Ressource CSS, JavaScript oder beides enthält.
  • In der Spalte Gesamtzahl der Bytes sehen Sie die Gesamtgröße der Ressource in Byte.
  • In der Spalte Nicht verwendete Byte sehen Sie die Anzahl der nicht verwendeten Byte.
  • Die letzte, unbenannte Spalte ist eine Visualisierung der Spalten Gesamtzahl der Byte und Nicht verwendete Byte. Der rote Bereich des Balkens entspricht den nicht verwendeten Byte. Der graue Bereich steht für verwendete Bytes.

Wenn Sie den Bericht nach URL filtern möchten, geben Sie die URL in der Aktionsleiste im Filter an.

In der Statusleiste unten im Bereich Abdeckung sehen Sie den Prozentsatz des verwendeten Codes. In der Statusleiste wird die Filterung berücksichtigt.

Wählen Sie neben der Filterleiste in der Drop-down-Liste Alle oder nur CSS oder JavaScript aus, um diese Daten im Bericht zu sehen.

Wenn Sie Code für Erweiterungen in Ihren Bericht aufnehmen möchten, aktivieren Sie das Kästchen Content-Scripts.

Wenn Sie den Bericht exportieren möchten, klicken Sie auf Abdeckung exportieren.