1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
---
title: Developer Tools
slug: Tools
tags:
- Handleiding
- Mozilla Ontwikkelaars
- Tools
- Webontwikkeling
- Webontwikkeling hulpmiddelen
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>
<div class="summary"><span class="seoSummary">Bekijk, bewerk, en debug HTML, CSS, en JavaScript via desktop en mobiel</span></div>
<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Installeer Firefox Developer Edition</a>
<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Wat is nieuw in Firefox Developer Edition?</h3>
<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> 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:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector#Editing_storage_items">Bewerk opgeslagen items met de Storage Inspector</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory/Tree_Map_view">Hierarchische visualisatie van geheugen gebruik</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Verander layout door elementen op pagina te verslepen</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">Bekijk details van HTTP verzoeken in het Web Console</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Vernieuwde animatie inspector voor Web Animations API</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Settings#Choose_DevTools_theme">FireBug thema</a></li>
</ul>
</div>
<div class="column-container zone-callout"><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></div>
<div class="column-container">
<div class="column-half">
<h2 id="Creating" name="Creating">Creëren</h2>
<p>Authoring tools voor websites en web apps.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt>
<dd>In Firefox ingebouwde text editor waarmee je JavaScript code schrijft en uitvoert.</dd>
<dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt>
<dd>Bekijk en bewerk CSS styles voor de huidige pagina.</dd>
<dt><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></dt>
<dd>Bekijk en bewerk de vertex en fragment shaders die door <a href="/en-US/docs/Web/WebGL">WebGL</a> gebruikt worden.</dd>
<dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
<dd>Bekijk de hierarchie van audio knooppunten in een audio context, en wijzig parameters.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Exploring" name="Exploring">Onderzoeken en debuggen</h2>
<p>Bekijk, onderzoek en debug websites en web apps.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Web_Console">Web Console</a></dt>
<dd>Zie logboekberichten van een webpagina en benader de pagina via JavaScript.</dd>
<dt><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></dt>
<dd>Bekijk en bewerk de HTML en CSS van een webpagina.</dd>
<dt><a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></dt>
<dd>Onderbreek, stap door de code, onderzoek en wijzig JavaScript code die in de pagina uitgevoerd wordt.</dd>
<dt><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></dt>
<dd>Zie de netwerkaanvragen van een pagina die geladen werd.</dd>
<dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
<dd>Inspecteer cookies, lokale opslag, indexedDB en sessie opslag van een pagina.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Tools/DOM_Inspector">DOM Inspector</a></dt>
<dd>Inspecteer de DOM properties en functies van een pagina.</dd>
<dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt>
<dd>Een command-line interface voor de developer tools.</dd>
<dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
<dd>Neem een kleur over van de pagina.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
<dd>Een dashboard om add-ons en workers te debuggen.</dd>
<dt><a href="/en-US/docs/Tools/Working_with_iframes">Working with iframes</a></dt>
<dd><span class="short_text" id="result_box" lang="nl"><span class="hps">Hoe moet je een bepaalde</span> <span class="hps">iframe</span> aanpakken?</span></dd>
</dl>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Mobile" name="Mobile">Mobiel</h2>
<p>Tools voor mobiele ontwikkelingen.</p>
<dl>
<dt><a href="/en-us/docs/Tools/Responsive_Design_View">Responsive Design Mode</a></dt>
<dd>Bekijk hoe uw website of app eruit zal zien op verschillende schermgroottes zonder de grootte van het browservenster te wijzigen.</dd>
<dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a></dt>
<dd>App Manager is vervangen door <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd>
<dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt>
<dd>Bouw, bewerk, start en debug web apps via de <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> of op een fysiek Firefox OS apparaat. WebIDE is de vervanger van App Manager, beschikbaar vanaf Firefox 33.</dd>
<dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
<dd>Start en debug uw Firefox OS app op de desktop zonder een fysiek Firefox OS apparaat.</dd>
<dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt>
<dd>Koppel de developer tools aan Firefox voor Android.</dd>
<dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt>
<dd>Voor Desktop Firefox 36+ / Android Firefox 35+ is <span class="short_text" id="result_box" lang="nl"><span class="hps">er </span><span class="hps">een eenvoudiger</span> <span class="hps">proces</span><span>.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
<dd>Koppel de developer tools aan Chrome op Android en Safari op iOS</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Performance" name="Performance">Prestaties</h2>
<p>Traceer en repareer prestatieproblemen.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt>
<dd>Analiseerde algemene <span class="short_text" id="result_box" lang="nl"><span class="hps">responsiviteit</span></span>, JavaScript en layout prestaties van de website.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory">Geheugen</a></dt>
<dd>Onderzoek welke objecten geheugen gebruiken.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt>
<dd>Zie de frame snelheid van de website.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
<dd>Ontdek hoe de browser reageert wanneer de website getoond wordt.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
<dd>Ontdek waar JavaScript code tijd consumeert.</dd>
</dl>
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
<dd>Ontdek kritieke functies na afloop van een profiling sessie.</dd>
<dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
<dd>Benadrukt de onderdelen van een pagina die opnieuw getekend worden in reactie op events.</dd>
<dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
<dd>Bekijk reflow events in het web console.</dd>
<dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
<dd>Bekijk de download tijd van elke verzoek tijdens het laden van de website.</dd>
</dl>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser">Debugging the browser</h2>
<p>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.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
<dd>Bekijk de berichten die door de browser en add-ons gegenereerd zijn, en draai JavaScript code in de context van de browser.</dd>
<dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
<dd>Koppel de Developer Tools aan de browser.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2>
<p>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.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Voeg een panel toe aan de devtools</a></dt>
<dd>Schrijf een add-on dat een panel toevoegd aan de Toolbox.</dd>
<dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
<dd>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.</dd>
<dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt>
<dd>Een in FireFox ingebouwde code editor die je beschikbaar kunt stellen via je add-on.</dd>
<dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
<dd>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.</dd>
<dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Aangepaste Web Console uitvoer</a></dt>
<dd>Mogelijkheid om de uitvoer van de <a href="/en-US/docs/Tools/Web_Console">Web Console</a> en de <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> uit te breiden en aan te passen.</dd>
<dt><a href="/en-US/docs/Tools/Example_add-ons">Voorbeeld devtools add-ons</a></dt>
<dd>Gebruik deze voorbeelden om zelf een devtools add-on te bouwen.</dd>
</dl>
</div>
</div>
<hr>
<h2 id="More_resources" name="More_resources">Meer informatie</h2>
<p>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 <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">“Web Development” rubriek over addons.mozilla.org</a>.</p>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
<dd>Een zeer populaire en krachtige web development tool inclusief een JavaScript debugger, HTML and CSS viewer en editor en network monitor.</dd>
<dt><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt>
<dd>Inspecteer, bekijk en bewerk de DOM van webpagina's of XUL schermen.</dd>
<dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
<dd>Voegt een menu en toolbar met verschillende web developer tools toe aan de browser.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
<dd>Een door Mozilla ontwikkelde toolset, gericht op beginnende web ontwikkelaars.</dd>
<dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
<dd>De W3C website bevat een aantal tools om de geldigheid van je website te valideren, inclusief de bijhorende <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> en <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
<dt><a href="http://www.jshint.com/">JSHint</a></dt>
<dd>JavaScript code analyse tool.</dd>
</dl>
</div>
</div>
|
