Edição de Desenvolvoimento do Firefox
As Ferramentas Centrais
Inspetor de Página
Ver e editar conteúdo e apresentação da página. Visualize muitos aspetos da página, incluindo o modelo de caixa, animações e apresentações de grelha.
Consola da Web
Ver mensagens registadas por uma página da Web e interagir com a página utilizando o JavaScript.
Depurador de JavaScript
Parar, percorrer, examinar e modificar o JavaScript em execução numa página.
Monitor de Rede
Ver os pedidos de rede efetuados quando uma página é carregada.
Ferramentas de Desempenho
Analise a reação geral do site, JavaScript, e desempenho da apresentação.
Modo de Desenho Responsivo
Ver como o seu site da Web ou aplicação serão apresentados e se comportam nos diferentes dispositivos e tipos de rede.
Mais Ferramentas
These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.
- Memória
- Figure out which objects are keeping memory in use.
- Inspetor de Armazenamento
- Inspect cookies, local storage, indexedDB, and session storage present in a page.
- DOM Property Viewer
- Inspect the page's DOM properties, functions, etc.
- Barra de Ferramentas do Programador
- A command-line interface for the developer tools.
- Eyedropper
- Select a color from the page.
- Scratchpad
- A text editor built into Firefox that lets you write and execute JavaScript.
- Style Editor
- View and edit CSS styles for the current page.
- Shader Editor
- View and edit the vertex and fragment shaders used by WebGL.
- Editor de Áudio da Web
- Examine the graph of audio nodes in an audio context, and modify their parameters.
- Capturas de ecrã
- Efetuar uma captura de ecrã de uma página completa ou de um único elemento.
Ligação de Ferramentas de Desenvolvimento
If you open the developer tools using atalhos de teclado or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.
- about:debugging
- Debug add-ons, content tabs, and workers running in the browser.
- Connecting to Firefox for Android
- Connect the developer tools to an instance of Firefox running on an Android device.
- Connecting to iframes
- Connect the developer tools to a specific iframe in the current page.
- Connecting to other browsers
- Connect the developer tools to Chrome on Android and Safari on iOS.
Depurar navegador
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.
- Consola do Navegador
- See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
- Caixa de Ferramentas do Navegador
- Attach the Developer Tools to the browser itself.
Aumento das ferramentas de desenvolvimento
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.
- Adicione um novo painel às ferramentas de desenvolvimento
- Write an add-on that adds a new panel to the Toolbox.
- Protocolod e Deputação Remoto
- The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
- Editor de Fonte
- A code editor built into Firefox that can be embedded in your add-on.
- A Interface do Depurador
- 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.
- Consola da Web - saída personalizada
- How to extend and customize the output of the Web Console and the Browser Console.
- Exemplo de extras das ferramentas de desenvolvimento
- Utilize estes exemplos para compreender como implementar um add-on das ferramentas de desenvolvimento.
Mais recursos
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.
- Inspetor de DOM
- Inspecione, explore, e edite o DOM das páginas da Web ou janelas XUL.
- Programador da Web
- Adds a menu and a toolbar to the browser with various web developer tools.
- Ferramentas de Webmaker
- A set of tools developed by Mozilla, aimed at people getting started with Web development.
- Validadores de W3C
- The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
- Dica de JS
- ferramenta de análise do código JavaScript.
Join the Developer tools community
- IRC: #devtools (learn more)
- Team info: Dev tools wiki
- Blog: Hacks blog