From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/tools/add-ons/index.html | 17 ++ .../debugger/how_to/disable_breakpoints/index.html | 20 ++ files/it/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 28 ++ .../debugger/how_to/set_a_breakpoint/index.html | 31 ++ .../how_to/set_a_conditional_breakpoint/index.html | 22 ++ .../debugger/how_to/step_through_code/index.html | 31 ++ files/it/tools/debugger/index.html | 69 +++++ files/it/tools/index.html | 214 +++++++++++++ files/it/tools/page_inspector/index.html | 48 +++ files/it/tools/prestazioni/index.html | 91 ++++++ files/it/tools/remote_debugging/index.html | 47 +++ .../it/tools/visualizzazione_flessibile/index.html | 79 +++++ files/it/tools/web_console/helpers/index.html | 79 +++++ files/it/tools/web_console/index.html | 37 +++ files/it/tools/webide/index.html | 333 +++++++++++++++++++++ files/it/tools/webide/monitor/index.html | 160 ++++++++++ files/it/tools/webide/troubleshooting/index.html | 106 +++++++ 18 files changed, 1423 insertions(+) create mode 100644 files/it/tools/add-ons/index.html create mode 100644 files/it/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/it/tools/debugger/how_to/index.html create mode 100644 files/it/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/it/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/it/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/it/tools/debugger/index.html create mode 100644 files/it/tools/index.html create mode 100644 files/it/tools/page_inspector/index.html create mode 100644 files/it/tools/prestazioni/index.html create mode 100644 files/it/tools/remote_debugging/index.html create mode 100644 files/it/tools/visualizzazione_flessibile/index.html create mode 100644 files/it/tools/web_console/helpers/index.html create mode 100644 files/it/tools/web_console/index.html create mode 100644 files/it/tools/webide/index.html create mode 100644 files/it/tools/webide/monitor/index.html create mode 100644 files/it/tools/webide/troubleshooting/index.html (limited to 'files/it/tools') diff --git a/files/it/tools/add-ons/index.html b/files/it/tools/add-ons/index.html new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/it/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/it/tools/debugger/how_to/disable_breakpoints/index.html b/files/it/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..d98d34e98f --- /dev/null +++ b/files/it/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,20 @@ +--- +title: Disable breakpoints +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +
+
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+
+ +

Per disabilitare un singolo punto di interruzione, deseleziona il checkbox relativo nella lista dei pnti di interruzione.

+ +

Per disabilitare tutti i punti di interruzione, click sull' icona:  sulla barra dei comandi.

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

diff --git a/files/it/tools/debugger/how_to/index.html b/files/it/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..d77ec65938 --- /dev/null +++ b/files/it/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/it/tools/debugger/how_to/open_the_debugger/index.html b/files/it/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..0e9dcba1df --- /dev/null +++ b/files/it/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,28 @@ +--- +title: Open the debugger +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
+

 

+ +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+
+ +

Ci sono due modi per aprire il debbugger:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +

 

diff --git a/files/it/tools/debugger/how_to/set_a_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..9180de2a40 --- /dev/null +++ b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

Puoi fissare un punto di interruzione in uno dei modi seguenti:

+ + + +

Il video seguente usa il context menu per fissare un punto di interruzione :

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

Ogni punto di interruzione viene visualizzato in due posizioni nel debugger:

+ + diff --git a/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..2e70147e49 --- /dev/null +++ b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: Set a conditional breakpoint +slug: Tools/Debugger/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +
+

This page describes the JavaScript Debugger as it appears in Firefox 52 and above, in Firefox Nightly and Firefox Developer Edition.

+ +

To see what it's like in earlier versions of Firefox or in Firefox Beta and Release, see Debugger (before Firefox 52).

+ +

If you are getting this version of the Debugger and need to switch back to the old version, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.

+
+ +

Un normale punto di interruzione è associato solo ad una riga di codice: quando l'esecuzione raggiunge qualla linea il debbuger si ferma. Un punto di interruzione condizionale ha anche una condizione associata, che è rrappresentata da un'espressione. quando l'esecuzione raggiunge qualla linea, il debugger si ferma solo se l' espressione è   vera.

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

