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, la community DevTools di 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.

Questo bottone appare soltanto quando ci sono iframes multipli in una pagina. Premilo per visualizzare la lista degli iframes nella pagina corrente e seleziona quello con cui vuoi lavorare.
Premi questo bottone per ottenere uno screenshot della pagina corrente. (Nota: Questa funzionalità non è attiva di default e deve essere abilitata nelle impostazioni prima che venga visualizzata.)
Attiva/disattiva la modalità di progettazione Responsive.
Apre il menu che include le opzioni di ancoraggio, la possibilità di mostrare o nascondere la console divisa, e le impostazioni degli strumenti di sviluppo. Il menu include anche collegamenti alla documentazione di Firefox Web Tools e Mozilla Community.
Chiude gli strumenti per sviluppatori

Page Inspector

The all-new Inspector panel in Firefox 57.

Osserva e modifica il contenuto e il design della pagina. Visualizza e interagisci con le caratteristiche degli elementi come: box model, animazioni e grid layouts.

Web Console

The all-new Console in Firefox 57.

Guarda i messaggi inviati in console dalla pagina web e comunica con essa utilizzando Javascript.

Debugger

The all-new Firefox 57 Debugger.html

Stoppa, avanza, esamina e modifica passo a passo il codice Javascript in esecuzione nella pagina.

Network Monitor

The Network panel in Firefox 57 DevTools.

Visualizza le richieste di rete effettuate quando una pagina viene caricata.

Performance Tools

Performance Tools in Firefox 57 Developer Tools

Analizza la reattività generale del sito, le performance di layout e Javascript.

Responsive Design Mode

Responsive Design mode in Firefox 57.

Osserva come il tuo sito web o la tua applicazione apparirebbero su dispositivi e reti differenti.

Accessibility inspector

Performance Tools in Firefox 57 Developer Tools

Fornisce uno strumento di controllo dell'accessibilità del sito da parte di tutti, permettendoti di controllare cosa manca o dove c'è necessità di più attenzione.

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

Altri Strumenti

Anche questi strumenti sono a disposizione tramite l'analisi della pagina. Diversamente dagli "Strumenti Chiave" descritti sopra, potresti non usarli tutti i giorni.

Memoria.
Ti permette di capire come viene gestita la memoria nelle varie schede di navigazione.
Archiviazione
Ispeziona cookies, archiviazione locale, indexedDB, e archiviazione sessioni presenti nella pagina.
DOM Property Viewer
Ispeziona tutto quello che riguarda il DOM della pagina.
Eyedropper
Seleziona un colore dalla pagina.
Editor Stili
Visualizza e modifica il CSS and della pagina corrente.
Cattura Schermata
Ottieni uno screenshot dell'intera pagina o di un singolo elemento.
Strumento di misurazione
Misura un area della pagina web
Rulers
Sovrascrivi le regole verticali e orizzontali

Per gli ultimi strumenti di sviluppo e funzionalità, prova 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.