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
211
212
213
|
---
title: Firefox Developer Tools
slug: Tools
tags:
- Developing Mozilla
- Guide
- NeedsTranslation
- Tools
- TopicStub
- Web Development
- 'Web Development:Tools'
- 'l10n:priority'
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>
<div class="summary"><span id="result_box" lang="ca"><span>Examinar,</span> <span>editar i</span> <span>depurar</span> <span>HTML</span><span>, CSS</span> <span>i JavaScript</span> <span>a l'escriptori</span> <span>i</span> <span>al mòbil</span></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;">Instal.lar Firefox Developer Edition</a>
<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F"><span class="short_text" id="result_box" lang="ca"><span>Què hi ha de</span> <span>nou</span> <span>a Firefox</span> <span>Developer</span> <span>Edition</span><span>?</span></span></h3>
<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> és una versió del Firefox adaptada per als desenvolupadors, que ofereix les últimes característiques de Firefox i eines de desenvolupament experimentals. L'actual versió de Developer Edition inclou aquestes actualitzacions en les eines de desenvolupament:</p>
<ul>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_40">Millores en la vista d'Animacions</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">Obtenir ajuda de MDN per a la sintaxi de les propietats CSS</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Filtres d'edició en el Inspector de Pàgina</a></li>
<li><a href="/en-US/docs/Tools/Web_Console#console_API_messages">La Consola Web mostra ara els misstages dels cooperants</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">Filtrar sol.licituds per URL en el Monitor de Xarxa</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor#Context_menu">Moltes noves opcions del menu contextual en el Monitor de Xarxa</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules">Regles de filtrat en el Inspector de Pàgina</a></li>
</ul>
</div>
<div class="column-container zone-callout"><a href="http://mzl.la/devtools" 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;">Comparteix les teves idees</a>
<h3 id="Share_your_ideas" name="Share_your_ideas">Comparteix les teves idees</h3>
<p>Demanar noves característiques en les eines de desenvolupament o votar per les idees d'altres desenvolupadors que estan demanant.</p>
</div>
<p><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>
<div class="column-container">
<div class="column-half">
<h2 id="Creating" name="Creating">Creació</h2>
<p>Eines d'autor per a llocs web i aplicacions web.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Scratchpad">Bloc de notes (Scratchpad)</a></dt>
<dd><span id="result_box" lang="ca"><span>Un editor</span> <span>de text</span> <span>integrat</span> <span>a Firefox</span> <span>que us</span> <span>permet escriure</span> <span>i executar</span> <span>JavaScript.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Style_Editor">Editor d'Estils</a></dt>
<dd>Veure i editar els estils CSS de la pàgina actual.</dd>
<dt><a href="/en-US/docs/Tools/Shader_Editor">Editor Shader</a></dt>
<dd>Veure i editar vèrtexs i ombrejadors de fragments utilitzats per <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
<dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
<dd><span id="result_box" lang="ca"><span>Examinar</span> <span>el gràfic</span> <span>de nodes</span> <span>d'àudio en un</span> <span>context</span> <span>d'àudio,</span> <span>i modificar els seus</span> <span>paràmetres.</span></span></dd>
</dl>
</div>
<div class="column-half">
<h2 id="Exploring" name="Exploring">Explorar i depurar</h2>
<p>Examinar, explorar i depura llocs web i aplicacions web.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Web_Console">Consola Web</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure els missatges</span> <span>registrats en una</span> <span>pàgina</span> <span>web</span><span>, i interactuar</span> <span>amb</span> <span>la pàgina</span> <span>utilitzant</span> <span>JavaScript.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Page_Inspector">Inspector de Pàgina</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure i</span> <span>modificar la pàgina</span> <span>HTML i</span> <span>CSS.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Debugger">Depurador JavaScript</a></dt>
<dd><span id="result_box" lang="ca"><span>Parar</span><span>, pas a</span> <span>pas</span><span>, examinar</span> <span>i modificar el</span> <span>codi JavaScript</span> <span>que s'executa en</span> <span>una pàgina.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Network_Monitor">Monitor de xarxa</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure</span> <span>les</span> <span>sol·licituds</span> <span>de xarxa</span> que es <span>realitzen</span> <span>quan</span> <span>es carrega</span> <span>una pàgina.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Storage_Inspector">Inspector d'emmagatzematge</a></dt>
<dd><span id="result_box" lang="ca"><span>Inspeccionar les</span> cookies<span>,</span> <span>emmagatzematge local</span><span>,</span> <span>IndexedDB</span> <span>i</span> <span>emmagatzematge</span> <span>de les</span> <span>sessions</span> <span>presents</span> <span>en una pàgina.</span></span></dd>
<dt><a href="/en-US/docs/Tools/GCLI">Barra d'eines de desnvolupador</a></dt>
<dd><span id="result_box" lang="ca"><span>Una interfície</span> <span>de línia d'ordres</span> <span>per a les eines</span> <span>de desenvolupament.</span></span></dd>
<dt><a href="/en-US/docs/Tools/3D_View">Vista 3D</a></dt>
<dd><span id="result_box" lang="ca"><span>Visualització en</span> <span>3D</span> <span>de la pàgina.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Eyedropper">Comptagotes</a></dt>
<dd><span id="result_box" lang="ca"><span>Tria un</span> <span>color</span> <span>de la pàgina.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Working_with_iframes">Treballar amb iframes</a></dt>
<dd><span id="result_box" lang="ca"><span>Com</span> apun<span>tar a un</span> <span>iframe</span> <span>en particular.</span></span></dd>
</dl>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Mobile" name="Mobile">Mòbil</h2>
<p><span id="result_box" lang="ca"><span>Eines</span> <span>per al</span> <span>desenvolupament</span> <span>mòbil.</span></span></p>
<dl>
<dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a></dt>
<dd><span id="result_box" lang="ca"><span>App</span> <span>Manager</span> <span>ha estat substituït</span> <span>per</span></span> <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd>
<dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt>
<dd>Substitueix <span lang="ca"> </span> <span id="result_box" lang="ca"><span>a App</span> <span>Manager</span></span><span lang="ca"><span>,</span> <span>disponible a</span> <span>Firefox</span> <span>33</span> <span>en endavant.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Simulador Firefox OS</a></dt>
<dd><span id="result_box" lang="ca"><span>Executar</span> <span>i depurar</span> <span>l'aplicació</span> <span>Firefox OS</span> <span>a l'escriptori,</span> <span>sense</span> <span>necessitat</span> <span>d'un veritable</span> <span>dispositiu de</span> <span>Firefox</span> <span>OS.</span></span></dd>
<dt><a href="/en-us/docs/Tools/Responsive_Design_View">Visualització sensible al diseny</a></dt>
<dd><span id="result_box" lang="ca"><span>Veureu</span> <span>com el vostre lloc</span> <span>web o aplicació</span> <span>es</span> <span>veu</span> <span>en diferents</span> <span>mides de pantalla</span> <span>sense</span> <span>canviar</span> <span>la mida de la</span> <span>finestra</span> <span>del navegador.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Depurar Firefox per Android</a></dt>
<dd><span id="result_box" lang="ca"><span>Connectar </span><span>les</span> <span>eines de</span> <span>desenvolupament de Firefox</span> <span>per Android.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Depurar Firefox per Android amb WebIDE</a></dt>
<dd>Per Desktop Firefox 36+ / Android Firefox 35+ <span lang="ca"><span>, hi ha un</span> <span>procés</span> <span>més simple.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
<dd><span id="result_box" lang="ca"><span>Connectar les</span> <span>eines</span> <span>per a desenvolupadors</span> <span>de Chrome</span> <span>en</span> <span>Android</span> <span>i Safari</span> <span>en iOS</span></span></dd>
</dl>
</div>
<div class="column-half">
<h2 id="Performance" name="Performance">Rendiment</h2>
<p><span id="result_box" lang="ca"><span>Diagnosticar</span> <span>i solucionar</span> <span>problemes</span> <span>de rendiment.</span></span></p>
<dl>
<dt><a href="/en-US/docs/Tools/Performance">Eina de rendiment</a></dt>
<dd>Analitza la capacitat de resposta general, el rendiment de Javascript i el disseny del lloc.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Gràfic de velocitat de fotogrames</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure la</span> <span>velocitat</span> <span>de fotogrames</span> <span>del vostre lloc</span><span>.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
<dd><span id="result_box" lang="ca"><span>Esbrinar el que</span> <span>el navegador</span> <span>està</span> <span>fent mentre </span><span>executa</span> <span>el vostre lloc.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Arbre de crides</a></dt>
<dd><span id="result_box" lang="ca"><span>Esbrinar on</span> <span>el vostre</span><span> codi</span> <span>JavaScript està</span> invertint mes <span>temps.</span></span></dd>
</dl>
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Gràfic de Flama</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure</span> <span>quines funcions</span> <span>estan</span> <span>a la pila</span> <span>al llarg</span> <span>d'un perfil</span> <span>de rendiment.</span></span> .</dd>
<dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Eina Paint Flashing</a></dt>
<dd><span id="result_box" lang="ca"><span>Destaquen</span> <span>les</span> <span>parts</span> <span>de la pàgina que</span> <span>es repintan</span> <span>en resposta als</span> <span>esdeveniments.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Registre d'esdeveniments de reflux</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure</span> <span>esdeveniments de</span> <span>reflux</span> <span>a la consola</span> <span>web.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Rendiment de la xarxa</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure quant</span> <span>temps</span> triga <span>les</span> <span>parts</span> <span>del vostre lloc</span> <span>han carregar-se</span><span>.</span></span></dd>
</dl>
</div>
</div>
<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser"><span id="result_box" lang="ca"><span>Depuració</span> <span>del navegador</span></span></h2>
<p><span id="result_box" lang="ca"><span>Per defecte</span><span>, les eines de</span> <span>desenvolupament estan</span> <span>associades a una</span> <span>pàgina</span> <span>o</span> <span>aplicació web.</span> <span>Però també</span> <span>es</span> <span>pot</span> <span>connectar al</span> <span>navegador</span> com un tot<span>.</span> <span>Això</span> <span>és útil per al</span> <span>navegador i el</span> <span>desenvolupament</span> <span>de complements.</span></span></p>
<dl>
<dt><a href="/en-US/docs/Tools/Browser_Console">Consola del navegador</a></dt>
<dd><span id="result_box" lang="ca"><span>Veure</span> els <span>missatges</span> <span>registrats</span> <span>i els</span> <span>complements</span> <span>del navegador i</span> <span>executar</span> <span>codi JavaScript</span> <span>en l'àmbit del</span> <span>navegador.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Browser_Toolbox">Caixa d'eines del navegador</a></dt>
<dd><span id="result_box" lang="ca"><span>Fixar</span> <span>les</span> <span>eines</span> <span>de desenvolupament al</span> <span>navegador.</span></span></dd>
</dl>
</div>
<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">Ampliació dels DevTools</h2>
<p>Les eines de desenvolupament estan dissenyades per a ser extensibles. Els complements del Firefox poden accedir a les eines de desenvolupament i els components que s'utilitzen per estendre les eines existents i afegir noves eines. Amb el protocol de depuració remota podeu implementar els vostres propis clients i servidors de depuració, el que us permet depurar llocs web utilitzant les seves pròpies eines o depurar diferents objectius utilitzant les eines de Firefox.</p>
<dl>
<dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Afegir un nou panell per als devtools</a></dt>
<dd><span id="result_box" lang="ca"><span>Escriure</span> <span>un complement</span> <span>que afegeixi un</span> <span>nou panell</span> <span>a la caixa</span> <span>d'eines</span></span>.</dd>
<dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Protocol de depuració remota</a></dt>
<dd><span id="result_box" lang="ca"><span>Protocol</span> <span>utilitzat</span> <span>per</span> <span>connectar les</span> <span>eines</span> <span>de desenvolupament de </span></span><span lang="ca"><span>Firefox per</span> <span> a</span> <span>un objectiu</span> <span>de depuració</span> <span>com una</span> <span>instància</span> <span>de Firefox o</span> <span>un dispositiu</span> <span>Firefox</span> <span>OS.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Editor">Editor de codi font</a></dt>
<dd><span id="result_box" lang="ca"><span>Un editor</span> <span>de codi</span> <span>integrat</span> <span>a Firefox</span> <span>que pot ser</span> <span>incorporat</span> <span>en el seu</span> <span>complement.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Debugger-API">Interfície de depuració</a></dt>
<dd><span id="result_box" lang="ca"><span>Una</span> <span>API que permet</span> al <span>codi JavaScript</span> <span>observar</span> <span>l'execució</span> <span>d'un altre</span> <span>codi</span> <span>JavaScript.</span> <span>Les</span> <span>eines de</span> <span>desenvolupament de Firefox</span> <span>utilitzen aquesta</span> <span>API</span> <span>per a implementar el</span> <span>depurador</span> <span>de JavaScript.</span></span></dd>
<dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Sortida perosnalitzada de la consola web</a></dt>
<dd><span id="result_box" lang="ca"><span>Com estendre</span> <span>i personalitzar</span> <span>la sortida de la</span></span> <a href="/en-US/docs/Tools/Web_Console">Consola Web</a> i la <a href="/en-US/docs/Tools/Browser_Console">Consola del Navegador</a>.</dd>
<dt><a href="/en-US/docs/Tools/Example_add-ons">Exemple de complements de devtools</a></dt>
<dd><span id="result_box" lang="ca"><span>Utilitzeu aquests</span> <span>exemples</span> <span>per a</span> <span>comprendre com</span> <span>implementar un</span> <span>complement de DevTools.</span></span></dd>
</dl>
</div>
</div>
<hr>
<h2 id="More_resources" name="More_resources">M<span id="result_box" lang="ca"><span>és recursos</span></span></h2>
<p>Aquesta secció enumera els recursos que no són mantinguts per l'equip d'eines de desenvolupament de Mozilla, però que són àmpliament utilitzats pels desenvolupadors web. Hem inclòs alguns complements de Firefox en aquesta llista, però per a la llista completa vegeu en <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">addons.mozilla.org categories en "Desenvolupament Web”</a>.</p>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
<dd>Una eina de desenvolupament web molt popular i potent, incloent un depurador de Javascript, visualitzador i editor d'HTML i CSS i monitor de xarxa.</dd>
<dt><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt>
<dd><span id="result_box" lang="ca"><span>Inspeccionar,</span> <span>revisar</span> <span>i editar el</span> <span>DOM</span> <span>de pàgines</span> <span>web</span> <span>o finestres</span> <span>XUL.</span></span></dd>
<dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Desenvolupament web</a></dt>
<dd><span id="result_box" lang="ca"><span>Afegeix un</span> <span>menú</span> <span>i una barra</span> <span>d'eines al</span> <span>navegador</span> <span>amb</span> <span>diverses</span> <span>eines</span> <span>per a desenvolupament</span> <span>web.</span></span></dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="https://webmaker.org/en-US/tools/">Eines Webmaker</a></dt>
<dd><span id="result_box" lang="ca"><span>Conjunt</span> <span>d'eines</span> <span>desenvolupades</span> <span>per Mozilla</span><span>, dirigides a</span> <span>persones</span> </span> que s'inicien en el<span lang="ca"> <span>desenvolupament</span> <span>web.</span></span></dd>
<dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
<dd><span id="result_box" lang="ca"><span>La pàgina web de</span> <span>W3C</span> <span>alberga una sèrie</span> <span>d'eines</span> <span>per a</span> <span>comprovar</span> <span>la validesa del vostre</span> <span>lloc web,</span> <span>incloent </span></span><a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> i <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><span id="result_box" lang="ca"><span>Eina</span> <span>d'anàlisi de</span> <span>codi</span> <span>JavaScript.</span></span></dd>
</dl>
</div>
</div>
|
