Neuerungen in den Entwicklertools (Chrome 62)

Kayce Basques

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

Await-Operatoren der obersten Ebene in der Console

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

Await-Operatoren der obersten Ebene in der Console verwenden

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 Untersuchen 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 Teil des Darstellungsbereichs aus, 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.

Screenshot von einem Teil des Darstellungsbereichs erstellen

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.

    Beispiel für einen Knoten

    Abbildung 3. In diesem Beispiel soll ein Screenshot der blauen Überschrift mit dem Text Tools erstellt werden. Beachten Sie, dass dieser Knoten bereits in der DOM-Struktur des Steuerfelds Elemente ausgewählt ist.

  2. Öffnen Sie das Befehlsmenü.

  3. Beginnen Sie mit der Eingabe von node und wählen Sie Capture node screenshot aus. Die Entwicklertools lädt einen Screenshot des ausgewählten Knotens herunter.

    Das Ergebnis des Befehls „Capture node proxy“ (Screenshot erstellen)

    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 Steuerfelds Elemente. Alle Rasterelemente werden mit einer gestrichelten Kontur dargestellt. Dies funktioniert nur, wenn auf das ausgewählte Element oder das übergeordnete Element des ausgewählten Elements display:grid angewendet wurde.

CSS-Raster hervorheben

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) über die Console auf, um ein Array von Objekten zurückzugeben, 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 Objekte zurück, die über new foo() instanziiert wurden.

Der Bereich von queryObjects() ist der aktuell in der Console ausgewählte Ausführungskontext. Siehe 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.

Beispiel für 3 Nachrichten, die herausgefiltert werden

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, 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 enthalten ist, wird die Meldung in den Entwicklertools angezeigt.

Beispiel für die URL-Filterung

Abbildung 7. URL-Filter verwenden, um nur Nachrichten anzuzeigen, die von Skripts stammen, deren URL hymn enthält 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.

HAR-Datei 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.

Vorschau einer Cache-Ressource anzeigen

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. 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 einen Cache oder eine Ressource erstellen, aktualisieren oder 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.

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 gekennzeichnet, 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 gekennzeichnet.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59