Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Aan deze vertaling wordt gewerkt.

Bekijk, bewerk, en debug HTML, CSS, en JavaScript via desktop en mobiel
Installeer Firefox Developer Edition

Wat is nieuw in Firefox Developer Edition?

Firefox Developer Edition is een versie van Firefox speciaal voor ontwikkelaars, met de laatste Firefox functies en experimentele developer tools. De huidige Developer Edition heeft de volgende updates in de developer tools:

 

Creëren

Authoring tools voor websites en web apps.

Scratchpad
In Firefox ingebouwde text editor waarmee je JavaScript code schrijft en uitvoert.
Style Editor
Bekijk en bewerk CSS styles voor de huidige pagina.
Shader Editor
Bekijk en bewerk de vertex en fragment shaders die door WebGL gebruikt worden.
Web Audio Editor
Bekijk de hierarchie van audio knooppunten in een audio context, en wijzig parameters.

Onderzoeken en debuggen

Bekijk, onderzoek en debug websites en web apps.

Web Console
Zie logboekberichten van een webpagina en benader de pagina via JavaScript.
Page Inspector
Bekijk en bewerk de HTML en CSS van een webpagina.
JavaScript Debugger
Onderbreek, stap door de code, onderzoek en wijzig  JavaScript code die in de pagina uitgevoerd wordt.
Network Monitor
Zie de netwerkaanvragen van een pagina die geladen werd.
Storage Inspector
Inspecteer cookies, lokale opslag, indexedDB en sessie opslag van een pagina.
DOM Inspector
Inspecteer de DOM properties en functies van een pagina.
Developer Toolbar
Een command-line interface voor de developer tools.
Eyedropper
Neem een kleur over van de pagina.
about:debugging
Een dashboard om add-ons en workers te debuggen.
Working with iframes
Hoe moet je een bepaalde iframe aanpakken?


Mobiel

Tools voor mobiele ontwikkelingen.

Responsive Design Mode
Bekijk hoe uw website of app eruit zal zien op verschillende schermgroottes zonder de grootte van het browservenster te wijzigen.
App Manager
App Manager is vervangen door WebIDE.
WebIDE
Bouw, bewerk, start en debug web apps via de Firefox OS Simulator of op een fysiek Firefox OS apparaat. WebIDE is de vervanger van App Manager, beschikbaar vanaf Firefox 33.
Firefox OS Simulator
Start en debug uw Firefox OS app op de desktop zonder een fysiek Firefox OS apparaat.
Debugging on Firefox for Android
Koppel de developer tools aan Firefox voor Android.
Debugging Firefox for Android with WebIDE
Voor Desktop Firefox 36+ / Android Firefox 35+ is er een eenvoudiger proces.
Valence
Koppel de developer tools aan Chrome op Android en Safari op iOS

Prestaties

Traceer en repareer prestatieproblemen.

Performance tool
Analiseerde algemene responsiviteit, JavaScript en layout prestaties van de website.
Geheugen
Onderzoek welke objecten geheugen gebruiken.
Frame rate graph
Zie de frame snelheid van de website.
Waterfall
Ontdek hoe de browser reageert wanneer de website getoond wordt.
Call Tree
Ontdek waar JavaScript code tijd consumeert.
Flame Chart
Ontdek kritieke functies na afloop van een profiling sessie.
Paint Flashing Tool
Benadrukt de onderdelen van een pagina die opnieuw getekend worden in reactie op events.
Reflow Event Logging
Bekijk reflow events in het web console.
Network Performance
Bekijk de download tijd van elke verzoek tijdens het laden van de website.

 

Debugging the browser

De developer tools worden standaard aan een web pagina of web app gekoppeld. Je kunt ze echter ook aan de browser als geheel koppelen. Dit is zinvol voor browser en add-on development.

Browser Console
Bekijk de berichten die door de browser en add-ons gegenereerd zijn, en draai JavaScript code in de context van de browser.
Browser Toolbox
Koppel de Developer Tools aan de browser.

Extending the devtools

De developer tools zijn ontworpen met het oog op uitbreidbaarheid. Firefox add-ons kunnen de developer tools benaderen, functionaliteit uitbreiden en toevoegen. Via het remote debugging protocol kun je je eigen debugging clients and servers bouwen, waarmee je het mogelijk maakt om websites met je eigen tools te debuggen of om andere doelen te debuggen met Firefox tools.

Voeg een panel toe aan de devtools
Schrijf een add-on dat een panel toevoegd aan de Toolbox.
Remote Debugging Protocol
Het protocol wat gebruikt wordt om de Firefox Developer Tools te verbinden met een debug doel zoals een Firefox instantie of een Firefox OS apparaat.
Source Editor
Een in FireFox ingebouwde code editor die je beschikbaar kunt stellen via je add-on.
The Debugger Interface
Een JavaScript API waarmee je de uitvoering van andere JavaScript code kunt observeren.De debugger in de Firefox Developer Tools is gebouwd met deze API.
Aangepaste Web Console uitvoer
Mogelijkheid om de uitvoer van de Web Console en de Browser Console uit te breiden en aan te passen.
Voorbeeld devtools add-ons
Gebruik deze voorbeelden om zelf een devtools add-on te bouwen.


Meer informatie

Deze sectie somt bronnen op die momenteel niet door Mozilla's developer tools team onderhouden worden, maar die volop gebruikt worden door web developers. We hebben enkele Firefox add-ons toegevoegd aan de lijst, maar voor een complete lijst zie “Web Development” rubriek over addons.mozilla.org.

Firebug
Een zeer populaire en krachtige web development tool inclusief een JavaScript debugger, HTML and CSS viewer en editor en network monitor.
DOM Inspector
Inspecteer, bekijk en bewerk de DOM van webpagina's of XUL schermen.
Web Developer
Voegt een menu en toolbar met verschillende web developer tools toe aan de browser.
Webmaker Tools
Een door Mozilla ontwikkelde toolset, gericht op beginnende web ontwikkelaars.
W3C Validators
De W3C website bevat een aantal tools om de geldigheid van je website te valideren, inclusief de bijhorende HTML en CSS.
JSHint
JavaScript code analyse tool.

Join the Developer tools community

Choose your preferred method for joining the discussion:

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: theo-albers, Volluta, Maffie, vanimme, Dwoenykoers13, teoli, Anaxtaas, edith5, Gijsmma, babacanreis, wbamberg
 Laatst bijgewerkt door: theo-albers,