Sie können die Tabs der DevTools nach Belieben neu anordnen, genau sehen, wo Framework-Ereignisse gebunden wurden, und Netzwerkanfragen blockieren, um herauszufinden, welche Drittanbieter-Scripts die Leistung beeinträchtigen.
Bessere Steuerfeldnavigation: Konsole auf Nummer 2, Tabs neu anordnen und raffinierte Unterstreichungen
Nachdem wir untersucht hatten, welche Bereiche der DevTools am häufigsten verwendet werden, wurde klar, dass das Console-Steuerfeld im Vollbildmodus nicht die letzte Position in der Haupttabsleiste verdient hat. Als zweitbeliebtester Bereich ist er jetzt der zweite Tab. Das ist besonders bei niedrigeren Auflösungen wichtig, wenn nicht alle Tabs gleichzeitig angezeigt werden können.
Aber schau, wir verstehen es. Die klassische Reihenfolge ist Teil Ihrer Muskelspeicher und Sie werden sich eine Weile lang schwindelig fühlen. Oder vielleicht hasst du die Vollbildkonsole einfach nur! Keine Sorge, wir helfen Ihnen weiter. Die Tabs können jetzt per Drag-and-drop neu angeordnet werden:
Die Änderungen, die Sie an der Tableiste vornehmen, bleiben erhalten und funktionieren sowohl mit nativen Tabs als auch mit von Erweiterungen bereitgestellten Tabs. Ein weiterer Vorteil: Die Unterstreichungen sind flüssig und animiert. Weil wir so nett sind.
Unterstützung für Framework-Ereignis-Listener
Ereignisse, die von JS-Frameworks wie jQuery erstellt wurden, waren bei der Arbeit mit DevTools manchmal etwas mühsam. Das liegt daran, dass die meisten Frameworks die nativen DOM-Ereignisse in ihre Custom Event API einbinden. Ein Blick auf den Ereignis-Listener verrät also nicht wirklich viel darüber:
Mit der neuen Option „Framework-Listener“ auf dem Tab „Ereignis-Listener“ wird der Framework-Wrapper in DevTools erkannt und automatisch aufgelöst. Ereignisse, die an Frameworks gebunden sind, sehen jetzt genau so aus und verhalten sich genauso wie ihre nativen Pendants. Sie sehen also, wo sie tatsächlich gebunden wurden:
Das Beste vom Rest
- Mit benutzerdefinierten Objektformatierern können Sie in transpilierten Sprachen wie CoffeeScript Objekte in der DevTools-Konsole besser formatieren.
Die Zeitleiste hat ein neues, ansprechenderes Dialogfeld während der Aufnahme, in dem Status, Zeit und Puffernutzung auf einen Blick angezeigt werden.
Auch das Steuerfeld „Network“ (Netzwerk) zeigt einen hilfreichen Hinweis an, wenn es jetzt leer ist:
Sie können jetzt im Netzwerkbereich nach gemischten Inhalten filtern, indem Sie die Filtereingabe auf
mixed-content:displayedsetzen
Wie immer könnt ihr uns über Twitter oder die Kommentare unten eure Meinung mitteilen und Fehler unter crbug.com/new melden.
Bis zum nächsten Monat! Paul Bakaus und das DevTools-Team