Firefox Developer Edition is een nieuwe versie van de populaire browser Mozilla, gericht op webontwikkelaars.

In de afgelopen jaren hebben de meest populaire browsers ingebouwde tools waarmee we de broncode van webpagina's kunnen bekijken en bewerken. Deze tool is zeer nuttig voor webontwikkelaars omdat ze hierdoor fouten gemakkelijker kunnen lokaliseren, de webpagina on-the-fly kunnen wijzigen en onmiddellijke resultaten van de wijzigingen kunnen zien.

Firefox Developer Edition is een standaard webbrowser, zodat we op de gebruikelijke manier op internet kunnen surfen. Toch heeft het de eigenaardigheid dat het veel tools bevat die het werk van webontwikkelaars vergemakkelijken. Enkele van deze tools zijn:

• Valence : deze tool stelt ons in staat om verschillende browsers op verschillende apparaten te debuggen. Bijvoorbeeld, we kunnen een webpagina debuggen op Safari op iOS of Chrome op Android. Hierdoor kunnen we het mobiele apparaat verbinden met de computer en wijzigingen aanbrengen in de pagina-broncode met behulp van Firefox. Deze wijzigingen worden weerspiegeld in de verbonden mobiele apparaten. Deze tool bevindt zich in een testfase, dus het wordt niet aanbevolen om er consistent mee te werken.
• Responsive design : dankzij deze weergave is het niet nodig om een plug-in te installeren om te controleren hoe de pagina eruitziet op vele verschillende resoluties. Hierdoor kunnen we zien of het responsive design perfect past bij het maximale aantal mogelijke resoluties.
• Page Inspector : dit paneel toont informatie over de elementen die de webpagina vormen. We kunnen de HTML- en CSS-code zien en wijzigen on-the-fly. Als we bijvoorbeeld een CSS-klasse selecteren, zien we op de webpagina alle elementen die gebruik maken van die CSS-klasse gemarkeerd. Hetzelfde gebeurt met de HTML-code. Als we het "Inspector Page" paneel openen en de cursor bovenop een HTML-element plaatsen, wordt dit element gemarkeerd op het ontwerp van de pagina.
• Web Console : dit paneel toont de fouten- en waarschuwingsberichten die gegenereerd worden door de webpagina die we bezoeken en organiseert ze in categorieën zodat we de bijhorende fouten gerelateerd aan CSS, Javascript, Netwerk, enzovoort kunnen zien. We kunnen ook interageren met de elementen van de webpagina door Javascript-code in de console te typen. We kunnen de methode van een object bellen of jQuery gebruiken om een reeks items op te sommen. Alles wat we kunnen doen met Javascript kan rechtstreeks in de "Web Console" worden uitgevoerd.
• Network Monitor : hier kunnen we alle verzoeken zien die door een webpagina worden uitgevoerd en de headers van dezelfde verkennen. Deze weergave is zeer nuttig om precies te weten te komen hoeveel externe elementen een webpagina laadt en of het nodig is om het aantal elementen te verminderen. We kunnen de verzoeken filteren op type: HTML, CSS, JS, Afbeelding, Bronnen, Multimedia en andere.

Dit zijn slechts enkele functies die deze nieuwe versie van de Firefox-browser presenteert. Veel webontwikkelaars zullen zeker blij zijn met deze versie en zullen van Firefox Developer Edition hun standaard browser maken.