1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
---
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 > Sviluppo Web > 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>
|