Per impostare un punto di interruzione condizionale, nel panel sorgente, sulla linea dove vuoi il un punto di interruzione, premi tasto destro e seleziona "Aggiungi punto di interruzione condizionale". Apparirà un textbox dove digitare l'espressione. premiReturn per finire.

+ +

I punti di interruzione condizionali vengono visualizzati come frecce arancioni sul numewro di riga.

+ +

Se clicchi su uno dei punti di interruzione, apparirà la voce di menù "Edit Breakpoint". Puoi usarla per modificare una condizione oppure per aggiungere una condizione ad un brakpoint esistente.

diff --git a/files/it/tools/debugger/how_to/step_through_code/index.html b/files/it/tools/debugger/how_to/step_through_code/index.html new file mode 100644 index 0000000000..33a2305f21 --- /dev/null +++ b/files/it/tools/debugger/how_to/step_through_code/index.html @@ -0,0 +1,31 @@ +--- +title: Step through code +slug: Tools/Debugger/How_to/Step_through_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

Quando il debugger è fermo su un punto di interruzione, puoi proseguire usando i bottoni della barra dei comandi:

+ +

+ +

Nell'ordine, ii bottoni sono:

+ + + +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

Quando è in pausa, il bottone "attiva/disattiva console divisa"  può essere usato per attivare(aprire) o disattivare (chiudere) la console web per indagare gli errori e le variabili:

+ +

diff --git a/files/it/tools/debugger/index.html b/files/it/tools/debugger/index.html new file mode 100644 index 0000000000..76dafea0fa --- /dev/null +++ b/files/it/tools/debugger/index.html @@ -0,0 +1,69 @@ +--- +title: Debugger +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - JS Debug + - Strumenti di Sviluppo + - febugging +translation_of: Tools/Debugger +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

Il debugger JavaScript ti permette di eseguire il codice passo passo ed esaminare o modificare il suo stato, aiutandoti così a scovare eventuali bugs.

+ +

E' possibile usare il debugger sia per il codice eseguito localmente in Firefox, sia per il codice che viene eseguito in remoto, per esempio su un terminale Android che usa Firefox per Android. Vedi remote debugging per sapere come come connettere il debugger ad un terminale remoto.

+ +

Il debugger è compreso in Firefox, e queste pagine descrivono come utilizzare la versione che è incorporata in Firefox. Comunque è anche possibile farlo funzionare come applicazione web indipendente, e quindi usarlo per eseguire il debug di codice eseguito in altri browser o in Node. Per ulteriori dettagli su questa funzione, vedere il contenitore GitHub del progetto.

+ +

Il nuovo debugger non supporta - ancora - tutte le funzionalità del vecchio debugger. Vedi Limitazioni del nuovo debugger.

+ +
+

Panoramica dell'interfaccia utente

+ +

Per avere una generale idea del debugger, questo è il link: veloce panoramica dell'Interfaccia Utente.

+ +
+

Come fare

+ +

Per sapere quello che è possibile fare col debugger, questi sono i link alle guide disponibili:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/it/tools/index.html b/files/it/tools/index.html new file mode 100644 index 0000000000..0fa06dcda3 --- /dev/null +++ b/files/it/tools/index.html @@ -0,0 +1,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 +--- +
{{ToolsSidebar}}
+ +

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.
+
+
diff --git a/files/it/tools/page_inspector/index.html b/files/it/tools/page_inspector/index.html new file mode 100644 index 0000000000..56133a05a0 --- /dev/null +++ b/files/it/tools/page_inspector/index.html @@ -0,0 +1,48 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +

Usa Page Inspector per esaminare e modificare il codice HTML e CSS della pagina.

+ +

Puoi esaminare pagine caricate in una copia locale di Firefox o in remoto, come su devices Firefox OS o Firefox per Android. Guarda la guida sul debugging remoto per imparare a connettere gli strumenti di sviluppo ad un dispositivo remoto.

+ +
+

Interfaccia Utente

+ +

To find your way around the Inspector, here's a quick tour of the UI.

+ +
+

How to

+ +

