Neuerungen in den Entwicklertools (Chrome 62)

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

• Unterstützung für await-Operatoren auf oberster Ebene in der Konsole:
• Screenshots eines Teils des Viewports und Screenshots bestimmter HTML-Knoten.
• CSS-Grid-Highlighting
• Eine neue Console API zum Abfragen von Objekten:
• Negative Filter und URL-Filter in der Konsole
• HAR-Importe im Bereich Netzwerk:
• Cache-Ressourcen mit Vorschau:
• Besser planbares Cache-Debugging:
• Codeabdeckung auf Blockebene:

„Top-level await“-Operatoren in der Console

Die Console unterstützt jetzt await-Operatoren auf oberster Ebene.

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

Neue Screenshot-Workflows

Sie können jetzt einen Screenshot von einem Teil des Viewports oder von einem bestimmten HTML-Knoten erstellen.

Screenshots eines Teils des Viewports

So erstellen Sie einen Screenshot eines Teils des Viewports:

1. Klicken Sie auf Untersuchen oder drücken Sie Befehlstaste + Umschalt + C (Mac) oder Strg + Umschalt + 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 Teil des Ansichtsfensters aus, von dem Sie einen Screenshot erstellen möchten.
3. Lassen Sie die Maustaste los. DevTools lädt einen Screenshot des ausgewählten Bereichs herunter.

Abbildung 2. Screenshot eines Teils des Viewports erstellen

Screenshots bestimmter HTML-Knoten

So erstellen Sie einen Screenshot eines bestimmten HTML-Knotens:

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

   

   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. DevTools lädt einen Screenshot des ausgewählten Knotens herunter.

   

   Abbildung 4. Das Ergebnis des Befehls Capture node screenshot

CSS-Grid-Highlighting

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

Abbildung 5. CSS-Raster hervorheben

Im folgenden Video erfahren Sie in weniger als 2 Minuten die Grundlagen von CSS Grid.

Neue API zum Abfragen von Heap-Objekten

Rufen Sie queryObjects(Constructor) über die 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 Bereich von queryObjects() ist der aktuell ausgewählte Ausführungskontext in der Konsole. Weitere Informationen finden Sie unter Ausführungskontext auswählen.

Neue Konsolenfilter

Die Console unterstützt jetzt Negativ- und URL-Filter.

Filter „Negativ“

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

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

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

• Im Nachrichtentext.
• Im Dateinamen, aus dem die Nachricht stammt.
• Im Text des Stacktrace.

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

URL-Filter

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

Der Filter verwendet ungenaue Übereinstimmungen. Wenn <text> an einer beliebigen Stelle in der URL vorkommt, wird die Meldung in den DevTools angezeigt.

Abbildung 7. Mit der URL-Filterung werden nur Nachrichten angezeigt, die von Skripts 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 Network (Netzwerk), um sie zu importieren.

Abbildung 8. HAR-Datei importieren

Cache-Ressourcen mit Vorschau im Bereich „Anwendung“

Klicken Sie auf eine Zeile in einer Cache Storage-Tabelle, um eine Vorschau der entsprechenden Ressource unter der Tabelle aufzurufen.

Abbildung 9. Vorschau einer Cacheressource

Responsiveres Cache-Debugging

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

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

Cache Storage Demo

Codeabdeckung auf Blockebene

In Chrome 61 und früher wird auf dem Tab Coverage (Abdeckung) der gesamte Code innerhalb einer Funktion als verwendet markiert, sofern die Funktion aufgerufen wird.

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 wird auf dem Tab Coverage (Abdeckung) angezeigt, welcher Code innerhalb einer Funktion aufgerufen wird.

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

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.