Instalar Edição de Desenvolvoimento do FirefoxO que há de novo na Edição de Desenvolvimento do Firefox?
Edição de Desenvolvimento do Firefox é uma versão do Firefox adaptada para os programadores, apresentando as funcionalidades do Firefox mais recentes e ferramentas de desenvolvimento experimentais. Esta edição inclui essas atualizações para as ferramentas do programador:
Partilhar as suas ideias
Solicite novas funcionalidades nas ferramentas de programador ou vote nas ideias que os outros programadores solicitaram.
Authoring tools for websites and web apps.
- Style Editor
- View and edit CSS styles for the current page.
- Shader Editor
- View and edit the vertex and fragment shaders used by WebGL.
- Web Audio Editor
- Examine the graph of audio nodes in an audio context, and modify their parameters.
Exploração e depuração
Examine, explore, and debug websites and web apps.
- Consola da Web
- Page Inspector
- View and modify the page HTML and CSS.
- Network Monitor
- See the network requests made when a page is loaded.
- Storage Inspector
- Inspect cookies, local storage, indexedDB and session storage present in a page.
- Developer Toolbar
- A command-line interface for the developer tools.
- 3D View
- 3D visualization of the page.
- Select a color from the page.
- Working with iframes
- How to target a particular iframe.
Ferramentas para o desenvolvimento móvel.
- Gestor de Aplicação
- App Manager has been replaced by WebIDE.
- The replacement for the App Manager, available from Firefox 33 onwards.
- Simulador do Firefox OS
- Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
- Visualização de Desenho Compreensiva
- See how your website or app will look on different screen sizes without changing the size of your browser window.
- Depuração no Firefox para Android
- Connect the developer tools to Firefox for Android.
- Depurar o Firefox para Android com WebIDE
- For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.
- Connect the developer tools to Chrome on Android and Safari on iOS
Diagnose and fix performance problems.
- Ferramenta de Desemepnho
- Frame rate graph
- See the frame rate for your site.
- Figure out what the browser is doing as it runs your site.
- Call Tree
- Flame Chart
- See which functions are on the stack over the course of a performance profile.
- Paint Flashing Tool
- Highlights the parts of the page that are repainted in response to events.
- Reflow Event Logging
- See reflow events in the web console.
- Network Performance
- See how long the parts of your site take to load.
Depuração do 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.
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.
- Add a new panel to the devtools
- Write an add-on that adds a new panel to the Toolbox.
- Remote Debugging Protocol
- The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
- Source Editor
- A code editor built into Firefox that can be embedded in your add-on.
- Web Console custom output
- How to extend and customize the output of the Web Console and the Browser Console.
- Example devtools add-ons
- Use these examples to understand how to implement a devtools add-on.
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.
- DOM Inspector
- Inspect, browse, and edit the DOM of web pages or XUL windows.
- Web Developer
- Adds a menu and a toolbar to the browser with various web developer tools.