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
|
---
title: Ferramentas do Firefox para desenvolvedores
slug: Tools
tags:
- Developing Mozilla
- NeedsMarkupWork
- NeedsTechnicalReview
- NeedsTranslation
- Tools
- TopicStub
- Web Development
- 'Web Development:Tools'
translation_of: Tools
---
<div class="summary"><span class="seoSummary">Examine, edite e depure HTML, CSS e JavaScript no computador e no celular</span></div>
<div class="column-container zone-callout"><a href="https://www.mozilla.org/pt-BR/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; color: white; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.3) 0px -1px 0px 0px inset;">Instalar o Firefox Developer Edition</a>
<h3 id="Whats_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Quais as novidades no Firefox Developer Edition?</h3>
<p>O <a href="/pt-BR/Firefox/Developer_Edition">Firefox Developer Edition</a> é a versão do Firefox para desenvolvedores, com as mais recentes funcionalidades e ferramentas de desenvolvimento experimentais. Atualmente a Developer Edition inclui as seguintes atualizações para as ferramentas de desenvolvimento:</p>
<ul>
<li><a href="/pt-BR/docs/Tools/Network_Monitor#Security">Painel de segurança no Network Monitor</a></li>
<li><a href="/pt-BR/docs/Tools/Page_Inspector#Animations_view">Painel de animações no Page Inspector</a></li>
<li><a href="/pt-BR/docs/Tools/WebIDE#Running_a_custom_build_step">Suporte para execução de builds customizados na WebIDE</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: rgb(129, 188, 46); white-space: nowrap; color: white; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.3) 0px -1px 0px 0px inset;">Compartilhe suas ideias</a>
<h3 id="Share_your_ideas" name="Share_your_ideas">Compartilhe suas ideias</h3>
<p>Peça novas funcionalidades nas ferramentas de desenvolvimento ou vote em ideias de outros desenvolvedores.</p>
</div>
<p><img alt="" dir="ltr" src="https://mdn.mozillademos.org/files/7307/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">Criando</h2>
<p>Ferramentas de criação de sites e aplicativos web.</p>
<dl>
<dt><a href="/pt-BR/docs/Tools/Scratchpad">Scratchpad</a></dt>
<dd>Um editor de texto embutido no Firefox que permite editar e executar código JavaScript.</dd>
<dt><a href="/pt-BR/docs/Tools/Editor_de_Estilos">Style Editor</a></dt>
<dd>Visualize e edite estilos CSS na página atual.</dd>
<dt><a href="/pt-BR/docs/Tools/Shader_Editor">Shader Editor</a></dt>
<dd>Visualize e edite vértices e fragmentos de shaders usados pelo <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
<dt><a href="/pt-BR/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
<dd>Examine o gráfico de nós de audio num contexto de audio, e modifique seus parâmetros.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Exploring" name="Exploring">Explorando e depurando</h2>
<p>Examine, explore e depure sites e aplicativos web.</p>
<dl>
<dt><a href="/pt-BR/docs/Tools/Web_Console">Web Console</a></dt>
<dd>Visualize os logs de execução da página e interaja com ela usando JavaScript.</dd>
<dt><a href="/pt-BR/docs/Tools/Page_Inspector">Page Inspector</a></dt>
<dd>Visualize e modifique a página HTML e CSS.</dd>
<dt><a href="/pt-BR/docs/Tools/Depurador">JavaScript Debugger</a></dt>
<dd>Pare, analise e modifique o JavaScript em execução na página.</dd>
<dt><a href="/pt-BR/docs/Tools/Network_Monitor">Network Monitor</a></dt>
<dd>Acompanhe as requisições de feitas à rede enquanto a página é carregada.</dd>
<dt><a href="/pt-BR/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
<dd>Inspecione cookies, armazenamento local, indexedDB e armazenamento da sessão presentes na página.</dd>
<dt><a href="/pt-BR/docs/Tools/GCLI">Developer Toolbar</a></dt>
<dd>Uma interface de linha de comando para as ferramentas de desenvolvimento.</dd>
<dt><a href="/pt-BR/docs/Tools/3D_View">3D View</a></dt>
<dd>Visualização da página em 3D.</dd>
<dt><a href="/pt-BR/docs/Tools/Eyedropper">Eyedropper</a></dt>
<dd>Obtenha o código da cor de um determinado pixel da página.</dd>
<dt><a href="/pt-BR/docs/Tools/Working_with_iframes">Trabalhando com iframes</a></dt>
<dd>Como trabalhar com iframe.</dd>
</dl>
</div>
</div>
<div class="column-container" dir="ltr">
<div class="column-half">
<h2 id="Mobile" name="Mobile">Móvel</h2>
<p>Ferramentas para desenvolvimento <em>mobile</em>.</p>
<dl>
<dt><a href="/pt-BR/Firefox_OS/Using_the_App_Manager">Gerenciador de app</a></dt>
<dd>Design e desenvolvimento de apps para FirefoxOS
<hr></dd>
<dt><a href="/pt-BR/docs/Tools/WebIDE">WebIDE</a></dt>
<dd>O substituto do App Manager, disponível a partir da versão 33 do Firefox.</dd>
<dt><a href="/pt-BR/docs/Tools/Simulador_Firefox_OS">Firefox OS Simulador</a></dt>
<dd>Simule e faça debug de sua aplicação para o Firefox OS no desktop, sem a necessidade de um aparelho com Firefox OS instalado.</dd>
<dt><a href="/pt-BR/docs/Tools/Modo_Design_Adaptavel">Responsive Design View</a></dt>
<dd>Veja como o seu site ou app responde a diferentes resoluções de tela, sem precisar ficar redimensionando a janela do browser.</dd>
<dt><a href="/pt-BR/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging no Firefox for Android</a></dt>
<dd>Developer tools para o Firefox for Android.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Performance" name="Performance">Performance</h2>
<p>Diagnosticando e corrigindo problemas.</p>
<dl>
<dt><a href="/pt-BR/docs/Tools/Performance">Performance tool</a></dt>
<dd>Renovada o perfil JS e o cronograma de taxa de quadros</dd>
</dl>
<dl>
<dt><a href="/pt-BR/docs/Tools/Profiler">JavaScript Profiler</a></dt>
<dd>Descubra onde seu código JavaScript está gastando seu tempo.</dd>
<dt><a href="/pt-BR/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
<dd>Destaque as partes da página que são redesenhados em resposta a eventos.</dd>
<dt><a href="/pt-BR/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
<dd>Veja eventos de reflow no web console.</dd>
<dt><a href="/pt-BR/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
<dd>Veja quanto tempo as partes do seu site levam pra carregar.</dd>
</dl>
</div>
</div>
<hr>
<div class="column-container" dir="ltr">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depurando no navegador</h2>
<p>Por padrão, a ferramenta de desenvolvimento é ligada a uma página web ou web <em>app</em>. Mas você pode também conecta-los ao navegador como um todo. Isso é útil para o desenvolvimento para navegador e para add-ons.</p>
<dl>
<dt><a href="/pt-BR/docs/Tools/Browser_Console">Browser Console</a></dt>
<dd>Veja as mensagens de log do browser e de add-ons, e execute JavaScript no escopo do browser.</dd>
<dt><a href="/pt-BR/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
<dd>Anexe o Developer Tools para o próprio navegador.</dd>
</dl>
</div>
<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">Estendendo o devtools</h2>
<p>As ferramentas de desenvolvimentos são desenhadas para serem extensíveis. Add-ons do Firefox podem acessar as ferramentas de desenvolvimento e os componentes que eles usam para estender ferramentas existentes e adicionar novas. Com o protocolo remoto de debugging você pode implementar seu próprio cliente de debugging e servidores, permitindo a você o debug de websites usando suas próprias ferramentas ou debuggando diferentes alvos usando as ferramentas do Firefox.</p>
<dl>
<dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
<dd>O protocolo usado para conectar o Firefox Developer Tools a um destino de debuggin como uma instância do Firefox ou um aparelho com Firefox OS.</dd>
<dt><a href="/pt-BR/docs/Tools/Editor">Editor de código</a></dt>
<dd>Um editor de código embutido dentro do Firefox que pode ser incorporado no seu add-on.</dd>
<dt><a href="/pt-BR/docs/Tools/Debugger-API">A interface do <code>Debugger</code></a></dt>
<dd>Uma API que permite que o código JavaScript observe a execução de outro código JavaScript. O Firefox Developer Tools usa essa API para implementar o debugger JavaScript.</dd>
<dt><a href="/pt-BR/docs/Tools/Web_Console/Custom_output">Output do Web Console personalizado</a></dt>
<dd>Como estender e customizar o output do <a href="/en-US/docs/Tools/Web_Console">Web Console</a> e o <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
</dl>
</div>
</div>
<hr>
<h2 dir="ltr" id="More_resources" name="More_resources">Mais recursos</h2>
<p dir="ltr">Essa seção lista recursos que não são mantidos pela equipe do developer tools da Mozilla, mas que são largamente usados por desenvolvedores web. Nós temos incluído alguns add-ons do Firefox nessa lista, mas para uma lista completa veja a <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">categoria “Web Development” em addons.mozilla.org</a>.</p>
<div class="column-container" dir="ltr">
<div class="column-half">
<dl>
<dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
<dd>Uma ferramenta de desenvolvimento muito popular e poderosa, que inclue um debugger JavaScript, visualizador e editor de HTML e CSS, e um monitor de rede.</dd>
<dt><a href="/pt-BR/docs/DOM_Inspector">DOM Inspector</a></dt>
<dd>Inspeciona, navega e edita o DOM de páginas web ou janelas XUL.</dd>
<dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
<dd>Adiciona um menu e uma barra de ferramentas ao browser com várias ferramentas de desenvolvimento web.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
<dd>Um conjunto de ferramentas desenvolvidas pela Mozilla, destinada a pessoas que estão começando no desenvolvimento Web.</dd>
<dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
<dd>O site W3C hospeda um número de ferramentas para checar a validação do seu website, incluindo <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> e <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>Ferramenta de análise de código JavaScript.</dd>
</dl>
</div>
</div>
|