To find out what you can do with the Inspector, see the following how to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/it/tools/prestazioni/index.html b/files/it/tools/prestazioni/index.html new file mode 100644 index 0000000000..30117d7c02 --- /dev/null +++ b/files/it/tools/prestazioni/index.html @@ -0,0 +1,91 @@ +--- +title: Prestazioni +slug: Tools/Prestazioni +translation_of: Tools/Performance +--- +

Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un resoconto delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.

+ +

Hai a disposizione tre sotto-strumenti per esaminare gli aspetti del profilo più dettagliatamente:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Per cominciare

+ +
+
+
+
UI Tour
+
+

Per orientarti nell' uso dello strumento d'analisi delle prestazioni, ecco un breve tour della UI.

+
+
+
+ +
+
+
How to
+
Operazioni basilari: apri lo strumetno, crea, salva, carica e configura le registrazioni
+
+
+
+ +
+

Componenti dello strumento per l' analisi delle prestazioni

+ +
+
+
+
Frame rate
+
Comprendi la risposta generale del tuo sito
+
Albero delle chiamate
+
Trova gli intoppi nel Javascript del tuo sito.
+
+
+ +
+
+
Cascata
+
Comprendi il lavoro che sta svolgendo il browser quando l' utente interagisce con il tuo sito.
+
Grafico a fiamma
+
Controlla quali funzioni Javascript sono in esecuzione ed in che momento, durante la registrazione.
+
 
+
+
+
+ +
+

Scenari

+ +
+
+
+
Animazione delle proprietà CSS
+
Usa la cascata per capire in che modo il browser aggiorna una pagina e come l' animazione di differenti proprietà CSS può intaccare le prestazioni.
+
 
+
+
+ +
+
+
Javascript intensivo
+
Usa gli strumenti Frame rate e Cascata  per evidenziare problemi di prestazione dovuti ad un Javascript particolarmente pesante e come l'utilizzo dei worker può essere d' aiuto.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/it/tools/remote_debugging/index.html b/files/it/tools/remote_debugging/index.html new file mode 100644 index 0000000000..dfee871612 --- /dev/null +++ b/files/it/tools/remote_debugging/index.html @@ -0,0 +1,47 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

Puoi usare gli strumenti di sviluppo Firefox sul tuo computer per migliorare siti Web o applicazioni Web che funzionano con altri browser o con altre modalità di esecuzione. Gli altri browser potrebbero essere sullo stesso dispositivo come gli strumenti di sviluppo stessi o su un altro dispositivo, come un telefono cellulare collegato con una porta USB.

+ +

Le istruzioni dettagliate per connettere gli strumenti di sviluppo sono specificate nelle seguenti spiegazioni.

+ +

Modalità Gecko-based

+ +

Per prima cosa, puoi connettere gli strumenti di sviluppo alla modalità Gecco-base a piacere con Firefox Desktop, Firefox per Android, Firefox OS e Thunderbird.

+ +

 

+ +

 

+ +

 

+ +

 

+ +

Per fare questo puoi usare Firefox per aggiungere il Toolbox nel preocesso remoto, e il Toolbox verrà eseguito nella tua finestra. In questo momento il tools implementa le seguenti funzioni da remoto:

+ + + +

Firefox per Android

+ +

Remotely debugging Firefox for Android spiega come collegare Firefox, tramite USB, su un dispositivo Android.

+ +

Firefox per Metro

+ +

Remotely debugging Firefox for Metro spiega come usare Firefox per provare il codice in esecuzione su Windows 8 (Metro-style) Firefox.

+ +

Firefox OS

+ +

Using the App Manager spiega come collegare Firefox developer tools a Firefox OS simulator o a Firefox OS device.

+ +

Thunderbird

+ +

Remotely debugging Thunderbird spiega come Firefox eThunderbird possono essere usati per provare il codice in esecuzione su Thunderbird.

diff --git a/files/it/tools/visualizzazione_flessibile/index.html b/files/it/tools/visualizzazione_flessibile/index.html new file mode 100644 index 0000000000..09fd2cb08c --- /dev/null +++ b/files/it/tools/visualizzazione_flessibile/index.html @@ -0,0 +1,79 @@ +--- +title: Visualizzazione Flessibile +slug: Tools/Visualizzazione_Flessibile +tags: + - Design + - Firefox + - Guida + - Mobile + - Strumenti + - Sviluppo + - Sviluppo Web + - responsive +translation_of: Tools/Responsive_Design_Mode +--- +

