Strumenti di Sviluppo di Firefox

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

Firefox Developer Tools è un insieme di strumenti di sviluppo web integrati in Firefox. È possibile utilizzarli per esaminare, modificare ed eseguire il debug di HTML, CSS e JavaScript

Se stai cercando informazioni sull'utilizzo degli strumenti di sviluppo web disponibili in Firefox, sei arrivato nel posto giusto - questa pagina fornisce collegamenti a informazioni dettagliate su tutti gli strumenti principali e strumenti aggiuntivi, e ulteriori informazioni come come connettersi e eseguire il debug di Firefox per Android, come estendere gli strumenti di sviluppo e come eseguire il debug del browser nel suo complesso.

Si prega di esplorare i link che si trovano nella barra laterale, e più in basso nella pagina. Se hai commenti o domande sui devtools, inviaci messaggi sulla nostra mailing list o sul canale IRC (vedi i link della community in fondo alla pagina). Se hai commenti o domande specifiche sulla documentazione, il discorso MDN è un buon posto per pubblicare.

 

Nota: se hai appena iniziato con lo sviluppo Web e l'uso degli strumenti di sviluppo, i nostri documenti sullo sviluppo Web per l'apprendimento ti aiuteranno: vedi Introduzione al Web e Che cosa sono gli strumenti di sviluppo del browser? per ottenere buoni punti di partenza.

Gli strumenti di base

È possibile aprire gli strumenti di sviluppo di Firefox dal menu selezionando Strumenti > Sviluppo Web > Attiva/disattiva strumenti o utilizzare la scorciatoia  da tastiera Ctrl + Shift + I or F12 in Windows e Linux, o Cmd + Opt + I in macOS.

Il menu con i farlips sul lato destro di Strumenti di sviluppo contiene diversi comandi che consentono di eseguire azioni o modificare le impostazioni dello strumento.

This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.
Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.)
Toggles Responsive Design Mode.
Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.
Closes the Developer Tools

Page Inspector

The all-new Inspector panel in Firefox 57.

View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.

Web Console

The all-new Console in Firefox 57.

See messages logged by a web page and interact with the page using JavaScript.

JavaScript Debugger

The all-new Firefox 57 Debugger.html

Stop, step through, examine, and modify the JavaScript running in a page.

Network Monitor

The Network panel in Firefox 57 DevTools.

See the network requests made when a page is loaded.

Performance Tools

Performance Tools in Firefox 57 Developer Tools

Analyze your site's general responsiveness, JavaScript, and layout performance.

Responsive Design Mode

Responsive Design mode in Firefox 57.

See how your website or app will look and behave on different devices and network types.

Accessibility inspector

Performance Tools in Firefox 57 Developer Tools

Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.

Note: The collective term for the UI inside which the DevTools all live is the Toolbox.

More Tools

These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.

Memory
Figure out which objects are keeping memory in use.
Storage Inspector
Inspect cookies, local storage, indexedDB, and session storage present in a page.
DOM Property Viewer
Inspect the page's DOM properties, functions, etc.
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.
Taking screenshots
Take a screenshot of the entire page or of a single element.
Measure a portion of the page
Measure a specific area of a web page.
Rulers
Overlay horizontal and vertical rulers on a web page

For the latest developer tools and features, try Firefox Developer Edition.

Download Firefox Developer Edition

Connecting the Developer Tools

If you open the developer tools using keyboard shortcuts 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.

Debugging the browser

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.

Browser Console
See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

Extending the devtools

For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.

Migrating from Firebug

Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.

Contribute

If you want to help improve the developer tools, these resources will get you started.

Get Involved
Our developer documentation explains how to get involved.
bugs.firefox-dev.tools
A tool helping to find bugs to work on.