Nach nicht verwendetem JavaScript- und CSS-Code mit dem Abdeckungstool suchen

  • Artikel

Das Abdeckungstool hilft Ihnen, nicht verwendeten JavaScript- und CSS-Code zu finden. Das Entfernen von nicht verwendetem Code kann das Laden der Seite beschleunigen und die Mobilfunkdaten Ihrer mobilen Benutzer speichern.

In diesem Leitfaden wird beschrieben, wie Sie nicht verwendeten Code mithilfe des Abdeckungstools finden. In diesem Leitfaden wird nicht behandelt, wie Sie eine Codebasis umgestalten, um nicht verwendeten Code zu vermeiden, da das Refactoring von Code von Ihrem Technologiestapel abhängt.

Übersicht

Der Versand von nicht verwendetem JavaScript oder CSS ist ein häufiges Problem bei der Webentwicklung. Angenommen, Sie möchten die Bootstrap-Schaltflächenkomponente auf Ihrer Seite verwenden. Um die Schaltflächenkomponente zu verwenden, müssen Sie dem Bootstrap-Stylesheet in Ihrem HTML-Code wie folgt einen Link hinzufügen:

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  </head>
  <body>
    <button class="btn btn-primary">Button</button>
  </body>
</html>

Dieses Stylesheet enthält nicht nur den Code für die Bootstrap-Schaltflächenkomponente. enthält das CSS für alle Bootstrap-Komponenten. Da ihre Seite nur die Schaltflächenkomponente verwendet, können Benutzer zusätzlichen Code herunterladen, den sie nicht benötigen. Das Abdeckungstool hilft Ihnen, nicht verwendeten Code wie diesen zu finden.

Öffnen des Abdeckungstools

Verwenden Sie das Abdeckungstool , um nicht verwendeten Code auf Ihrer Seite zu finden:

  1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Öffnen Sie in DevTools das Befehlsmenü. Um das Befehlsmenü zu öffnen, drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS).

  3. Beginnen Sie mit der Eingabe von Coverage, drücken Sie die NACH-UNTEN-TASTE , um den Befehl Abdeckung anzeigen zu markieren, und drücken Sie dann die EINGABETASTE:

    Das Popupmenü

    Das Abdeckungstool wird im Bereich Schnellansicht unten in DevTools geöffnet:

    Das Abdeckungstool

Aufzeichnen von Code Coverage

  1. Klicken Sie im Abdeckungstool auf eine der folgenden Schaltflächen:

    • Um zu sehen, welcher Code zum Laden der Seite erforderlich ist, klicken Sie auf die Schaltfläche Instrumentierungsabdeckung starten und die Seite aktualisieren (Symbol ").

    • Um zu sehen, welcher Code nach der Interaktion mit der Seite verwendet wird, klicken Sie auf die Schaltfläche Instrument coverage (Das Symbol für die Instrumentabdeckung).

  2. Um die Aufzeichnung der Code Coverage zu beenden, klicken Sie auf die Schaltfläche Instrumentierungsabdeckung beenden und Ergebnisse anzeigen (Symbol Instrumentierungsabdeckung beenden und Ergebnisse anzeigen).

Analysieren der Code Coverage

In der Tabelle im Abdeckungstool werden die analysierten Ressourcen und die Menge an Code angezeigt, die innerhalb der einzelnen Ressourcen verwendet werden. Klicken Sie auf eine Zeile, um diese Ressource im Tool Quellen zu öffnen und einen Code Coverage-Bericht anzuzeigen, der eine Zeilen-für-Zeilen-Aufschlüsselung des verwendeten Codes und des nicht verwendeten Codes enthält:

Code Coverage-Bericht

Spalten im Code Coverage-Bericht:

Spalte Beschreibung
URL Die URL der analysierten Ressource.
Typ Gibt an, ob die Ressource CSS, JavaScript oder beides enthält.
Bytes gesamt Die Gesamtgröße der Ressource in Bytes.
Nicht verwendete Bytes Die Anzahl der Bytes, die nicht verwendet wurden.
Nutzungsvisualisierung Eine Visualisierung der Spalten Gesamtbytes und Nicht verwendete Bytes . Der grüne Abschnitt des Balkens wird in Bytes verwendet. Der rote Abschnitt des Balkens ist nicht verwendete Bytes.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.