Le interfacce web responsive si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La Visualizzazione Flessibile permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.

+ +

La schermata seguente mostra il contenuto di una pagina Wikipedia in versione mobile simulando uno schermo della dimensione di 320x480 pixel.

+ +

+ +

La Visualizzazione flessibile risulta conveniente perché permette di ridimensionare l'area del contenuto velocemente e con precisione.

+ +

Naturalmente potrebbe essere sufficiente soltanto ridimensionare la finestra del browser ma questo comporterebbe il ridimensionamento in piccolo anche delle altre schede in fase di navigazione, rendendo il browser più difficile da usare.

+ +

Mentre è attiva la Visualizzazione flessibile su una particolare scheda, è comunque possibile continuare a navigare normalmente i contenuti delle altre schede.

+ +

Attivazione e disattivazione

+ +

Ci sono tre modi per attivare la Visualizzazione flessibile:

+ + + +

e ci sono anche tre modi per disattivare la Visualizzazione flessibile:

+ + + +

Ridimensionamento

+ +

Si può ridimensionare l'area del contenuto in due modi:

+ + + +

Decidendo di ridimensionare tramite click e trascina, tenendo premuto il tasto CTRL (Command su OSX) è possibile rallentare la velocità di ridimensionamento al fine aumentare la precisione per scegliere la dimensione giusta.

+ +
+

Controlli della modalità Visualizzazione flessibile

+ +

+ +

Lungo la parte alta della finestra in modalità "Visualizzazione flessibile" ci sono cinque controlli:

+ +
+
Chiudi
+
Termina la modalità "Visualizzazione flessibile" e ritorna alla navigazione normale.
+
Selezione dimensione
+
Permette di scegliere un numero preimpostato di combinazioni larghezza x altezza, oppure di definirne una personalizzata.
+
Orientamento
+
Alterna l'orientamento verticale ed orizzontale simulando il cambio di orientamento del dispositivo.
+
Simula gli eventi touch
+
Attiva/disattiva la simulazione degli eventi touch: quando la simulazione è attivata, gli eventi del mouse vengono tradotti in eventi touch.
+
Screenshot
+
Cattura la schermata dell'area. Il salvataggio avviene nella posizione in cui vengono salvati anche gli altri Download.
+
User Agent personalizzato
+
Novità da Firefox 47. Immettere una stringa che corrisponde al nome di un User Agent. L'area risulta evidenziata e le richieste verranno effettuate utilizzando la stringa User Agent impostata. Questo è utile quando i siti restituiscono diversi contenuti in base al riconoscimento per mezzo di UA sniffing. Per tornare alla normalità è sufficiente svuotare il campo di testo.
+
+
+ +

 

diff --git a/files/it/tools/web_console/helpers/index.html b/files/it/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..d64e42e6ec --- /dev/null +++ b/files/it/tools/web_console/helpers/index.html @@ -0,0 +1,79 @@ +--- +title: Web Console Helpers +slug: Tools/Web_Console/Helpers +translation_of: Tools/Web_Console/Helpers +--- +

I comandi

+ +

la riga di comando JavaScript fornito dalla console web offre alcune funzioni di supporto built-in che rendono più semplici determinate attivita

+ +
+
$()
+
Sembra una stringa selettore CSS, restituendo il primo elemento che corrisponde. Equivalente a {{domxref ("document.querySelector ()")}} o chiama la funzione $ nella pagina, se esiste
+
$$()
+
Sembra una stringa selettore CSS, restituendo una serie di nodi DOM quella partita. Questo è come per {{domxref ("document.querySelectorAll ()")}}, ma restituisce un array invece di un {{domxref ("NodeList")}}.
+
$0
+
L'elemento attualmente ispezionato nella pagina.
+
$_
+
Memorizza il risultato dell'ultima espressione eseguito nella linea di comando console. Ad esempio, se si digita "2 + 2 <Enter>", quindi "$ _ <invio>", la console stampare 4.
+
$x()
+
Valuta un'espressione XPath e restituisce un array di nodi corrispondenti.
+
keys()
+
Dato un oggetto, restituisce un elenco dei tasti (o nomi di proprietà) su tale oggetto. Questa è una scorciatoia per Object.keys.
+
values()
+
Dato un oggetto, restituisce una lista dei valori di tale oggetto; serve come un compagno di chiavi ().
+
clear()
+
Cancella l'area di uscita della console.
+
inspect()
+
Dato un oggetto, si apre la finestra di ispezione oggetto per quell'oggetto.
+
pprint()
+
Formatta il valore specificato in modo leggibile; questo è utile per lo scarico del contenuto di oggetti e array.
+
help()
+
Visualizza la guida del testo. In realtà, in un delizioso esempio di ricorsione, che vi porterà a questa pagina.
+
cd()
+
+

