So geht die Integration von Firebug und den DevTools voran

Firebug 3 + die Firefox DevTools = Firebug.next
Keine Kommentare

DevTools sind aus der täglichen Arbeit eines Entwicklers nicht wegzudenken. Dabei sollten sie natürlich nicht nur möglichst viele Features mitbringen sondern gleichzeitig auch leicht zu bedienen sein. Um das zu erreichen, arbeitet Mozilla nun schon seit einiger Zeit daran, seine Firefox Developer Tools und Firebug besser miteinander zu vereinen.

Herauskommen soll dabei ein einziges, nützliches Tool für Entwickler, das sowohl über deutlich mehr Funktionalitäten als auch über ein neues Theme zur leichteren Bedienung verfügt.

Firebug.next

Das Ziel dabei ist, so erklärt Jan Honza Odvarko in einem Blogpost im Mozilla-Entwicklerblog, „ to help users feel at home when working with native DevTools“.

Darum arbeitet das Entwicklerteam fleißig daran, die beliebtesten Firebug-Features in die nativen DevTools zur portieren und sie dabei Multi-Prozess-kompatibel für das Remote Debugging verfügbar zu machen. Dabei ist Firebug 3 (bzw. Firebug.next) eigentlich kein neues Developer-Tool, sondern ein dünner Layer, der auf den bestehenden DevTools aufbaut. Diese sehen dank eines neuen Themes so aus wie Firebug; gleichzeitig wird so für eine leichtere Bedienung gesorgt.

Extensions für die neuen DevTools

Ebenso wurden viele beliebte Extensions auf den DevTools neu implementiert. Zwar wird deren Ausführung Firebug nicht zwingend benötigt, allerdings funktionieren die meisten davon auch mit dem neuen Firebug-Theme. Dazu zählt zum Beispiel FireQuery, ein Firefox-Plugin für die jQuery-Entwicklung. Damit lassen sich vor allem Elemente inspizieren, die mit jQuery-Daten verbunden sind; zudem kann über einen jQuerify-Button in der Konsole jQuery in die aktuelle Seite geladen werden.

Eine weitere nützliche Extension ist Pixel Perfect. Sie erlaubt es Webentwicklern und Designern, eine Website mit halbdurchsichtigen Layern zu überlagern, die dann einen pixelgenauen Vergleich von Seite und Layer ermöglichen.

Auch der HAR-Export zählt zu den in den DevTools implementierten Features. Dabei ist der Support für den Export von HAR-Dateien vom Netzwerk-Panel aus nun ein built-in-Feature im Firefox, für das keine Extension mehr benötigt wird. Zur Auswahl stehen zwei Kontext-Menü-Aktionen:

  • Copy All As Har, mit der die gesammelten Daten ins Clipboard kopiert werden
  • Save All As Har, mit der die gesammelten Daten in eine Datei abgespeichert werden

Zudem lässt sich einstellen, dass automatisch eine HAR-Datei für jede geladene Seite erstellt wird.

Darüber hinaus wurden zahlreiche Extensions implementiert, die die Nutzung von console.*-APIs serverseitig erlauben, sodass die Backend-Logs direkt im Browser angezeigt werden. Auch dieses Feature wird bereits nativ im Firefox unterstützt; für die Nutzung müssen lediglich in der Konsole Logs, die vom Server kommen, aktiviert werden.

Alle Features sind nochmal ausführlicher im oben genannten Blogpost vorgestellt. Noch dauert die Entwicklung von Firebug 3 an; zuletzt erschien die erste Beta von Firebug 3, die auf GitHub zum Testen zur Verfügung steht.

webinale – the holistic web conference

Green Webdesign – das nachhaltige Internet

mit Henning Fries (DIaLOGIKa GmbH)

You Can’t Spell Accessibility Without CSS

mit Jemima Abu (Telesoftas)

15 Tipps zur Internationalisierung im SEA

mit Lara Marie Massmann (Claneo)

HTML & CSS Days 2020

Web Performance Optimierung

mit Sven Wolfermann (maddesigns)

HTML und CSS für Backendentwickler

mit Jens Grochtdreis (webkrauts.de)

Aufmacherbild: Illustration of a flame icon with a bug von Shutterstock / Urheberrecht: Blablo101

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -