Mozilla toont nieuwe developertools voor Firefox

Mozilla heeft een aantal in aanbouw zijnde devtools voor Firefox getoond, die deels op basis van verzoeken van externe webdevelopers zijn ontwikkeld. De ontwikkeltools bieden onder andere een network panel en in-browser editing.

Mozilla-developer Paul Rouget heeft op zijn blog de eerste resultaten laten zien van een aantal nieuwe en verbeterde developertools binnen Firefox. Het Firefox DevTools-team heeft de tools ontwikkeld nadat het via Twitter en HackerNews om input had gevraagd.

Volgens Rouget betrof het meest gehoorde verzoek de wens om het voor ontwikkelaars eenvoudiger te maken de browser nauw te laten aansluiten op externe editors en ide's. Daarbij worden in proof-of-concepts twee wegen bewandeld. De eerste biedt de mogelijkheid om een populaire editor als Sublime Text te koppelen aan Firefox, waarbij gebruik wordt gemaakt van de scripttaal Python. De tweede benadering is in Firefox zelf een volwaardige, al dan niet file-based, editor opnemen. Het DevTools-team zegt nog geen uitgesproken voorkeur te hebben en beide concepten nog te zullen doorontwikkelen.

Mozilla wil in zijn ontwikkeltools voor Firefox ook een network panel inbouwen. Deze tool geeft onder andere via een tijdlijn inzicht in de tijd die een browser nodig heeft voor de verwerking van bepaalde objecten. Andere verbeteringen waarnaar het DevTeam kijkt, zijn het bieden van een andere lay-out om zo mogelijk conflicten tussen Firebug en de geïntegreerde developertools te vermijden, en het plaatsen van de devtools aan de rechterzijde in plaats van onder aan het venster. Ook wordt gekeken naar ondersteuning voor CoffeeScript en LiveScript, controls voor de css-animatieklok en repaint view.

Reacties (33)

[Baggeraar]

Heel leuk allemaal, maar welke toevoeging geeft dit op bijvoorbeeld de Firebug add-on?
Natuurlijk top dat ze het erin willen stoppen, maar waarom zelf 'het wiel opnieuw uitvinden' ipv een soort samenwerking met bijvoorbeeld de firebug ontwikkelaars? Lijkt me dat ze er beide op vooruitgaan, en firefox kan hun prioriteiten ergens anders leggen.

[Joolee]

Dat vroeg ik mij ook al af. Kan het dev team zich niet beter gaan richten op het opslitsen van tabbladen in verschillende processen en sandboxen?

[rctgamer3]

Kort antwoord: Nee.
Lang antwoord: Firefox =/= Chrome. Chrome's memory usage rijst hier de pan uit, dus nee, liever niet. (Ik bedoel maar, ik heb hier atm 50 tabs open in Aurora en zo'n 20 in Chrome en Chrome heeft meer memory usage dan Firefox). Zelfs al zouden ze het overwegen dan zouden er godsgruwelijk veel onderdelen van Firefox (XUL) moeten worden herschreven.

[MBV]

Nee, dit zijn andere mensen die andere specialismen hebben. Opsplitsen van tabbladen zit heel diep in de kern, terwijl dit cosmetische dingetjes dicht bij de UI zijn.

[Mavamaarten]

Dat het geen add-on is? Ik ben persoonlijk ook firebug gewoon en vind deze bijvoorbeeld handiger werken dan de concurrentie, maar het feit dat het standaard in een browser is ingebouwd is zeer handig.

[mcDavid]

Laat ze dan Firebug gewoon opnemen in de default build. Firebug werkt echt een stuk relaxter dan de devtools van firefox (of welke browser dan ook).

[Niosus]

Ik vind de default Chrome dev tools echt veel beter werker dan Firebug hoor. Is eigenlijk de voornaamste reden waarom ik tegenwoordig eerst op Chrome develop ipv Firefox. Ik zeg niet dat het op alle vlakken beter is, maar ik vind de Chrome tools beter werken voor mij.

Concurrentie is trouwens absoluut niet slecht. Als de standaard tools in de buurt komen van Firebug of het zelfs overtreffen, zullen de Firebug developers hun best moeten doen om hun bestaansrecht te verzekeren. Dat zorgt voor innovatie waardoor iedereen er gewoon beter van wordt.

Ik kijk alvast uit naar wanneer ik dit eens kan uitproberen. Hoe meer goede tools ik tot mijn beschikking heb, hoe makkelijker mijn leven wordt.

[wizekid]

Helemaal mee eens, de javascript debugging in Chrome werkt velen malen beter dan in Firefox + FireBug. Firebug is verouderd en werkt nogal sloom, de native tools hebben meestal diepere abstractie dan addons van derde partijen. Ik gebruik voor firefox ook altijd de native en niet dat oude beestje.

Vergeet ook Opera Dragonfly niet, werkt ook verschrikkelijk goed! Ikzelf gebruik Chrome altijd voor Javascript-, Firefox voor Responsive-, en Opera voor CSS-Debugging.

[Martinspire]

Ik gebruik eigenlijk alleen Chrome tijdens de ontwikkeling. Ik hou wel rekening met de standaarden en wat wel en niet ondersteund wordt, maar Chrome is wat mij betreft ook voor CSS erg geschikt.

Meestal zet ik de structuur in HTML op en ga ik vervolgens in Chrome met CSS werken. Het enige wat ik nog mis is om er een css bestand/code mee te genereren, maar vooralsnog vind ik het erg handig. Vooral het aanpassen van pixelgroottes of wijzigen van css/javascript animaties vind ik er erg handig mee.

Zo te merken probeert Mozilla nu in ieder geval Firebug te evenaren (en hopelijk wat te verbeteren), maar omdat ik zelf al Chrome helemaal prima vind werken, ga ik de overstap niet maken. Zelfs de developertools van IE zijn tegenwoordig beter dan Firefox eigen developertools.

[Ramon]

Firebug is sloom. De integrated dev tools van Firefox zijn een stuk sneller. Als ze die net zo fijn maken als firebug is dat een win voor developers.

[sfranken]

Er werkt niks zo fijn als de dev tools (F12) van Chrome/Chromium vind ik. Daar zit alles in wat ik nodig heb,inline HTML en CSS editing bijvoorbeeld.

[Bosmonster]

Tools als een goede Repaint view is waar ikzelf al heel lang op zit te wachten en die praktisch niet door externe developers zijn te implementeren, maar je wel heel erg helpen met performance optimalisatie voor complexere sites.

[NicoJuicy]

Euh, ik heb al gezien wat dit betekende en het is behoorlijk simpel.

Aanpassing in Sublime text van html wordt onmiddellijk getoond in Firefox (zonder auto-refresh en dergelijke "hulp" tools).

[Verwijderd]

Helaas onnodig door Firebug. Wat ik liever zou zien is een volledige firebug integratie binnen chrome sinds Firefox niet meer kan bijhouden qua snelheid.

En kom aub niet aanzetten met de development tools binnen chrome. Vind die persoonlijk enorm onhandig en omslachtig werken, maar dat zal meer liggen aan het feit dat ik firebug volledig gewend ben.

[Mitsuko]

Wat ik liever zou zien is een volledige firebug integratie binnen chrome sinds Firefox niet meer kan bijhouden qua snelheid.

Dat valt wel mee hoor. Het grootste voordeel dat Chrome op het moment nog heeft is Generational Garbage Collection (GGC), en dat is al minder essentieel geworden sinds Firefox Incremental GC heeft (waardoor het in veel situaties niet alles in één keer hoeft te doen). Op de bekende benchmarks zitten Chrome en Firefox momenteel heel dicht bij elkaar (zie AWFY).

Overigens wordt in de blog post waarnaar dit artikel verwijst ook betere integratie met Firebug genoemd. Dan voornamelijk zodat Firebug en de ingebouwde tools elkaar niet in de weg zitten.

[Reactie gewijzigd door Mitsuko op 23 juli 2024 19:15]

[BramT]

Als je puur en alleen naar de browser kijkt is dat waar, als je echter Firebug actief open hebt staan merk je dat Fx aanzienlijk trager wordt. De 'native' oplossing van Chrome is dan stukken fijner.

Wat extra/meer/betere 'native' tools in Fx zijn absoluut welkom.

[R4gnax]

Als je puur en alleen naar de browser kijkt is dat waar, als je echter Firebug actief open hebt staan merk je dat Fx aanzienlijk trager wordt. De 'native' oplossing van Chrome is dan stukken fijner.

Wat extra/meer/betere 'native' tools in Fx zijn absoluut welkom.

V.z.i.w. is Firebug gebaseerd op de oude JavaScript debugging interface voor Mozilla's familie van '--Monkey' JS runtimes. Als deze aangezet wordt, worden er geloof ik een aantal redelijk significante optimalisaties aan de JS runtime automatisch uitgezet om e.e.a. compatible met elkaar te houden. Zet alle panelen in Firebug die de JS debugger nodig hebben maar eens uit en probeer het dan eens; bijna even snel als zonder Firebug actief.