Interruttore contesto di valutazione JavaScript per un iframe diversa all'interno della pagina. Questo helper accetta più modi diversi di identificazione del telaio per passare. È possibile fornire una delle seguenti:

+ +
    +
  • una stringa selettore che verrà passato al document.querySelector per individuare l'elemento iframe
    • +
  • l'elemento iframe stesso
    • +
  • la finestra di contenuto all'interno del iframe
    • +
+ +

Vedere lavorare con iframe

+
+
copy()
+
Nuovo in Firefox 38. Copia l'argomento negli appunti. Se l'argomento è una stringa, viene copiato così com'è. Se l'argomento è un nodo DOM, la sua outerHTML viene copiato. In caso contrario, JSON.stringify sarà chiamato sull'argomento, e il risultato sarà copiata negli appunti.
+
clearHistory()
+
.Nuovo in Firefox 39. Proprio come una normale linea di comando, la riga di comando della console ricorda i comandi che avete digitato. Utilizzare questa funzione per cancellare la cronologia dei comandi della console.
+
+ +

Si prega di fare riferimento alla API Console per maggiori informazioni sulla connessione dal contenuto.

+ +

variabili

+ +
+
tempN
+
L'opzione "Use in Console" in Impostazioni genera una variabile per un nodo denominato temp0, temp1, temp2, ecc riferimento al nodo.
+
+ +

esempi

+ +

Guardando il contenuto di un nodo DOM

+ +

Diciamo che hai un nodo DOM con il "titolo" ID. In realtà, questa pagina che stai leggendo in questo momento ha uno, in modo da poter aprire la console Web e provare questo momento.

+ +

Diamo uno sguardo ai contenuti di quel nodo utilizzando il $ () e ispezionare () funzioni:

+ +
inspect($("#title"))
+ +

Questo apre automaticamente l'ispettore oggetto, che mostra il contenuto del nodo DOM che corrisponde al selettore CSS "#title", che è ovviamente l'elemento con ID "titolo".

+ +

Dumping il contenuto di un nodo DOM

+ +

Questo è molto bello, se vi capita di essere seduti al browser esporre qualche problema, ma diciamo che stai debug remoto per un utente, e hanno bisogno di uno sguardo il contenuto di un nodo. Si può avere l'utente aprire la console Web e scaricare il contenuto del nodo nel registro, quindi copiare e incollare in una e-mail a voi, utilizzando la funzione pprint ():

+ +
pprint($("#title"))
+
+ +

Questo sputa fuori il contenuto del nodo in modo da poter dare un'occhiata. Naturalmente, questo può essere più utile con altri oggetti che un nodo DOM, ma si ottiene l'idea.

diff --git a/files/it/tools/web_console/index.html b/files/it/tools/web_console/index.html new file mode 100644 index 0000000000..1be4e7942e --- /dev/null +++ b/files/it/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: Web Console +slug: Tools/Web_Console +translation_of: Tools/Web_Console +--- +

La console web

