Nach nicht verwendetem JavaScript- und CSS-Code mit dem Abdeckungstool suchen
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:
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.
Öffnen Sie in DevTools das Befehlsmenü. Um das Befehlsmenü zu öffnen, drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS).
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 Abdeckungstool wird im Bereich Schnellansicht unten in DevTools geöffnet:
Aufzeichnen von Code Coverage
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 (
").Um zu sehen, welcher Code nach der Interaktion mit der Seite verwendet wird, klicken Sie auf die Schaltfläche Instrument coverage (
).
Um die Aufzeichnung der Code Coverage zu beenden, klicken Sie auf die Schaltfläche 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:
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 finden Sie hier und wird von Kayce Basques geschrieben.
Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.