Abdeckung: Nicht verwendete JavaScript- und CSS-Elemente finden

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Im Bereich Abdeckung in den Chrome-Entwicklertools können Sie nicht verwendetes JavaScript und CSS-Code. Wenn Sie nicht verwendeten Code entfernen, können Sie den Seitenaufbau beschleunigen und die mobilen Daten Ihrer Nutzer sparen.

Codeabdeckung wird analysiert.

Übersicht

Das Versenden von nicht verwendetem JavaScript oder CSS ist ein häufiges Problem in der Webentwicklung. Angenommen, Sie möchten die Schaltflächenkomponente von Bootstrap verwenden. auf Ihrer Seite. Um die Schaltflächenkomponente zu verwenden, müssen Sie einen Link zu das Style-Sheet von Bootstrap in Ihrem HTML-Code wie hier gezeigt:

...
<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 den CSS-Code für alle Bootstrap-Komponenten. Aber Sie verwenden keine anderen Bootstrap-Komponenten nutzen. Ihre Seite lädt also viele nicht benötigten CSS-Code. Dieses zusätzliche CSS stellt ein Problem für Gründe:

  • Der zusätzliche Code verlangsamt den Seitenaufbau. Siehe CSS-Code, der das Rendern blockiert.
  • Wenn ein Nutzer die Seite über ein Mobilgerät aufruft, verbraucht der zusätzliche Code ihre mobilen Daten.

Bereich „Abdeckung“ öffnen

  1. Öffnen Sie das Befehlsmenü.

  2. 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 die Leiste.

    Bereich „Abdeckung“

Codeabdeckung aufnehmen

So erfassen Sie die Codeabdeckung:

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

  2. Klicke zum Starten der Aufzeichnung auf Aktualisieren Instrumentierungsabdeckung starten und Seite neu laden Im Bereich Abdeckung wird die Seite neu geladen und der zum Laden der Seite erforderliche Code erfasst. Die Aufzeichnung wird fortgesetzt, während Sie mit der Seite interagieren.

  3. Um die Code-Abdeckung zu beenden, klicken Sie auf stop_circle Instrumentierungsabdeckung 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 die entsprechende Ressource im Bereich Quellen zu öffnen. Sie sehen dann eine zeilenweise Aufschlüsselung von verwendetem und nicht verwendetem Code. Nicht verwendete Codezeilen werden durch rote Linien neben der Spalte mit Zeilennummern auf der linken Seite gekennzeichnet.

Bericht zur Codeabdeckung

  • Die Spalte URL enthält die URL der analysierten Ressource.
  • In der Spalte Typ ist angegeben, ob die Ressource CSS-, JavaScript- oder oder beides.
  • Die Spalte Gesamtbyte enthält die Gesamtgröße der Ressource in Byte.
  • Die Spalte Nicht verwendete Byte enthält die Anzahl der Byte, die nicht verwendet wurden.
  • Die letzte, unbenannte Spalte enthält eine Visualisierung der Werte Total Bytes Unused Bytes (Nicht verwendete Byte): Der rote Bereich der Leiste steht für nicht verwendete Byte. Die wird in Bytes verwendet.

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

In der Statusleiste unten im Bereich Abdeckung wird angezeigt, wie viel Prozent des Codes verwendet wurden. In der Statusleiste wird die Filterung berücksichtigt.

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

Wenn Sie Erweiterungscode in Ihren Bericht aufnehmen möchten, aktivieren Sie check_box Content-Skripts.

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