+ +
    +
  1. Registra informazioni associate con la pagina web: richieste in rete, JavaScript, CSS, erori generici ed errori relativi alla sicurezza, warning e addizionali messaggi generati dal codice JavaScript che viene eseguito nel contesto della pagina
    2. +
  2. Abilita l'interazione con la pagina web eseguendo le istruzioni JavaScript nel contesto della pagina
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Aprire la console web
+
Come iniziare ad usare la console web
+
L'interprete della riga di comando
+
Come interagine con un documento usando la console web.
+
Dividere la console web
+
Usare console web insieme con altri strumenti.
+
+
+ +
+
+
Messagi della console web
+
Dettagli dei messaggi registrati nella console web.
+
Output arrichito
+
Vedi e interagisci con gli oggetti .
+
Scorciatoie da tastiera
+
Elenco delle scorciatoie da tastiera.
+
+
+
diff --git a/files/it/tools/webide/index.html b/files/it/tools/webide/index.html new file mode 100644 index 0000000000..2e2bad73d0 --- /dev/null +++ b/files/it/tools/webide/index.html @@ -0,0 +1,333 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
+

WebIDE è disponibile da Firefox 34 in poi.

+ +

Puoi attivare WebIDE anche in Firefox 33, semplicemente cambiando una preferenza: digita about:config nella barra degli indirizzi e imposta come vero il parametro di devtools.webide.enabled.

+
+ +
+

WebIDE è il sostituto di App Manager. Come App Manager,  ti permette di usare e fare il debug delle app di Firefox OS usando Firefox OS Simulator oppure un normale dispositivo con Firefox OS.

+ +

WebIDE include un ambiente di editing che ti permette di creare e sviluppare app per Firefox OS, fornisce una visione ad albero di tutti i file presenti nella tua app con la possibilità di modificarli e salvarli, e in più due template per aiutarti a iniziare.

+ +

Inoltre, WebIDE ti permette di connetere i Firefox Developer Tools ad altri browser, come Firefox per Android, Chrome per Android e Safari su iOS. Dai un'occhiata alla pagina Debug Remoto per ottenere informazioni su come connetterti ad un browser specifico.

+
+ +

Con WebIDE, per prima cosa devi impostare una o più runtime. Una runtime, è l'ambiente in cui testerai ed eseguirai il debug di un App. La runtime potrebbe essere un device con a bordo Firefox OS connesso tramite cavo USB, oppure Firefox OS Simulator installato sul computer.

+ +

Adesso, puoi creare un app, o aprire un app esistente. Se stai creando una nuova app, puoi partire da un template che include la struttura base delle cartelle e un modello contenente il minimo indispensabile per iniziare a sviluppare, oppure usare un template più corposo che mostra come usare una API privilegiata. Con WebIDE puoi modificare e salvare i file della tua app, che vengono mostratti in una struttura ad albero, attraverso un editor incorporato. Ovviamente non sei obbligato ad usare l'editor incorporato, puoi sviluppare l'app esternamente ed usare WebIDE solamente per eseguire il debug.

+ +

Infine, puoi installare l'app in  una delle runtime ed eseguirla. Durante l'esecuzione dell'app puoi osservarla e modificarla tramite gli strumenti per lo sviluppo come l'Inspector, la Console, Il Debugger Javascript e molto altro.

+ +

Requisiti di sistema

+ +

Per sviluppare ed eseguire il debug delle app utilizzando WebIDE, tutto ciò che ti serve è Firefox 23 o versioni successive.  Per testare l'app su un dispositivo vero e proprio, hai bisogno di un device che abbia Firefox OS 1.2 o versioni successive.

+ +

Puoi usare WebIDE solamente se il tuo sviluppo riguarda Firefox OS 1.2 o versioni successive.

+ +

Aprire WebIDE

+ +

WebIDE può essere aperto in tre modi:

+ + + +

+ +

Ecco WebIDE in azione:Il menu a cascata sulla sinistra denominato "Apri App", ti permette di aprire un app esistente o di crearne una nuova, mentre il menu sulla destra ti permette di scegliere una runtime o crearne una nuova.

+ +

I tasti esegui, stop e debug: appaiono solamente dopo aver aperto un app e selezionato una runtime.

+ +

Da Firefox 36, puoi modificare la grandezza del font in WebIDE utilizzando le seguenti scorciatoie da tastiera (usa il tasto Command al posto Control se stai usando OS X):

+ + + +

Impostare le runtime

+ +

Nel menu "Seleziona Runtime", le runtime sono raggruppate in tre tipi:

+ + + +

La prima volta che clicchi il menu, probabilmente non vedrai alcuna runtime:

