Abdeckung: Nicht verwendete JavaScript- und CSS-Elemente finden

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Im Bereich Codeabdeckung können Sie nicht verwendeten JavaScript- und CSS-Code finden. Wenn Sie nicht verwendeten Code entfernen, kann die Seite schneller geladen werden und die mobilen Daten Ihrer Nutzer werden geschont.

Codeabdeckung analysieren

Übersicht

Das Bereitstellen von nicht verwendetem JavaScript oder CSS ist ein häufiges Problem in der Webentwicklung. Angenommen, Sie möchten die Schaltflächenkomponente von Bootstrap auf Ihrer Seite verwenden. Dazu müssen Sie einen Link zum Stylesheet von Bootstrap in Ihrem HTML-Code hinzufügen, z. B. 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 Komponenten von Bootstrap. Sie verwenden jedoch keine der anderen Bootstrap-Komponenten. Ihre Seite lädt also eine Menge CSS herunter, das sie nicht benötigt. 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 Render-Blocking CSS.
  • Wenn ein Nutzer auf einem Mobilgerät auf die Seite zugreift, werden durch den zusätzlichen Code mobile Daten verbraucht.

Im Bereich Codeabdeckung können Sie Ihre Seite aufzeichnen und einen Bericht mit der Gesamtzahl der verwendeten und nicht verwendeten Bytes von CSS- und JavaScript-Ressourcen aufrufen. Außerdem können Sie den Code im Bereich Quellen verfolgen.

Bereich „Codeabdeckung“ öffnen

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

  3. Geben Sie coverage ein, wählen Sie den Befehl Codeabdeckung anzeigen aus und drücken Sie dann die Eingabetaste, um den Befehl auszuführen. Der Bereich Codeabdeckung wird im Drawer geöffnet.

    Der Bereich „Abdeckung“.

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

Codeabdeckung aufzeichnen

So erfassen Sie die Codeabdeckung:

  1. Wenn Sie den Abdeckungsbereich festlegen möchten, wählen Sie in der Aktionsleiste oben im Bereich Codeabdeckung in der Drop-down-Liste Pro Funktion oder Pro Block aus.

  2. Klicken Sie in der Mitte des Bereichs auf die Schaltfläche „Aktualisieren“ Neu laden, um die Aufzeichnung zu starten. Im Bereich Codeabdeckung 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 in der Aktionsleiste des Bereichs auf Instrumentierungs-Abdeckung beenden und Ergebnisse anzeigen.

Codeabdeckung analysieren

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

Klicken Sie auf eine Zeile, um die entsprechende Ressource im Bereich Quellen zu öffnen und eine detaillierte Aufschlüsselung des verwendeten und nicht verwendeten Codes zu sehen. Nicht verwendete Codezeilen sind links neben der Spalte mit den Zeilennummern durch vertikale graue Linien gekennzeichnet.

Ein Bericht zur Codeabdeckung.

  • In der Spalte URL wird die URL der analysierten Ressource angezeigt.
  • In der Spalte Typ wird angegeben, ob die Ressource CSS, JavaScript oder beides enthält.
  • In der Spalte Gesamtbytes wird die Gesamtgröße der Ressource in Byte angegeben.
  • In der Spalte Nicht verwendete Bytes wird die Anzahl der nicht verwendeten Bytes angegeben.
  • In der Spalte Visualisierung der Nutzung wird eine Visualisierung der Spalten Gesamtbytes und Nicht verwendete Bytes angezeigt. Der graue Bereich des Balkens steht für nicht verwendete Bytes. Der grüne Bereich steht für verwendete Bytes.

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

In der Statusleiste unten im Bereich Codeabdeckung wird der Prozentsatz des verwendeten Codes angezeigt. Die Statusleiste berücksichtigt die Filterung.

Neben der Filterleiste können Sie in der Drop-down-Liste auswählen, ob Alle oder nur CSS oder JavaScript im Bericht angezeigt werden sollen.

Wenn Sie Erweiterungscode in den Bericht aufnehmen möchten, aktivieren Sie Inhaltsskripts.

Klicken Sie auf Codeabdeckung exportieren, um den Bericht zu exportieren.