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 Konsole unterstützt jetzt übergeordnete await-Operatoren.

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

Abbildung 1. Übergeordnete await-Operatoren in der Console verwenden

Neue Screenshot-Workflows

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

Screenshots eines Teils des Darstellungsbereichs

So erstellen Sie einen Screenshot eines Ausschnitts Ihres 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 prüfen“ 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. In den Entwicklertools wird ein Screenshot des ausgewählten Abschnitts heruntergeladen.

Screenshot eines Ausschnitts des Darstellungsbereichs erstellen

Abbildung 2. Screenshot eines Ausschnitts des Darstellungsbereichs erstellen

Screenshots bestimmter HTML-Knoten

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

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

    Beispiel für einen Knoten

    Abbildung 3. In diesem Beispiel soll ein Screenshot der blauen Kopfzeile mit dem Text Tools erstellt werden. Dieser Knoten ist bereits in der DOM-Baumstruktur des Steuerfelds Elemente ausgewählt.

  2. Öffnen Sie das Befehlstaste-Menü.

  3. Beginnen Sie mit der Eingabe von node und wählen Sie Capture node screenshot aus. Mit den Entwicklertools wird ein Screenshot des ausgewählten Knotens heruntergeladen.

    Ergebnis des Befehls "Screenshot des Knotens erstellen"

    Abbildung 4. Ergebnis des Befehls Capture node screenshot

CSS-Rasterhervorhebung

Wenn Sie das CSS-Raster sehen möchten, das ein Element beeinflusst, bewegen Sie den Mauszeiger in der DOM-Struktur des Steuerfelds Elemente auf ein Element. Alle Rasterelemente werden mit einem gestrichelten Rahmen versehen. 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 folgende Video an, um die Grundlagen des CSS Grids in weniger als 2 Minuten kennenzulernen.

Eine neue API zum Abfragen von Heap-Objekten

Rufen Sie queryObjects(Constructor) in der 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 Console-Filter

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

Negative Filter

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

Beispiel für drei herausgefilterte Nachrichten

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

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

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

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 anzeigen zu lassen, die von einem Skript stammen, dessen URL <text> enthält.

Der Filter verwendet ungenaue Übereinstimmungen. Wenn <text> irgendwo in der URL auftaucht, wird die Meldung in den Entwicklertools angezeigt.

Beispiel für die URL-Filterung

Abbildung 7. URL-Filterung 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 in den Bereich „Netzwerk“

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

Als Vorschau verfügbare Cache-Ressourcen im Anwendungsbereich

Klicken Sie auf eine Zeile in einer Tabelle mit dem Cache-Speicher, um unter der Tabelle eine Vorschau dieser Ressource zu sehen.

Vorschau einer Cache-Ressource

Abbildung 9. Vorschau einer Cache-Ressource

Schnelleres Cache-Debugging

In Chrome 61 und früheren Versionen ist die Fehlerbehebung für Caches, die mit der Cache API erstellt wurden, sehr grob. Wenn eine Seite beispielsweise einen neuen Cache erstellt, musst du die Seite oder die Entwicklertools manuell aktualisieren, damit der neue Cache angezeigt wird.

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.

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

Codeabdeckung auf Blockebene

In Chrome 61 und früheren Versionen markiert der Tab Abdeckung den gesamten Code innerhalb einer Funktion als verwendet, solange die Funktion aufgerufen wird.

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

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

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

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

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

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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