Hallo, in der letzten Ausgabe des DevTools Digest haben wir uns mit den leistungsstarken Asynchronous-Aufrufstacks und weiteren leistungsstarken Funktionen beschäftigt. In dieser Version gibt es unter anderem verbesserte Filter für Netzwerkbereiche (mit automatischer Vervollständigung), Bearbeitungsmöglichkeiten mit Shadow-DOM-Inhalten und Updates von CodeMirror 4.
Netzwerkbereichfilter
Sie können Ressourcen jetzt nach bestimmten Feldern wie „Domain“ filtern. Ein Filterformat ist: Domain:website.com. Zusätzlich zum Filtern erhalten Sie auch automatisch vervollständigte Vorschläge für gültige Filterwerte, die während der Eingabe Ihrer Abfrage in Echtzeit aktualisiert werden. Dies kann nützlich sein, wenn Sie alle Ressourcen finden müssen, die von einer bestimmten Domain bereitgestellt werden. [crbubg.com/258421].
Shadow-DOM-Inhalt bearbeiten
Mit den Entwicklertools war es schon immer möglich, normalen HTML-Code im Steuerfeld „Elemente“ zu bearbeiten. Diese Funktionen reichen jetzt auch für Elemente in einem Shadow-DOM aus. [crbug.com/348991].
Upgrade auf CodeMirror 4.0
CodeMirror, der JavaScript-basierte Texteditor, der als Teil des Bereichs "Quellen" verwendet wird, wurde auf Version 4 aktualisiert. Das Ergebnis ist eine Reihe neuer Funktionen. crbug.com/356878]
Schnellsuche nach einer CSS-Property
Sie können jetzt über das neue Suchfeld im Bereich „Stile“ nach Eigenschaftsnamen, Werten oder Regelauswahlen suchen. Die Ergebnisse werden während der Eingabe Ihrer Abfrage in Echtzeit hervorgehoben. [crbug.com/278852].
Zeitstempel neben Konsolennachrichten
Wenn Meldungen kurz hintereinander protokolliert werden, kann es hilfreich sein, den genauen Zeitpunkt zu sehen, zu dem eine Meldung protokolliert wird. Das lässt sich über die Tests in den Entwicklertools aktivieren. [crbug.com/131714].
Aufschlüsselung der Arbeitsspeicherstatistik für Heap-Snapshots
Beachten Sie beim Ansehen eines aufgezeichneten Heap-Snapshots das Stastik-Kreisdiagramm, das einen visuellen, farbcodierten Überblick darüber gibt, welcher Aspekt von JavaScript den meisten Arbeitsspeicher beansprucht. Diese Funktion befindet sich noch in der Testphase. Aktiviere „Heap-Snapshot-Statistiken“, um sie auszuprobieren. [crbug.com/346335].
Ursprüngliche Quelle von console.log ansehen, nicht die umschlossene Version
Wahrscheinlich haben Sie eine „console.log“-Wrapper-Funktion, aber leider stammen in der Console alle Ihre Nachrichten von etwas wie „util.js:46“. Du kannst jetzt mit den Entwicklertools festlegen, dass deine ursprünglichen Speicherorte aufgelöst werden. Geben Sie die Datei mit den Log-Nachrichten der Konsole in das Eingabefeld „Überspringen von Quellen mit bestimmten Namen“ ein, damit die Entwicklertools eine Blackbox machen und dann die tatsächliche Quelle einer Log-Anweisung anzeigen können. [crbug.com/231007].
Ein paar kleine, aber leistungsstarke Ergänzungen
Aktualisieren Sie den Bereich „Ereignis-Listener“ im Steuerfeld „Elemente“, nachdem Sie JavaScript-Ereignis-Listener dynamisch hinzugefügt oder entfernt haben. [crbug.com/341044].
Du kannst
Ctrl+verwenden, um dich auf die Console-Eingabe zu konzentrieren. Dies kann für einen Workflow in den Entwicklertools nützlich sein, der nur über die Tastatur ausgeführt wird. [crbug.com/144943].Automatische Vervollständigungsvorschläge im Rahmen-Stil für Werte (gestrichelt, gestrichelt, doppelt, groov) wurden aktualisiert, um der Spezifikation zu entsprechen. [crbug.com/349998]
Die Schaltfläche Standardeinstellungen wiederherstellen und neu laden wurde in die Einstellungen aufgenommen. [crbug.com/135451].
Das ist eine experimentelle Funktion. Sie können Links andocken ausprobieren, um festzustellen, ob sie für Ihren Workflow geeignet ist. Die anderen Layoutmodi sind Andocken an das Hauptfenster (rechts oder unten) und das Abdocken in einem separaten Fenster. [crbug.com/134282].
„wheel“ wird jetzt als Haltepunkt des Ereignis-Listeners angeboten und ist zusätzlich zu den üblichen Ereignissen „click“, „Mousemove“, „Mousedown“ usw. verfügbar. [crbug.com/347562].
Das ist im Moment erstmal alles. Danke fürs Lesen!