Neuerungen in den Entwicklertools (Chrome 62)

Kayce Basques

Neue Funktionen und Änderungen in den DevTools in Chrome 62:

Top-Level-await-Operatoren in der Console

Die Console unterstützt jetzt await-Operatoren der obersten Ebene.

„await“-Operatoren der obersten Ebene in der Console verwenden

Abbildung 1. await-Operatoren der obersten Ebene in der Console verwenden

Neue Workflows für Screenshots

Sie können jetzt einen Screenshot eines Teils des Darstellungsbereichs oder eines bestimmten HTML-Knotens erstellen.

Screenshots eines Teils des Darstellungsbereichs

So erstellen Sie einen Screenshot eines Teils des Darstellungsbereichs:

  1. Klicken Sie auf Prüfen Prüfen oder drücken Sie Befehlstaste + Umschalttaste + C (Mac) oder Strg + Umschalttaste + C (Windows, Linux), um den Modus „Element untersuchen“ aufzurufen.
  2. Halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und wählen Sie den Bereich des Darstellungsbereichs aus, von dem Sie einen Screenshot erstellen möchten.
  3. Lassen Sie die Maustaste los. In den DevTools wird ein Screenshot des ausgewählten Bereichs heruntergeladen.

Screenshot eines Teils des Darstellungsbereichs erstellen

Abbildung 2. Screenshot eines Teils des Darstellungsbereichs erstellen

Screenshots bestimmter HTML-Knoten

So erstellen Sie einen Screenshot eines bestimmten HTML-Knotens:

  1. Wählen Sie im Bereich Elemente ein Element aus.

    Beispiel für einen Knoten

    Abbildung 3. In diesem Beispiel soll ein Screenshot des blauen Headers mit dem Text Tools erstellt werden. Dieser Knoten ist bereits im DOM-Baum des Bereichs Elemente ausgewählt.

  2. Öffnen Sie das Befehlsmenü.

  3. Geben Sie node ein und wählen Sie Capture node screenshot aus. In den DevTools wird ein Screenshot des ausgewählten Knotens heruntergeladen.

    Das Ergebnis des Befehls „Knoten-Screenshot aufnehmen“

    Abbildung 4. Das Ergebnis des Befehls Capture node screenshot

CSS-Raster hervorheben

Wenn Sie das CSS-Raster sehen möchten, das sich auf ein Element auswirkt, bewegen Sie den Mauszeiger im Bereich Elemente auf ein Element in der DOM-Baumstruktur. Um jedes Rasterelement wird ein gepunkteter Rahmen angezeigt. Das funktioniert nur, wenn display:grid auf das ausgewählte Element oder das übergeordnete Element angewendet wurde.

CSS-Raster hervorheben

Abbildung 5. CSS-Raster hervorheben

Im Video unten erfahren Sie in weniger als zwei Minuten die Grundlagen von CSS-Grid.

Eine neue API zum Abfragen von Heap-Objekten

Rufen Sie queryObjects(Constructor) in der Konsole auf, um ein Array von Objekten zurückzugeben, die mit dem angegebenen Konstruktor erstellt wurden. Beispiel:

  • queryObjects(Promise): Gibt alle Promises zurück.
  • queryObjects(HTMLElement): Gibt alle HTML-Elemente zurück.
  • queryObjects(foo), wobei foo ein Funktionsname ist. Gibt alle Objekte zurück, die über new foo() instanziiert wurden.

Der Umfang von queryObjects() ist der aktuell ausgewählte Ausführungskontext in der Console. Weitere Informationen finden Sie unter Ausführungskontext auswählen.

Neue Console-Filter

Die Console unterstützt jetzt auszuschließende Keywords und URL-Filter.

Negativfilter

Geben Sie -<text> in das Feld Filter ein, um alle Console-Nachrichten herauszufiltern, die <text> enthalten.

Beispiel für drei Nachrichten, die herausgefiltert werden

Abbildung 6. Mit der ersten Anweisung werden one, two, three und four in der Console protokolliert. two ist ausgeblendet, weil im Feld Filter -two eingegeben wurde

In den Entwicklertools wird eine Meldung herausgefiltert, wenn <text> gefunden wird:

  • Im Nachrichtentext.
  • Im Dateinamen, aus dem die Nachricht stammt.
  • Im Stack-Trace-Text.

Der Ausschlussfilter funktioniert auch mit regulären Ausdrücken wie -/[4-5]*ms/.

URL-Filter

Geben Sie url:<text> in das Feld Filter ein, um nur Meldungen anzuzeigen, die von einem Script stammen, dessen URL <text> enthält.

Der Filter verwendet die ungefähre Übereinstimmung. Wenn <text> irgendwo in der URL erscheint, wird die Meldung in den DevTools angezeigt.

Beispiel für die URL-Filterung

Abbildung 7. Mit dem URL-Filter werden nur Meldungen angezeigt, die von Scripts stammen, deren URL hymn enthält. Wenn Sie den Mauszeiger auf den Scriptnamen bewegen, sehen Sie, dass der Hostname diesen Text enthält.

HAR-Importe im Netzwerkbereich

Ziehen Sie eine HAR-Datei per Drag-and-drop in den Bereich Netzwerk, um sie zu importieren.

HAR-Datei importieren

Abbildung 8. HAR-Datei importieren

Cache-Ressourcen mit Vorschau im Bereich „Anwendung“

Klicken Sie in einer Tabelle für den Cache-Speicher auf eine Zeile, um eine Vorschau dieser Ressource unter der Tabelle aufzurufen.

Vorschau einer Cacheressource ansehen

Abbildung 9. Vorschau einer Cacheressource ansehen

Verbesserte Fehlerbehebung für responsiven Cache

In Chrome 61 und niedriger ist das Debuggen von mit der Cache API erstellten Caches ziemlich schwierig. Wenn beispielsweise auf einer Seite ein neuer Cache erstellt wird, müssen Sie die Seite oder die DevTools manuell aktualisieren, um den neuen Cache zu sehen.

In Chrome 62 wird der Tab Cache-Speicher jetzt in Echtzeit aktualisiert, wenn Sie einen Cache oder eine Ressource erstellen, aktualisieren oder löschen. Im Video unten sehen Sie ein Beispiel.

In der Demo für Cache-Speicher können Sie es selbst ausprobieren.

Codeabdeckung auf Blockebene

In Chrome 61 und niedriger wird auf dem Tab Abdeckung der gesamte Code innerhalb einer Funktion als verwendet markiert, solange die Funktion aufgerufen wird.

Beispiel für den Tab „Abdeckung“ in Chrome 61

Abbildung 10. Beispiel für den Tab Abdeckung in Chrome 61 Zeile 4 ist als verwendet markiert, obwohl sie nie ausgeführt wird.

Ab Chrome 62 sehen Sie auf dem Tab Abdeckung, welcher Code innerhalb einer Funktion aufgerufen wird.

Beispiel für den Tab „Abdeckung“ in Chrome 62

Abbildung 11. Beispiel für den Tab Abdeckung in Chrome 62 Zeile 4 ist als nicht verwendet markiert

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.