04/09/2022

Nicht verwendete JS- und CSS-Codes in Google Devtools anzeigen

Chrome Coverage

Sie können nicht verwendete Javascript- und CSS-Codes auf der Seite Chrome Devtools (Inspect) Coverage anzeigen.

Beim Erstellen von Webseiten erhöhen Codefragmente, die während des Renderns nicht verwendet und auf die unnötige Seite geladen werden, unnötig die Seitenlast und wirken sich somit negativ auf die Performance beim Seitenaufruf aus.

Chrome Devtools Coverage

Um DevTools (Inspect) im Chrome-Webbrowser zu öffnen, klicken Sie mit der rechten Maustaste und klicken Sie auf Inspect. Sie können es auch mit der Tastenkombination Option + Command + I für Mac OS, Ctrl + Shift + J oder F12 für Windows und Linux öffnen.

Um ungenutzte CSS- und JS-Ressourcen im Überprüfungsbildschirm anzuzeigen, muss der Abschnitt Coverage geöffnet werden. Klicken Sie auf die drei Punkte oben rechts auf dem Bildschirm und gehen Sie dann zu > Weitere Tools > Coverage.

Chrome Devtools Coverage

Nachdem Sie auf die Schaltfläche Coverage geklickt haben, klicken Sie auf das Feld “Click the record button to start capturing coverage.”.

Chrome Devtools Coverage Record

Nach dem Klicken auf die Schaltfläche werden Informationen darüber angezeigt, wie viele der auf die Seite hochgeladenen Ressourcen nicht verwendet werden.

Chrome Devtools Unused Bytes

Wenn auf eine der URLs geklickt wird, die auf der Registerkarte Coverage aufgeführt sind, werden die verwendeten und nicht verwendeten Teile der Codes in der Quell-URL angezeigt, die oben auf der Registerkarte Sources ausgewählt wurde.

Coverage Sources Used and Unused Bytes

In den Codefragmenten, die im Feld Sources erscheinen, zeigen die mit einem roten Streifen auf der linken Seite die unbenutzten und die mit einem blauen Streifen die verwendeten Codes an.