+ +

Il resto di questa sezione mostra come fare per aggiungere delle runtime.

+ +

Connettersi ad un device Firefox OS

+ +

Prima di connetterti ad un device, ci sono alcune cose da fare:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Connecting to Firefox for Android

+ +

From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on connecting to Firefox for Android from WebIDE.

+ +

Before Firefox 36, you can connect to Firefox for Android without using WebIDE at all, or can use WebIDE by setting up a custom remote runtime.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

Remote runtime

+ +

With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command (example: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward (example: localhost:6000).

+ +

Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB prior to Firefox 36.

+ +

Valence-enabled runtimes

+ +

If you have the Valence add-on installed, you'll see three additional runtimes:

+ + + +

For instructions on how to connect to these runtimes, see the relevant entry in the Remote Debugging page.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

+ +
+

From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.

+
+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Unrestricted app debugging (including certified apps, main process, etc.)

+ +

You can run the debugger against the simulator, b2g desktop, or a real device.

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, when connecting to a real device we have a security policy in force:

+ + + +

To remove this restriction:

+ + + +

To disable DevTools restricted privileges, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/it/tools/webide/monitor/index.html b/files/it/tools/webide/monitor/index.html new file mode 100644 index 0000000000..a883cac837 --- /dev/null +++ b/files/it/tools/webide/monitor/index.html @@ -0,0 +1,160 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +tags: + - italiano tags +translation_of: Archive/WebIDE/Monitor +--- +
+

The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of Firefox OS apps and devices.

+
+ +

The WebIDE Monitor

+ +

The Monitor is able to display live, interactive graphs to visualize time series.

+ +

Available graphs

+ +

The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.

+ +

Unique Set Size

+ +

Unique Set Size

+ +

This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.

+ +

Displaying your own data

+ +

It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.

+ +

From a Firefox OS device

+ +

You can send data from a connected device by sending observer notifications.

+ +

Note: If you would like to do this in a certified app, please follow these instructions.

+ +

JavaScript

+ +

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+ +

You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:

+ +

const Services = require('Services');
+
+ var start = Date.now();
+ // code to benchmark
+ var stop = Date.now();
+
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop };
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

+ +

C++

+ +

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

+ +

You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:

+ +

#include <time.h>
+ #include "nsPrintfCString.h"
+ #include "nsIObserverService.h"
+
+ clock_t start = clock();
+ // code to benchmark
+ clock_t stop = clock();
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
+
+ nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
+ if (observerService) {
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);
+   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
+ }

+ +

From your computer

+ +

You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.

+ +

By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the devtools.webide.monitorWebSocketURL preference.

+ +

You can even make it accept data from your local network, or from anywhere on the Internet.

+ +

Node.js

+ +

TODO

+ +

Python

+ +

TODO

+ +

Supported formats

+ +

The Monitor accepts data in the form of JSON objects that generally look like this:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "value": 42,
+   "time": 1234567890
+ }

+ +

That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.

+ +

Arbitrary names

+ +

Unrecognized entries will be considered as curve name and value.

+ +

The smallest data packet you can send is something like:

+ +

{ "myCurve": 42 }

+ +

This will add a data point to "myCurve" in a graph with no name. The missing time will default to when the Monitor received the packet.

+ +

For better precision, it's probably better to always specify a timestamp for your data:

+ +

{
+   "current": 60,
+   "voltage": 500,
+   "time": 1234567890
+ }

+ +

Multiple values

+ +

In a single update, you can send data for multiple curves:

+ +

{
+   "graph": "myGraph",
+   "myCurve1": 50,
+   "myCurve2": 300,
+   "myCurve3": 9000,
+   "time": 1234567890
+ }

+ +

Or several data points for a single curve:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "values": [
+     { "time": 1234567890, "value": 42 },
+     { "time": 1234567981, "value": 51 }
+   ]
+ }

+ +

Multiple updates

+ +

And you can also send multiple data updates as an Array:

+ +

[
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+ ]

+ +

Punctual events

+ +

To mark special events in a graph with a vertical bar, add an event key to your update:

+ +

{
+   "graph": "myGraph",
+   "event": "myEvent",
+   "time": 1234567980
+ }

