Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

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:

Deel je ideeën

Deel je ideeën

Vraag voor nieuwe functies in de developer tools of stem op ideeën van andere ontwikkelaars.

Creëren

Authoring tools voor websites en web apps.

Scratchpad
Een text editor ingebouwd in Firefox die jou JavaScript code laat schrijven en executeren.
Style Editor
Bekijk en bewerk CSS styles voor de huidige pagina.
Shader Editor
Bekijk en bewerk de vertex en fragment shaders gebruikt door WebGL.
Web Audio Editor
Bekijk de grafiek van audio knooppunten in een audio context, en wijzig hun parameters.

Onderzoeken en debuggen

Bekijk, onderzoek en debug websites en web apps.

Web Console
Zie berichten logboek van een webpagina, en heb directeinteractie met de pagina via JavaScript.
Page Inspector
Bekijk en wijzig de pagina in HTML and CSS.
JavaScript Debugger
Stop, stap-voor-stap, onderzoek en wijzig JavaScript code dat draait in een pagina.
Network Monitor
Zie de netwerkaanvragen wanneer een pagina is geladen.
Storage Inspector
Inspecteer cookies, lokale opslag, indexedDB en sessie opslag aanwezig in een pagina.
Developer Toolbar
Een command-line interface voor de developer tools.
3D View
3D visualisatie van de pagina.
Eyedropper
Selecteer een kleur van de pagina.
Working with iframes
Hoe moet je een bepaalde iframe aanpakken?

Mobiel

Tools voor mobiele ontwikkelingen.

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

Prestaties

Diagnosticeer en repareer prestatieproblemen.

Performance tool
Analiseer uw site's algemene responsiviteit, JavaScript en lay-out vertoning.
Frame rate graph
Zie de framesnelheid voor uw site.
Waterfall
Ontdek hoe de browser reageert wanneer uw site draait.
Call Tree
Ontdek waar uw JavaScript code zijn tijd gebruikt.
Flame Chart
See which functions are on the stack over the course of a performance profile.
Paint Flashing Tool
Highlights the parts of the page that are repainted in response to events.
Reflow Event Logging
See reflow events in the web console.
Network Performance
See how long the parts of your site take to load.

 

 

Debugging the browser

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

Browser Console
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

Extending the devtools

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

Add a new panel to the devtools
Write an add-on that adds a new panel to the Toolbox.
Remote Debugging Protocol
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor
A code editor built into Firefox that can be embedded in your add-on.
The Debugger Interface
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
Web Console custom output
How to extend and customize the output of the Web Console and the Browser Console.
Example devtools add-ons
Use these examples to understand how to implement a devtools add-on.

More resources

This section lists resources which are not currently maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the “Web Development” category on addons.mozilla.org.

Firebug
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
DOM Inspector
Inspect, browse, and edit the DOM of web pages or XUL windows.
Web Developer
Adds a menu and a toolbar to the browser with various web developer tools.
Webmaker Tools
A set of tools developed by Mozilla, aimed at people getting started with Web development.
W3C Validators
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
JSHint
JavaScript code analysis tool.

Join the Developer tools community

Choose your preferred method for joining the discussion:

Documentlabels en -medewerkers

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