Revision 432: Firefox und seine Devtools

Published: July 7, 2020, 7:15 a.m.

Lange geplant, jetzt in die Tat umgesetzt, haben wir diese Revision Harald\nKirschner zu Gast, um \xfcber den gesamten Firefox Cosmos zu sprechen. Harald ist\naktuell nicht nur Produkt Manager f\xfcr die Firefox Developer Tools und\nPerformance Tooling zust\xe4ndig, sondern hat zuvor ma\xdfgeblich am Projekt \u201eQuantum\u201c\nmitgewirkt, bei dem Firefox\u2018 Infrastruktur nach und nach durch modernere und\nperformantere Bausteine ersetzt wurde.\n\n\n[00:00:33] SCHAUNOTIZEN\n\nDER NEXT-GEN-FIREFOX F\xdcR ANDROID: FIREFOX PREVIEW\n\n\u201eQuantum\u201c ist ein gutes Stichwort, denn dieses vor einem halben Jahrzehnt\nbegonnene Projekt hat \u201eFirefox Preview\u201c (interner Projektname \u201eFenix\u201c) erst\nm\xf6glich gemacht: Einen mobilen Browser, der ganz ohne Tricksen und Abk\xfcrzen\nwahnsinnig schnell ist. Ein wesentlicher Bestandteil von \u201eQuantum\u201c, der das\nm\xf6glich gemacht hat, ist \u201eWeb Render\u201c, eine neugedachte und f\xfcrs Web optimierte\nRender-Engine, die auf OpenGL basiert, multithreaded ist, und die f\xfcr das\nAbbilden eines Rendertrees optimiert ist anstatt einen General-Purpose-Ansatz zu\nverfolgen. Und auf Firefox Preview wiederum basiert der neue GeckoView, der es\nanderen Produkten leicht macht, Gecko als Web-Engine zu integrieren.\n\nFIREFOX + PUPPETEER\n\nVersion 3 von Puppeteer bringt eine experimentelle Unterst\xfctzung von Firefox\nmit. Wir sprechen dar\xfcber, dass Puppeteer eigentlich das Chrome Debugging\nProtocol (CDP) nutzt und Firefox f\xfcr die Anbindung an Puppeteer vom Mozilla-Team\num CDP-F\xe4higkeiten erweitert wurde (und weiterhin wird). Wir sprechen au\xdferdem\nkurz \xfcber Playwright, hinter dem auch viele der Puppeteer-Leute stecken, das\neigens daf\xfcr gepatchedte Firefoxe und WebKits mitliefert. Und schlie\xdflich\nsprechen wir \xfcber CDP selbst, \xfcber die Frage, warum die Debugging Protokolle der\nverschiedenen Browser nicht kompatibel gemacht werden, sowie \xfcber die\nUnterschiede von CDP und der standardisierten Web Driver Schnittstelle, und wie\nWeb Driver 3 irgendwann alles besser machen wird.\n\nFIREFOX PROFILER\n\nIntern hat Mozilla lange einen sehr m\xe4chtigen Profiler genutzt, um seine\nFortschritte beim \u201eQuantum\u201c-Umbau besser messen zu k\xf6nnen. Dieser steht uns\njetzt allen zur Verf\xfcgung, und zwar nicht nur in Form eines mitgelieferten\nDevtools-Panels, sondern als externe Web-basierte App, die lokale Messungen\nanzeigt. Kollaborativ kann man die dann auch hochladen und mit anderen\nEntwickler per URL teilen und vergleichen. Die typischen Flame Charts und Call\nTrees l\xf6sen alles bis ins kleinste Detail auf und f\xfcr die Abenteuerlichen k\xf6nnen\nauch Firefox-Internals angezeigt werden.\n\n\nKEINE SCHAUNOTIZEN\n\nFIREFOX DEVELOPER TOOLS \u2013 COMMUNITY & DOCUMENTATION\n\nWer Lust bekommen hat, das Devtools-Team zu unterst\xfctzen und vielleicht sogar\nneue Features zu implementieren, findet hier alle relevanten Ressourcen f\xfcr\neinen gelungenen Einstieg.\n\n\u201eDEVELOPER IN THE MIDDLE\u201c (DITM) ERWEITERUNG F\xdcR FIREFOX\n\nDiese Erweiterung erm\xf6glicht es, Ressourcen einer Seite on-the-fly durch lokal\noder anderswo liegende zu ersetzen.\n\nCSS GRID VIDEO TUTORIAL\n\nDas beste Videotraining, um CSS Grid lernen, vom grandiosen Wes Bos.\n\nFLEXBOX ZOMBIES\n\nSpielerisch CSS Flexbox lernen? Das geht! Dave Geddes hat n\xe4mlich ein\nFlexbox-Lernspiel gebaut.