---
title: Strumenti di Sviluppo di Firefox
slug: Tools
tags:
  - Developing Mozilla
  - NeedsMarkupWork
  - NeedsTechnicalReview
  - NeedsTranslation
  - Tools
  - TopicStub
  - Web Development
  - 'Web Development:Tools'
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>

<p class="summary">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</p>

<p class="summary">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.</p>

<p>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.</p>

<div class="note">
<p>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.</p>
</div>

<h2 id="Gli_strumenti_di_base">Gli strumenti di base</h2>

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

<p>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.</p>

<table class="standard-table" style="height: 178px; width: 840px;">
 <tbody>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
   <td>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.</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
   <td>Premi questo bottone per ottenere uno screenshot della pagina corrente. (<strong>Nota:</strong> Questa funzionalità non è attiva di default e deve essere abilitata nelle impostazioni prima che venga visualizzata.)</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
   <td>Attiva/disattiva la modalità di progettazione Responsive.</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
   <td>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.</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
   <td>Chiude gli strumenti per sviluppatori</td>
  </tr>
 </tbody>
</table>

<div class="column-container">
<div class="column-half">
<h3 id="Page_Inspector">Page Inspector</h3>

<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png"></a></p>

<p>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.</p>
</div>

<div class="column-half">
<h3 id="Web_Console">Web Console</h3>

<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png"></a></p>

<p>Guarda i messaggi inviati in console dalla pagina web e comunica con essa utilizzando Javascript.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Debugger">Debugger</h3>

<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png"></a></p>

<p>Stoppa, avanza, esamina e modifica passo a passo il codice Javascript in esecuzione nella pagina.</p>
</div>

<div class="column-half">
<h3 id="Network_Monitor">Network Monitor</h3>

<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png"></a></p>

<p>Visualizza le richieste di rete effettuate quando una pagina viene caricata.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Performance_Tools">Performance Tools</h3>

<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png"></a></p>

<p>Analizza la reattività generale del sito, le performance di layout e Javascript.</p>
</div>

<div class="column-half">
<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3>

<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Osserva come il tuo sito web o la tua applicazione apparirebbero su dispositivi e reti differenti.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Accessibility_inspector">Accessibility inspector</h3>

<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png"></a></p>

<p>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.</p>
</div>

<div class="column-half"></div>
</div>

<div class="note">
<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p>
</div>

<h2 id="Altri_Strumenti">Altri Strumenti</h2>

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

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Memory">Memoria.</a></dt>
 <dd>Ti permette di capire come viene gestita la memoria nelle varie schede di navigazione.</dd>
 <dt><a href="/en-US/docs/Tools/Storage_Inspector">Archiviazione</a></dt>
 <dd>Ispeziona cookies, archiviazione locale, indexedDB, e archiviazione sessioni presenti nella pagina.</dd>
 <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt>
 <dd>Ispeziona tutto quello che riguarda il DOM della pagina.</dd>
 <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
 <dd>Seleziona un colore dalla pagina.</dd>
 <dt><a href="/en-US/docs/Tools/Style_Editor">Editor Stili</a></dt>
 <dd>Visualizza e modifica il CSS and della pagina corrente.</dd>
 <dt><a href="/en-US/docs/Tools/Screenshot_tool">Cattura Schermata</a></dt>
 <dd>Ottieni uno screenshot dell'intera pagina o di un singolo elemento.</dd>
 <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Strumento di misurazione</a></dt>
 <dd>Misura un area della pagina web</dd>
 <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt>
 <dd>Sovrascrivi le regole verticali e orizzontali</dd>
</dl>
</div>

<div class="column-container">
<div class="column-third">
<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>

<p style="text-align: center;">Per gli ultimi strumenti di sviluppo e funzionalità, prova Firefox Developer Edition.</p>

<p><a href="https://www.mozilla.org/en-US/firefox/developer/">Download Firefox Developer Edition</a></p>
</div>

<div class="column-third"></div>
</div>

<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2>

<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> 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.</p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
 <dd>Debug add-ons, content tabs, and workers running in the browser.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt>
 <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd>
 <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt>
 <dd>Connect the developer tools to a specific iframe in the current page.</dd>
 <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt>
 <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd>
</dl>
</div>

<h2 id="Debugging_the_browser">Debugging the browser</h2>

<p>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.</p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
 <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd>
 <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
 <dd>Attach the Developer Tools to the browser itself.</dd>
</dl>
</div>

<h2 id="Extending_the_devtools">Extending the devtools</h2>

<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p>

<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2>

<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> 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 — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p>

<h2 id="Contribute">Contribute</h2>

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

<div class="twocolumns">
<dl>
 <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt>
 <dd>Our developer documentation explains how to get involved.</dd>
 <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt>
 <dd>A tool helping to find bugs to work on.</dd>
</dl>
</div>