Revision 432: Firefox und seine Devtools

Lange geplant, jetzt in die Tat umgesetzt, haben wir diese Revision Harald Kirschner zu Gast, um über den gesamten Firefox Cosmos zu sprechen. Harald ist aktuell nicht nur Produkt Manager für die Firefox Developer Tools und Performance Tooling zuständig, sondern hat zuvor maßgeblich am Projekt „Quantum“ mitgewirkt, bei dem Firefox‘ Infrastruktur nach und nach durch modernere und performantere Bausteine ersetzt wurde.

[00:00:33] Schaunotizen

Der Next-Gen-Firefox für Android: Firefox Preview

„Quantum“ ist ein gutes Stichwort, denn dieses vor einem halben Jahrzehnt begonnene Projekt hat „Firefox Preview“ (interner Projektname „Fenix“) erst möglich gemacht: Einen mobilen Browser, der ganz ohne Tricksen und Abkürzen wahnsinnig schnell ist. Ein wesentlicher Bestandteil von „Quantum“, der das möglich gemacht hat, ist „Web Render“, eine neugedachte und fürs Web optimierte Render-Engine, die auf OpenGL basiert, multithreaded ist, und die für das Abbilden eines Rendertrees optimiert ist anstatt einen General-Purpose-Ansatz zu verfolgen. Und auf Firefox Preview wiederum basiert der neue GeckoView, der es anderen Produkten leicht macht, Gecko als Web-Engine zu integrieren.

Firefox + Puppeteer

Version 3 von Puppeteer bringt eine experimentelle Unterstützung von Firefox mit. Wir sprechen darüber, dass Puppeteer eigentlich das Chrome Debugging Protocol (CDP) nutzt und Firefox für die Anbindung an Puppeteer vom Mozilla-Team um CDP-Fähigkeiten erweitert wurde (und weiterhin wird). Wir sprechen außerdem kurz über Playwright, hinter dem auch viele der Puppeteer-Leute stecken, das eigens dafür gepatchedte Firefoxe und WebKits mitliefert. Und schließlich sprechen wir über CDP selbst, über die Frage, warum die Debugging Protokolle der verschiedenen Browser nicht kompatibel gemacht werden, sowie über die Unterschiede von CDP und der standardisierten Web Driver Schnittstelle, und wie Web Driver 3 irgendwann alles besser machen wird.

Firefox Profiler

Intern hat Mozilla lange einen sehr mächtigen Profiler genutzt, um seine Fortschritte beim „Quantum“-Umbau besser messen zu können. Dieser steht uns jetzt allen zur Verfügung, und zwar nicht nur in Form eines mitgelieferten Devtools-Panels, sondern als externe Web-basierte App, die lokale Messungen anzeigt. Kollaborativ kann man die dann auch hochladen und mit anderen Entwickler per URL teilen und vergleichen. Die typischen Flame Charts und Call Trees lösen alles bis ins kleinste Detail auf und für die Abenteuerlichen können auch Firefox-Internals angezeigt werden.

Keine Schaunotizen

Firefox Developer Tools – Community & Documentation

Wer Lust bekommen hat, das Devtools-Team zu unterstützen und vielleicht sogar neue Features zu implementieren, findet hier alle relevanten Ressourcen für einen gelungenen Einstieg.

„Developer in the Middle“ (DITM) Erweiterung für Firefox

Diese Erweiterung ermöglicht es, Ressourcen einer Seite on-the-fly durch lokal oder anderswo liegende zu ersetzen.

CSS Grid Video Tutorial

Das beste Videotraining, um CSS Grid lernen, vom grandiosen Wes Bos.

Flexbox Zombies

Spielerisch CSS Flexbox lernen? Das geht! Dave Geddes hat nämlich ein Flexbox-Lernspiel gebaut.