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

  • Artikel
  • 2 Minuten Lesedauer

Das Coverage-Tool kann Ihnen helfen, nicht verwendeten JavaScript- und CSS-Code zu finden. Wenn Sie nicht verwendeten Code entfernen, kann dies das Laden Ihrer Seite beschleunigen und Mobile-Daten ihrer mobilen Benutzer speichern.

Analysieren der Codeabdeckung.

Das Auffinden von nicht verwendetem Code ist relativ einfach. Es kann jedoch schwierig sein, eine Codebasis so umzugestalten, dass jede Seite nur javaScript und CSS enthält, die sie benötigt. In diesem Leitfaden wird nicht erläutert, wie Sie eine Codebasis umgestalten, um nicht verwendeten Code zu vermeiden, da diese Umgestaltung von Ihrem Technologiestapel abhängt.

Übersicht

Das Versenden nicht verwendeter JavaScript- oder CSS-Dateien 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 einen Link zum Bootstrap-Stylesheet in Ihrem HTML-Code wie folgt hinzufügen:

<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. Sie enthält das CSS für alle Bootstrap-Komponenten. Sie verwenden jedoch keine der anderen Bootstrap-Komponenten. Ihre Seite lädt also eine Reihe von CSS herunter, die sie nicht benötigt.

Dieses zusätzliche CSS ist aus den folgenden Gründen ein Problem:

  • Der zusätzliche Code verlangsamt das Laden der Seite.

  • Wenn ein Benutzer auf die Seite auf einem mobilen Gerät zugreift, verwendet der zusätzliche Code seine Mobilfunkdaten.If a user accesses the page on a mobile device, the extra code uses up their cellular data.

Öffnen des Abdeckungstools

  1. Öffnen Sie das Befehlsmenü.

  2. Beginnen Sie mit der coverageEingabe, wählen Sie den Befehl "Abdeckung anzeigen " aus, und drücken Sie Enterdann . Das Abdeckungstool wird in der Schublade geöffnet.

    Das Abdeckungstool.

Codeabdeckung aufzeichnen

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

    • Klicken Sie auf "Instrumentierungsabdeckung starten" und "Neu laden" (Seite "Instrumentierungsabdeckung starten" und "Neu laden"). wenn Sie sehen möchten, welcher Code zum Laden der Seite erforderlich ist.

    • Klicken Sie auf Instrumentabdeckung (Instrumentabdeckung), wenn Sie sehen möchten, welcher Code nach der Interaktion mit der Seite verwendet wird.

  2. Klicken Sie auf "Erfassung der Instrumentierung beenden" und "Ergebnisse anzeigen " (Erfassung der Instrumentierung beenden und Ergebnisse anzeigen) wenn Sie die Aufzeichnung der Codeabdeckung beenden möchten.

Analysieren der Codeabdeckung

In der Tabelle im Abdeckungstool werden die analysierten Ressourcen und die Menge an Code angezeigt, die in den einzelnen Ressourcen verwendet wird. Klicken Sie auf eine Zeile, um diese Ressource im Quellentool zu öffnen und eine Zeilenaufschlüsselung des verwendeten Codes und des nicht verwendeten Codes anzuzeigen.

Ein Codeabdeckungsbericht:

Ein Codeabdeckungsbericht.

Spalten im Codeabdeckungsbericht:

Spalte Beschreibung
URL Die URL der ressource, die analysiert wurde.
Typ Gibt an, ob die Ressource CSS, JavaScript oder beides enthält.
Bytes gesamt Die Gesamtgröße der Ressource in Byte.
Nicht verwendete Bytes Die Anzahl der Bytes, die nicht verwendet wurden.
Letzte, unbenannte Spalte Eine Visualisierung der Spalten "Total Bytes" und "Unused Bytes ". Der rote Abschnitt der Leiste ist nicht verwendete Bytes. Der grüne Abschnitt wird byte verwendet.

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 Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License. Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.