Neuerungen in den Entwicklertools (Chrome 62)

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

• Unterstützung für await-Operatoren der obersten Ebene in der Console.
• Screenshots eines Teils des Darstellungsbereichs und Screenshots von bestimmten HTML-Knoten
• Hervorhebung des CSS-Rasters:
• Eine neue Console API zum Abfragen von Objekten.
• Negative Filter und URL-Filter in der Console
• HAR-Importe im Bereich Netzwerk
• Cache-Ressourcen, die in der Vorschau angezeigt werden können
• Vorhersagbarere Cache-Fehlerbehebung:
• Codeabdeckung auf Blockebene

Await-Operatoren der obersten Ebene in der Console

Die Console unterstützt jetzt Top-Level-await-Operatoren.

Abbildung 1. Verwendung von await-Operatoren der obersten Ebene in der Console

Neue Workflows für Screenshots

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

Screenshots eines Ausschnitts des Darstellungsbereichs

So erstellen Sie einen Screenshot von einem Teil Ihres Darstellungsbereichs:

1. Klicken Sie auf Prüfen oder drücken Sie Befehlstaste + Umschalttaste + C (Mac) oder Strg + Umschalttaste + C (Windows, Linux), um in den Modus „Element untersuchen“ zu wechseln.
2. Halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows und Linux) gedrückt und wählen Sie den Teil Darstellungsbereichs, von dem Sie einen Screenshot erstellen möchten.
3. Lassen Sie die Maustaste los. Die Entwicklertools lädt einen Screenshot des ausgewählten Teils herunter.

Abbildung 2. Screenshot von einem Teil des Darstellungsbereichs erstellen

Screenshots bestimmter HTML-Knoten

So erstellen Sie einen Screenshot von einem bestimmten HTML-Knoten:

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

   

   Abbildung 3. In diesem Beispiel ist es das Ziel, einen Screenshot der blauen Überschrift zu machen, auf der das Symbol den Text Tools. Beachten Sie, dass dieser Knoten bereits in der DOM-Struktur des Bereich Elemente

2. Öffnen Sie das Befehlsmenü.

3. Beginnen Sie mit der Eingabe von node und wählen Sie Capture node screenshot aus. In den Entwicklertools wird ein Screenshot der ausgewählten Knoten.

   

   Abbildung 4. Das Ergebnis des Befehls Capture node screenshot

CSS-Raster-Hervorhebung

Wenn Sie das CSS-Raster aufrufen möchten, das ein Element beeinflusst, bewegen Sie den Mauszeiger auf ein Element in der DOM-Baumstruktur des Bereich Elemente. Alle Rasterelemente werden mit einer gestrichelten Kontur dargestellt. Dies funktioniert nur, wenn der auf das ausgewählte Element oder auf das übergeordnete Element des ausgewählten Elements angewendet: display:grid.

Abbildung 5. CSS-Raster hervorheben

Sehen Sie sich das Video unten an, um die Grundlagen des CSS-Rasters in weniger als 2 Minuten zu erlernen.

Eine neue API zum Abfragen von Heap-Objekten

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

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

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

Neue Konsolenfilter

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

Negative Filter

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

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

Die Entwicklertools filtern eine Nachricht heraus, wenn <text> gefunden wird:

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

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

URL-Filter

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

Der Filter verwendet ungenaue Übereinstimmungen. Wenn <text> irgendwo in der URL enthalten ist, zeigt die Entwicklertools die angezeigt.

Abbildung 7. URL-Filter verwenden, um nur Nachrichten anzuzeigen, die von Skripts stammen, deren URL enthält hymn. Wenn Sie den Mauszeiger auf den Skriptnamen bewegen, sehen Sie, dass der Hostname diesen Text enthält.

HAR-Importe im Bereich "Netzwerk"

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

Abbildung 8. HAR-Datei importieren

Cache-Ressourcen in der Vorschau im Anwendungsbereich

Klicken Sie auf eine Zeile in einer Tabelle vom Typ Cache-Speicher, um eine Vorschau der entsprechenden Ressource unterhalb der Tabelle zu sehen.

Abbildung 9. Vorschau einer Cache-Ressource anzeigen

Responsiveres Cache-Debugging

In Chrome 61 und früheren Versionen ist das Debugging von Caches, die mit der Cache API erstellt wurden, sehr mühsam. Für Wenn eine Seite beispielsweise einen neuen Cache erstellt, müssen Sie die Seite oder die Entwicklertools manuell aktualisieren, um den neuen Cache zu sehen.

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

Sehen Sie sich die Demo zum Cache-Speicher an, um es selbst auszuprobieren.

Codeabdeckung auf Blockebene

In Chrome 61 und früheren Versionen wird auf dem Tab Abdeckung der gesamte Code einer Funktion als verwendet markiert. solange die Funktion aufgerufen wird.

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

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

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

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools