DevTools-Digest: Neuanordnung von Tabs, Konsole 2 und Framework-Ereignis-Listener

Paul Bakaus
Paul Bakaus

Du kannst die Entwicklertools-Tabs so anordnen, wie es dir am besten passt, und genau sehen, wo Framework-Ereignisse gebunden waren, und Netzwerkanfragen blockieren, um zu sehen, welche Drittanbieter-Skripts deine Arbeit ausbremsen.

Bessere Bereichsnavigation: Konsole auf Platz 2, Tab-Reihenfolge und raffinierte Unterstreichungen

Bei der Untersuchung, welche Bereiche der Entwicklertools am meisten genutzt werden, wurde festgestellt, dass das Vollbildkonsolenfenster die letzte Position in der Haupttableiste nicht verdiente. Der am zweithäufigsten verwendete Tab ist jetzt der zweite Tab. Das ist vor allem bei niedrigeren Auflösungen wichtig, wenn nicht alle Tabs gleichzeitig angezeigt werden können.

Aber schau mal, wir verstehen. Die klassische Reihenfolge gehört zum Muskelgedächtnis und dir wird eine Weile schwindelig. Oder vielleicht hasst du einfach die Vollbildkonsole! Kein Grund zur Panik, wir kümmern uns darum. Sie können die Tabs jetzt neu anordnen, indem Sie sie wie folgt verschieben:

Die Änderungen, die Sie an der Tableiste vornehmen, bleiben erhalten und funktionieren sowohl mit nativen Tabs als auch mit Tabs, die über Erweiterungen bereitgestellt werden. Und zusätzlich gibt es noch geschmeidige, animierte Unterstreichungen. Weil wir so nett sind.

Unterstützung von Framework-Ereignis-Listenern

Von JS Frameworks wie jQuery erstellte Ereignisse sind bei der Arbeit mit Entwicklertools manchmal mühsam. Das liegt daran, dass die meisten Frameworks die nativen DOM-Ereignisse in ihre benutzerdefinierte Event API einbinden. Ein Blick auf den Event-Listener verrät also nicht viel darüber, was passiert:

Framework-Listener deaktiviert

Mit der neuen Option "Framework-Listener" auf dem Tab "Ereignis-Listener" erkennt die Entwicklertools den Teil des Frameworks-Wrappings und löst ihn automatisch auf. Jetzt sehen die von Frameworks gebundenen Ereignisse genau wie ihre nativen Gegenstücke aus und verhalten sich auch so, dass Sie sehen, wo sie tatsächlich gebunden waren:

Framework-Listener aktiviert

Das Beste vom Rest

  • Mit benutzerdefinierten Objektformatierern können transpilierte Sprachen wie CoffeeScript ihre Objekte in der Entwicklertools-Konsole besser formatieren.
  • Während der Aufzeichnung hat die Zeitachse ein neues, optisch ansprechenderes Dialogfeld, in dem du auf einen Blick Status, Zeit und Puffernutzung siehst.

    Hinweis auf die Zeitachse.
  • Auch das Feld „Network“ (Netzwerk) zeigt einen hilfreichen Hinweis an, wenn es jetzt leer ist:

    Netzwerkhinweis.
  • Sie können jetzt im Bereich „Netzwerk“ nach gemischten Inhalten filtern, indem Sie die Filtereingabe verwenden und auf mixed-content:displayed festlegen


Wie immer kannst du uns über Twitter mitteilen oder in den Kommentaren unten Feedback geben. Programmfehler kannst du unter crbug.com/new melden.

Bis zum nächsten Monat! Paul Bakaus und das DevTools-Team