From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/tools/index.html | 189 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/pt-br/tools/index.html (limited to 'files/pt-br/tools/index.html') diff --git a/files/pt-br/tools/index.html b/files/pt-br/tools/index.html new file mode 100644 index 0000000000..46d40c34ff --- /dev/null +++ b/files/pt-br/tools/index.html @@ -0,0 +1,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 +--- +
Examine, edite e depure HTML, CSS e JavaScript no computador e no celular
+ +
Instalar o Firefox Developer Edition + +

Quais as novidades no Firefox Developer Edition?

+ +

O Firefox Developer Edition é 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:

+ + +
+ +
Compartilhe suas ideias + +

Compartilhe suas ideias

+ +

Peça novas funcionalidades nas ferramentas de desenvolvimento ou vote em ideias de outros desenvolvedores.

+
+ +

+ +
+
+

Criando

+ +

Ferramentas de criação de sites e aplicativos web.

+ +
+
Scratchpad
+
Um editor de texto embutido no Firefox que permite editar e executar código JavaScript.
+
Style Editor
+
Visualize e edite estilos CSS na página atual.
+
Shader Editor
+
Visualize e edite vértices e fragmentos de shaders usados pelo WebGL.
+
Web Audio Editor
+
Examine o gráfico de nós de audio num contexto de audio, e modifique seus parâmetros.
+
+
+ +
+

Explorando e depurando

+ +

Examine, explore e depure sites e aplicativos web.

+ +
+
Web Console
+
Visualize os logs de execução da página e interaja com ela usando JavaScript.
+
Page Inspector
+
Visualize e modifique a página HTML e CSS.
+
JavaScript Debugger
+
Pare, analise e modifique o JavaScript em execução na página.
+
Network Monitor
+
Acompanhe as requisições de feitas à rede enquanto a página é carregada.
+
Storage Inspector
+
Inspecione cookies, armazenamento local, indexedDB e armazenamento da sessão presentes na página.
+
Developer Toolbar
+
Uma interface de linha de comando para as ferramentas de desenvolvimento.
+
3D View
+
Visualização da página em 3D.
+
Eyedropper
+
Obtenha o código da cor de um determinado pixel da página.
+
Trabalhando com iframes
+
Como trabalhar com iframe.
+
+
+
+ +
+
+

Móvel

+ +

Ferramentas para desenvolvimento mobile.

+ +
+
Gerenciador de app
+
Design e desenvolvimento de apps para FirefoxOS +
+
WebIDE
+
O substituto do App Manager, disponível a partir da versão 33 do Firefox.
+
Firefox OS Simulador
+
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.
+
Responsive Design View
+
Veja como o seu site ou app responde a diferentes resoluções de tela, sem precisar ficar redimensionando a janela do browser.
+
Debugging no Firefox for Android
+
Developer tools para o Firefox for Android.
+
+
+ +
+

Performance

+ +

Diagnosticando e corrigindo problemas.

+ +
+
Performance tool
+
Renovada o perfil JS e o cronograma de taxa de quadros
+
+ +
+
JavaScript Profiler
+
Descubra onde seu código JavaScript está gastando seu tempo.
+
Paint Flashing Tool
+
Destaque as partes da página que são redesenhados em resposta a eventos.
+
Reflow Event Logging
+
Veja eventos de reflow no web console.
+
Network Performance
+
Veja quanto tempo as partes do seu site levam pra carregar.
+
+
+
+ +
+
+
+

Depurando no navegador

+ +

Por padrão, a ferramenta de desenvolvimento é ligada a uma página web ou web app. Mas você pode também conecta-los ao navegador como um todo. Isso é útil para o desenvolvimento para navegador e para add-ons.

+ +
+
Browser Console
+
Veja as mensagens de log do browser e de add-ons, e execute JavaScript no escopo do browser.
+
Browser Toolbox
+
Anexe o Developer Tools para o próprio navegador.
+
+
+ +
+

Estendendo o devtools

+ +

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.

+ +
+
Remote Debugging Protocol
+
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.
+
Editor de código
+
Um editor de código embutido dentro do Firefox que pode ser incorporado no seu add-on.
+
A interface do Debugger
+
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.
+
Output do Web Console personalizado
+
Como estender e customizar o output do Web Console  e o Browser Console.
+
+
+
+ +
+

Mais recursos

+ +

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 categoria “Web Development” em addons.mozilla.org.

+ +
+
+
+
Firebug
+
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.
+
DOM Inspector
+
Inspeciona, navega e edita o DOM de páginas web ou janelas XUL.
+
Web Developer
+
Adiciona um menu e uma barra de ferramentas ao browser com várias ferramentas de desenvolvimento web.
+
+
+ +
+
+
Webmaker Tools
+
Um conjunto de ferramentas desenvolvidas pela Mozilla, destinada a pessoas que estão começando no desenvolvimento Web.
+
W3C Validators
+
O site W3C hospeda um número de ferramentas para checar a validação do seu website, incluindo HTML e CSS.
+
JSHint
+
Ferramenta de análise de código JavaScript.
+
+
+
-- cgit v1.2.3-54-g00ecf