diff --git a/files/it/tools/webide/troubleshooting/index.html b/files/it/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..462bb661d2 --- /dev/null +++ b/files/it/tools/webide/troubleshooting/index.html @@ -0,0 +1,106 @@ +--- +title: 'WebIDE, risoluzione dei problemi' +slug: Tools/WebIDE/Troubleshooting +tags: + - 'etichette{locale}' +translation_of: Archive/WebIDE/Troubleshooting +--- +

Connettere un dispositivo Firefox OS tramite USB

+ +

Se stai tentando di connettere un dispositivo con Firefox Os al WebIDE e non viene mostrato, ecco alcuni consigli che puoi provare a mettere in atto.

+ + + +

Connettere un dispositivo Firefox OS tramite Wi-Fi

+ + + +

Connettersi a Firefox per Android

+ +

Se stai cercando di connettere il WebIDE con un dispositivo Android su cui esegui Firefox e questo non viene mostrato nel WebIDE ecco alcuni consigli che puoi provare a mettere in atto:

+ + + +

Connettersi ad altri browser (Chrome, Safari)

+ +

Il WebIDE usa il progetto Valence (conosciuto come Firefox Tools Adapter) per comunicare con altri browser, come  Chrome e  Safari. 

+ +

Se ha problemi a connettersi ad altri browser controlla i passaggi per impostare il tuo dispositivo per quel browser sulla pagina del progetto Valence.

+ +

Problemi con il debug delle app

+ +

Se non riesci a effettuare il debug di app certificate, di sistema o precedentemente installate potresti essere incappato in un problema di insufficenti permessi. Per saperne di più leggi la sezione debug senza restrizioni (app certificate, di sistema, processi, etc.).

+ +

Impossibile caricare la lista dei progetti

+ +

Se usi il WebIDE ed effettui il downgrade di Firefox ad una versione precedente e continui ad utilizzare lo stesso profilo potresti incontrare l'errore "Impossibile carica la lista dei progetti" quando apri il WebIDE nella versione precedente.

+ +

Questo problema può accadere quando il sistema di salvataggio dei progetti del WebIDE (IndexedDB) ha aggiornato o cambiato i suoi file durante l'uso della versione più recente di Firefox. La lista dei progetti è a tutti gli effetti inaccessibile alle versioni più vecchie di Firefox.

+ +

Non è stata persa nessuna informazione ma dovrai necessariamente continuare ad utilizzare la versione più recente di Firefox per recuperare la lista dei progetti.

+ +

Se vuoi veramente utilizzare la versione meno recente di Firefox puoi provare a cancelleare la lista dei progetti nel seguente modo, ma questa procedura non è supportata e potresti incorrere in altri problemi o altre perdite di informazioni.

+ +
    +
  1. Chiudi Firefox
    2. +
  2. Trova la tua cartella dei profili
    3. +
  3. Trova la cartella storage dentro alla cartella del tuo profilo
    4. +
  4. Nel contenuto della cartella ci saranno dei file o cartelle il cui nome comincia per4268914080AsptpcPerjo (una hash del nome del database)
    5. +
  5. Rimuovi tutte le cartelle ed i file in questione
    6. +
  6. Avvia Firefox ed il WebIDE nuovamente
    7. +
+ +

Abilitare i log

+ +

Puoi inoltre abilitare un logging senza filtri per raccogliere informazioni diagnostiche:

+ +
    +
  1. Apri about:config, aggiunti una nuova preferenza chiamata extensions.adbhelper@mozilla.org.sdk.console.logLevel, con il valore in forma di Stringa impostato ad all, ed imposta la proprietà extensions.adbhelper@mozilla.org.debug al valore true.
    2. +
  2. Nella pagina Add-ons Manager, disabilita e abilita nuovamente l'add-on ADB Helper.
    3. +
  3. Apri la Console del Browser e vedrai dei messaggi che hanno come prefisso la stringa adb. Se i messaggi non sono comprensibili per te  chiedi aiuto.
    4. +
+ +

Chiedere aiuto

+ +

Vai alla stanza #devtools su IRC e proveremo ad aiutarti.

-- cgit v1.2.3-54-g00ecf