Firebug moet gewoon gaan migreren naar de nieuwe debugging interfaces waar de 'ingebouwde' tools (die overigens ook gewoon in JS geschreven zijn, evenals de nieuwe PDF viewer...) en dan is alles gewoon altijd snel.

[Reactie gewijzigd door R4gnax op 23 juli 2024 19:15]

[Mitsuko]

Ah, je bedoelde met Firebug actief. In dat geval heb ik goed nieuws: dit zou vanaf vandaag (in de Nightly) beter moeten worden. Bug 848665 is namelijk net geland - dat zou de overhead bij het gebruik van debugger-functionaliteit in Firebug sterk moeten verminderen.

[markusclaas]

De bug is geplet of een fix ervoor is geland..

[Qws]

Ik heb nooit met Firebug gewerkt, maar de developer tools binnen Chrome voldoenen mij eisen.

Maar een volledige Firebug intergratie in Chrome zal er denk ik niet komen, aangezien die van Chrome zijn ding doet.

[markusclaas]

Goed bedoeld, maar ze lopen vooral Chrome achterna welke echt enorm goede developertools in zijn browser heeft.

[Verwijderd]

In dat geval lopen ze voornamelijk WebKit achterna, want daar zat de eerste versie in 2006 al in:

https://www.webkit.org/bl...ducing-the-web-inspector/

Deze versie is voornamelijk door Apple developers gebouwd en volgens mij tot aan 2009. Het lijkt er nu op dat vooral Google de kar aan het trekken is voor de inspector.

[Aham brahmasmi]

In dat geval lopen ze voornamelijk WebKit achterna, want daar zat de eerste versie in 2006 al in:

https://www.webkit.org/bl...ducing-the-web-inspector/

Firebug bestaat ook al sinds begin 2006.

[rctgamer3]

Als je DOMi (DOM Inspector) ook onder DevTools kunt categoriseren had Mozilla in ~2003 al een redelijke goede web inspector.
https://developer.mozilla.org/en-US/docs/DOM_Inspector

[Bosmonster]

Je bedoelt dat Chrome vooral Firebug en de Web Developer toolbar van Firefox achterna loopt? Die bestonden namelijk al voordat Chrome zelfs bestond...

Het is pas sinds kort dat de developer tools van Chrome zich enigszins hieraan kunnen meten.

[Reactie gewijzigd door Bosmonster op 23 juli 2024 19:15]

[Martinspire]

De devtools van Chrome zijn vrijwel gelijk aan Firebug. Maar Firebug is een addon en bij Chrome zit het er native in. Dus kun je wel degelijk stellen dat Firefox achter loopt op Chrome, maar het met addons prima op te lossen is.

En dat "sinds kort" is ook erg relatief, ik werk er al lange tijd mee. Ik kan zo even geen duidelijke bron vinden, maar het zit er in ieder geval al vanaf 2010 in.

[Cor453]

Firebug lijkt in gebruik heel erg op de Chrome tools. Firebug is dan ook al sinds jaar en dag (langer dan Chrome denk ik?) verkrijgbaar in de add-ons firefox store.

[Boborc]

Kan je onderbouwen? Ik hoor dit enorm veel van Chrome aanhangers, maar ik heb tot nu toe elke developper functie waarvan gezegd werd 'dit is enkel Chrome' ook gevonden in Firefox.

[PeterPanda]

Toch goed dat Mozilla luistert naar de wensen van developers. Zeker omdat er steeds meer concurrenten komen moet mozilla wel moeite doen om hun browser intressant te houden.

[Chilly_Willy]

Sublime Text is een heerlijke editor, als die eraan gekoppeld kan worden moedig ik dat alleen maar aan.

[rctgamer3]

Ook wordt gekeken naar ondersteuning voor CoffeeScript en LiveScript

Volgens mij ondersteunt JSTerm (de add-on versie van de toekomstige DevTools feature (ook) gemaakt door Paul Rouget) dit nu al:
AMO:
https://addons.mozilla.or...ascript-terminal/versions
GitHub:
https://github.com/paulrouget/firefox-jsterm/
Groot voordeel van JSTerm is dat je niet de Nightly build van Firefox hoeft gebruiken en hij gewoon in Aurora/Beta (en de huidige stable release) zou moeten werken.

[ArmEagle]

Wat mij hieraan het meeste tegen staat is dat er iets aan de browser wordt toegevoegd waar de meeste mensen nooit gebruik van zullen maken. Maak dan betere 'hooks' en maak een officiele extensie die dit implementeert.