Hallo zusammen, in der letzten Ausgabe des DevTools-Digest haben wir uns die leistungsstarken asynchronen Aufrufstacks und einige andere Themen angesehen. Diese Ausgabe umfasst eine verbesserte Filterung nach Netzwerkbereich (mit automatischer Vervollständigung), Bearbeitungsfunktionen mit Schatten-DOM-Inhalt, CodeMirror 4-Updates und mehr.
Filter im Netzwerkbereich
Sie können Ressourcen jetzt nach bestimmten Feldern wie „Domain“ filtern. Ein Filterformat sieht so aus: Domain:website.com. Zusätzlich zum Filtern erhalten Sie auch Vorschläge zur automatischen Vervollständigung für gültige Filterwerte, die während der Eingabe der Abfrage in Echtzeit aktualisiert werden. 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 durchführen
CodeMirror, der JavaScript-basierte Texteditor, der als Teil des Bereichs "Quellen" verwendet wird, wurde auf Version 4 aktualisiert. Dies hat eine Reihe neuer Funktionen zur Folge. crbug.com/356878]
Schnelle Suche nach einer CSS-Eigenschaft
Sie können jetzt über das neue Suchfeld im Bereich „Stile“ nach Attributnamen, Werten oder Regelselektoren suchen. Die Ergebnisse werden während der Eingabe in Echtzeit hervorgehoben. [crbug.com/278852]
Zeitstempel neben Konsolennachrichten
Wenn Sie Nachrichten schnell hintereinander protokollieren, kann es hilfreich sein, den genauen Zeitpunkt der Protokollierung zu sehen. Du kannst dies über Entwicklertools-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 Meldungen in der Konsole von etwas wie util.js:46. Jetzt können Sie die ursprünglichen Speicherorte 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],
Du kannst
Ctrl+verwenden, um dich auf die Konsoleneingabe zu konzentrieren. Das kann bei Workflows in den Entwicklertools nützlich sein, die nur mit der Tastatur funktionieren. [crbug.com/144943]Vorschläge für die automatische Vervollständigung im Rahmenstil für Werte (gepunktet, gestrichelt, doppelt, Groove) wurden entsprechend der Spezifikation aktualisiert. [crbug.com/349998]
Die Schaltfläche Standardeinstellungen wiederherstellen und aktualisieren **wurde dem Bereich „Einstellungen“ hinzugefügt, der genau das macht, was auf dem Zinn steht. [crbug.com/135451]
Diese Funktion befindet sich derzeit noch in der Testphase. Sie können die Funktion Dock nach links ausprobieren, um herauszufinden, 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.