Hallo zusammen, in der letzten Ausgabe des DevTools-Digest haben wir uns die leistungsstarken asynchronen Aufrufstacks und einige andere Themen angesehen. Diese Version bietet unter anderem eine verbesserte Filterung im Netzwerkbereich (mit automatischer Vervollständigung), Bearbeitungsmöglichkeiten für Shadow-DOM-Inhalte und Updates für CodeMirror 4.
Filter im Netzwerkbereich
Sie können Ressourcen jetzt nach bestimmten Feldern wie „Domain“ filtern. Ein Filterformat sieht so aus: Domain:website.com. Neben den Filtern erhalten Sie auch Vorschläge für die automatische Vervollständigung gültiger Filterwerte, die in Echtzeit aktualisiert werden, während Sie Ihre Suchanfrage eingeben. Das kann nützlich sein, wenn Sie alle Ressourcen finden möchten, die von einer bestimmten Domain bereitgestellt werden. [crbubg.com/258421]
Shadow-DOM-Inhalte bearbeiten
In den DevTools konnte man schon immer reguläres HTML im Bereich „Elemente“ bearbeiten. Diese Funktionen gelten jetzt auch für Elemente, die zu einem Shadow DOM gehören. [crbug.com/348991]
Upgrade auf CodeMirror 4.0
CodeMirror, der JavaScript-basierte Texteditor, der im Bereich „Quellen“ verwendet wird, wurde auf Version 4 aktualisiert. Dadurch wurden viele neue Funktionen hinzugefügt. crbug.com/356878]
Schnelle Suche nach einer CSS-Property
Im neuen Suchfeld im Bereich „Stile“ können Sie jetzt nach Property-Namen, -Werten oder Regelauswahlen suchen. Die Ergebnisse werden während der Eingabe in Echtzeit hervorgehoben. [crbug.com/278852]
Zeitstempel neben Konsolenmeldungen
Wenn Sie Nachrichten in schneller Folge protokollieren, kann es hilfreich sein, die genaue Uhrzeit zu sehen, zu der eine Nachricht protokolliert wird. Sie können dies über die DevTools-Tests aktivieren. [crbug.com/131714]
Aufschlüsselung der Arbeitsspeicherstatistiken für Heap-Snapshots
Wenn Sie sich einen aufgezeichneten Heap-Snapshot ansehen, sehen Sie das Statistik-Kreisdiagramm, das eine visuelle, farbcodierte Übersicht darüber bietet, welcher Aspekt von JavaScript den meisten Arbeitsspeicher verbraucht. Diese Funktion ist derzeit experimentell. Aktivieren Sie „Heap-Snapshot-Statistiken“, um sie auszuprobieren. [crbug.com/346335]
Originalquelle eines console.log-Objekts ansehen, nicht die eingekapselte Version
Sie haben wahrscheinlich eine console.log-Wrapperfunktion, aber leider stammen alle Nachrichten in der Konsole von etwas wie util.js:46. Jetzt können Sie die ursprünglichen Standorte in den DevTools auflösen. Geben Sie die Datei, die Konsolenprotokollmeldungen umschließt, in das Eingabefeld „Überspringen des Durchlaufens von Quellen mit bestimmten Namen“ ein, damit DevTools sie als Blackbox behandelt und dann die tatsächliche Quelle einer Protokollanweisung anzeigt. [crbug.com/231007]
Weitere kleine, aber nützliche Neuerungen
Aktualisieren Sie den Bereich „Ereignis-Listener“ im Bereich „Elemente“, nachdem Sie JavaScript-Ereignis-Listener dynamisch hinzugefügt oder entfernt haben. [crbug.com/341044]
Mit der Taste
Ctrl+können Sie den Fokus auf die Eingabe in der Console legen. Das ist nützlich, wenn Sie in den DevTools nur die Tastatur verwenden möchten. [crbug.com/144943]Die Vorschläge für die automatische Vervollständigung von „border-style“ für Werte (punktiert, gepunktet, doppelt, Riffel) wurden an die Spezifikation angepasst. [crbug.com/349998]
Im Bereich „Einstellungen“ wurde die Schaltfläche Standardeinstellungen wiederherstellen und aktualisieren hinzugefügt. [crbug.com/135451]
An der linken Seite andocken ist derzeit eine experimentelle Funktion. Sie können sie ausprobieren, um zu sehen, ob sie für Ihren Workflow geeignet ist. Die anderen Layoutmodi sind „Im Hauptfenster andocken“ (rechts oder unten) und „In separatem Fenster anzeigen“. [crbug.com/134282]
„wheel“ wird jetzt als Breakpoint für Event-Listener angeboten. Dies ist eine Ergänzung zu den üblichen Ereignissen wie „click“, „mousemove“ und „mousedown“. [crbug.com/347562]
Das war es fürs Erste. Vielen Dank fürs Lesen.