diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/tools/webide | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/it/tools/webide')
-rw-r--r-- | files/it/tools/webide/index.html | 333 | ||||
-rw-r--r-- | files/it/tools/webide/monitor/index.html | 160 | ||||
-rw-r--r-- | files/it/tools/webide/troubleshooting/index.html | 106 |
3 files changed, 599 insertions, 0 deletions
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 +--- +<div class="geckoVersionNote"> +<p>WebIDE è disponibile da Firefox 34 in poi.</p> + +<p>Puoi attivare WebIDE anche in Firefox 33, semplicemente cambiando una preferenza: digita <a href="http://kb.mozillazine.org/About:config">about:config</a> nella barra degli indirizzi e imposta come <code>vero</code> il parametro di <code>devtools.webide.enabled</code>.</p> +</div> + +<div class="summary"> +<p>WebIDE è il sostituto di <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Come App Manager, ti permette di usare e fare il debug delle app di <a href="/en-US/Firefox_OS">Firefox OS</a> usando <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> oppure un normale dispositivo con Firefox OS.</p> + +<p>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.</p> + +<p>Inoltre, WebIDE ti permette di connetere i <a href="/en-US/docs/Tools">Firefox Developer Tools</a> ad altri browser, come Firefox per Android, Chrome per Android e Safari su iOS. Dai un'occhiata alla pagina <a href="/en-US/docs/Tools/Remote_Debugging">Debug Remoto</a> per ottenere informazioni su come connetterti ad un browser specifico.</p> +</div> + +<p>Con WebIDE, per prima cosa devi <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">impostare una o più runtime</a>. 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.</p> + +<p>Adesso, puoi <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">creare un app, o aprire un app esistente</a>. 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.</p> + +<p>Infine, puoi <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">installare l'app in una delle runtime ed eseguirla</a>. Durante l'esecuzione dell'app puoi osservarla e modificarla tramite gli strumenti per lo sviluppo come l'<a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, la <a href="/en-US/docs/Tools/Web_Console">Console</a>, Il<a href="/en-US/docs/Tools/Debugger"> Debugger Javascript</a> e molto altro.</p> + +<h2 id="Requisiti_di_sistema">Requisiti di sistema</h2> + +<p>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.</p> + +<p>Puoi usare WebIDE solamente se il tuo sviluppo riguarda Firefox OS 1.2 o versioni successive.</p> + +<h2 id="Aprire_WebIDE">Aprire WebIDE</h2> + +<p>WebIDE può essere aperto in tre modi:</p> + +<ul> + <li>Cliccando la voce "WebIDE" nel Menu Web Developer</li> + <li>Utilizzando la scorciatoia da tastiera Shift-F8.</li> + <li>Utilizzando l'icona dedicata nella barra degli strumenti. Quest'icona sarà sempre presente se utilizzi <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, e su qualsiasi versione di Firefox dalla 36 in poi dopo che hai apero WebIDE almeno una volta.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p>Ecco WebIDE in azione:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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.</p> + +<p>I tasti esegui, stop e debug: appaiono solamente dopo aver aperto un app e selezionato una runtime.</p> + +<p>Da Firefox 36, puoi modificare la grandezza del font in WebIDE utilizzando le seguenti scorciatoie da tastiera (usa il tasto <code>Command</code> al posto <code>Control</code> se stai usando OS X):</p> + +<ul> + <li><code>Ctrl +</code> aumenta grandezza font</li> + <li><code>Ctrl -</code> diminuisci grandezza font</li> + <li><code>Ctrl 0</code> reimposta grandezza font al valore di default</li> +</ul> + +<h2 id="Impostare_le_runtime">Impostare le runtime</h2> + +<p>Nel menu "Seleziona Runtime", le runtime sono raggruppate in tre tipi:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">Dispositivi USB</a>: usa un device Firefox OS connesso tramite USB. Questa opzione ti permette, da Firefox 36, di connetterti anche a<a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE"> Firefox per Android</a>.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulatori</a>: Le istanze del Simulatore di Firefox OS che hai installato sul tuo computer.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: usa questa opzione per connettere una runtime a WebIDE usando un nome e una porta precisa. Da Firefox 36 questo tipo di runtime è stato rinominato in "Altro". Se hai installato l'add-on <a href="/en-US/docs/Tools/Valence">Valence</a> questa sezione conterrà anche delle <a href="/en-US/docs/Tools/WebIDE#Valence-enabled_runtimes">runtime addizionali</a>.</li> +</ul> + +<p>La prima volta che clicchi il menu, probabilmente non vedrai alcuna runtime:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">Il resto di questa sezione mostra come fare per aggiungere delle runtime.</p> + +<h3 id="Connettersi_ad_un_device_Firefox_OS">Connettersi ad un device Firefox OS</h3> + +<p>Prima di connetterti ad un device, ci sono alcune cose da fare:</p> + +<ul> + <li><strong>controllare la tua versione di Firefox OS: </strong>assicurati che il tuo device abbia Firefox OS 1.2/Boot2Gecko 1.2 o successivi. Per controllare la versione, vai in <code>Impostazioni</code> > <code>Informazioni sul dispositivo</code> > <code>Software</code>. Se il tuo device non ha una versione supportata, leggi la<a href="/en-US/Firefox_OS/Developer_phone_guide"> Guida al Telefono per Sviluppatori</a> e segui le istruzioni per fare l'upgrade.</li> + <li><strong>abilita il debug remoto: </strong>nell'app Impostazioni andare in Informazioni<code> Dispositivo > Altre Informazioni > Sviluppatore</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 e precedenti: "Debug Remoto" è una semplice casella di controllo. Spuntala.</li> + <li>Firefox OS 1.4 e successive: "Debug Remoto" richiede di abilitare solo ADB o ADB e DevTools. Selezionare "ADB e DevTools".</li> + </ul> + </li> + <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>if you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li> +</ul> + +<div class="note"> +<p><strong>Linux only:</strong></p> + +<ul> + <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Windows only:</strong></p> + +<ul> + <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>if WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>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":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h3> + +<p>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 <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p> + +<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE#Remote_runtime">custom remote runtime</a>.</p> + +<h3 id="Adding_a_Simulator">Adding a Simulator</h3> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">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.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h3 id="Custom_runtimes">Custom runtimes</h3> + +<h4 id="Remote_runtime">Remote runtime</h4> + +<p>With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. 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.</p> + +<p>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 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p> + +<p>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. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p> + +<h4 id="Valence-enabled_runtimes">Valence-enabled runtimes</h4> + +<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p> + +<ul> + <li>Chrome on Android</li> + <li>Safari on iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>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.</p> + +<h3 id="Runtime_actions">Runtime actions</h3> + +<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p> + +<ul> + <li><strong>Runtime Info</strong>: information on the current runtime</li> + <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li> + <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p> + +<h2 id="Creating_and_opening_apps">Creating and opening apps</h2> + +<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> + +<h3 id="Create_a_new_app">Create a new app</h3> + +<p>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".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> + +<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, 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.</p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_packaged_app">Open a packaged app</h3> + +<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_hosted_app">Open a hosted app</h3> + +<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h2 id="Editing_apps">Editing apps</h2> + +<p>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.</p> + +<h3 id="The_app_summary_page">The app summary page</h3> + +<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> + +<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p> + +<h3 id="Manifest_validation">Manifest validation</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> + +<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p> + +<h3 id="The_source_editor">The source editor</h3> + +<p>WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p> + +<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Code_completion">Code completion</h4> + +<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> + +<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p> + +<h4 id="Saving_files">Saving files</h4> + +<p>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).</p> + +<h3 id="Removing_projects">Removing projects</h3> + +<p>To remove an app from WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p> + +<h2 id="Running_and_debugging_apps">Running and debugging apps</h2> + +<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;"></p> + +<div class="geckoVersionNote"> +<p>From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.</p> +</div> + +<p>Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. 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.</p> + +<h3 id="Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</h3> + +<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p> + +<p>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 <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> + +<p><br> + However, when connecting to a real device we have a security policy in force:</p> + +<ul> + <li>On devices running Firefox OS versions up to 2.1, all installed apps on device that are <strong>not</strong> certified apps (so privileged and web / regular apps) appear in "Runtime Apps" by default.</li> + <li>On Firefox 2.1 and above, we changed this so that only apps installed via DevTools / WebIDE appear in "Runtime Apps", regardless of app type. We did this to protect potentially sensitive data that could be present in apps.</li> +</ul> + +<p>To remove this restriction:</p> + +<ul> + <li>The device must be running a development build of Firefox OS 1.2+</li> + <li>You must disable the <code>DevTools restricted privileges</code> setting.</li> +</ul> + +<p>To disable <code>DevTools restricted privileges</code>, connect to the runtime, and then, in the menu, go to <code>Runtime > Runtime Info</code>. The path then differs depending on what you are debugging against:</p> + +<ul> + <li>Real device + <ul> + <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable unrestricted app debugging (Firefox OS will restart). You may need to select your device again in the 'Select Runtime' drop down.</li> + </ul> + </li> + <li>Simulator + <ul> + <li>The simulators come with unrestricted app debugging enabled by default.</li> + </ul> + </li> + <li>B2G desktop + <ul> + <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable unrestricted app debugging.</li> + </ul> + </li> +</ul> + +<p>Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.</p> + +<h2 id="Monitoring_performance">Monitoring performance</h2> + +<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p> + +<ul> + <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li> + <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li> +</ul> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>If you have any problems working with WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<p> </p> + +<p> </p> 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 +--- +<div class="summary"> +<p>The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of <a href="/en-US/Firefox_OS">Firefox OS</a> apps and devices.</p> +</div> + +<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="width: 800px; height: 464px;"></p> + +<p>The Monitor is able to display live, interactive graphs to visualize time series.</p> + +<h2 id="Available_graphs">Available graphs</h2> + +<p>The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.</p> + +<h3 id="Unique_Set_Size">Unique Set Size</h3> + +<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="width: 879px; height: 310px;"></p> + +<p>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.</p> + +<h2 id="Displaying_your_own_data">Displaying your own data</h2> + +<p>It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.</p> + +<h3 id="From_a_Firefox_OS_device">From a Firefox OS device</h3> + +<p>You can send data from a connected device by sending observer notifications.</p> + +<p>Note: If you would like to do this in a <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">certified app</a>, please follow <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">these instructions</a>.</p> + +<h4 id="JavaScript">JavaScript</h4> + +<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p> + +<p>You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:</p> + +<p><code>const Services = require('Services');<br> + <br> + var start = Date.now();<br> + // code to benchmark<br> + var stop = Date.now();<br> + <br> + var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br> + Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p> + +<h4 id="C">C++</h4> + +<p><code>observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p> + +<p>You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:</p> + +<p><code>#include <time.h><br> + #include "nsPrintfCString.h"<br> + #include "nsIObserverService.h"<br> + <br> + clock_t start = clock();<br> + // code to benchmark<br> + clock_t stop = clock();<br> + double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br> + <br> + nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();<br> + if (observerService) {<br> + nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br> + nsAutoString data = NS_ConvertUTF8toUTF16(str);<br> + observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br> + }</code></p> + +<h3 id="From_your_computer">From your computer</h3> + +<p>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.</p> + +<p>By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the <code>devtools.webide.monitorWebSocketURL</code> preference.</p> + +<p>You can even make it accept data from your local network, or from anywhere on the Internet.</p> + +<h4 id="Node.js">Node.js</h4> + +<p><code>TODO</code></p> + +<h4 id="Python">Python</h4> + +<p><code>TODO</code></p> + +<h3 id="Supported_formats">Supported formats</h3> + +<p>The Monitor accepts data in the form of JSON objects that generally look like this:</p> + +<p><code>{</code><br> + <code> "graph": "myGraph",<br> + "curve": "myCurve",<br> + "value": 42,<br> + "time": 1234567890<br> + }</code></p> + +<p>That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.</p> + +<h4 id="Arbitrary_names">Arbitrary names</h4> + +<p>Unrecognized entries will be considered as curve name and value.</p> + +<p>The smallest data packet you can send is something like:</p> + +<p><code>{ "myCurve": 42 }</code></p> + +<p>This will add a data point to "myCurve" in a graph with no name. The missing <code>time</code> will default to when the Monitor received the packet.</p> + +<p>For better precision, it's probably better to always specify a <code>timestamp</code> for your data:</p> + +<p><code>{<br> + "current": 60,</code><br> + <code> "voltage": 500,<br> + <code>"time": 1234567890</code><br> + }</code></p> + +<h4 id="Multiple_values">Multiple values</h4> + +<p>In a single update, you can send data for multiple curves:</p> + +<p><code>{<br> + "graph": "myGraph",<br> + "myCurve1": 50,<br> + "myCurve2": 300,<br> + "myCurve3": 9000,<br> + "time": 1234567890<br> + }</code></p> + +<p>Or several data points for a single curve:</p> + +<p><code>{<br> + "graph": "myGraph",<br> + "curve": "myCurve",<br> + "values": [<br> + { "time": 1234567890, "value": 42 },<br> + { "time": 1234567981, "value": 51 }<br> + ]<br> + }</code></p> + +<h4 id="Multiple_updates">Multiple updates</h4> + +<p>And you can also send multiple data updates as an Array:</p> + +<p><code>[<br> + { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br> + { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br> + ]</code></p> + +<h4 id="Punctual_events">Punctual events</h4> + +<p>To mark special events in a graph with a vertical bar, add an <code>event</code> key to your update:</p> + +<p><code>{<br> + "graph": "myGraph",<br> + "event": "myEvent",<br> + "time": 1234567980<br> + }</code></p> 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 +--- +<h2 id="Connettere_un_dispositivo_Firefox_OS_tramite_USB">Connettere un dispositivo Firefox OS tramite USB</h2> + +<p>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.</p> + +<ul> + <li>Controlla la tua versione di Firefox OS: assicurati che la versione sia<strong> Firefox OS 1.2/Boot2Gecko 1.2 o superiore</strong>. Per controllare la versione, apri la app Impostazioni e seleziona <code>Info sul dispositivo > Software</code>. Se la versione non è abbastanza recente, cerca il tuo dispositivo nella <a href="/en-US/Firefox_OS/Developer_phone_guide">guida ai dispositivi per sviluppatori</a> e segui le instruzioni per aggiornare il tuo dispositivo.</li> + <li>Attiva il debug remoto: nella app Impostazioni del dispositivo seleziona <code>Info sul dispositivo > Altre informazioni > Sviluppatore</code> . + <ul> + <li>Firefox OS 1.3 e precedenti: "Debug Remoto" è attivabile tramite una casella. Spunta la casella.</li> + <li>Firefox OS 1.4 e successivi: il "Debug Remoto" può essere richiesto per ADB o per ADB e gli stumenti per lo sviluppo. Seleziona <strong>ADB e strumenti per lo sviluppo</strong> per utilizzare il WebIDE.</li> + </ul> + </li> + <li>Disattiva il blocco schermo sul tuo dispostivo: nella app Impostazioni del dispositivo, seleziona <code>Blocca Schermo</code> e disattiva l'opzione Blocca Schermo. Disattivare il blocco schermo impedisce al telefono di perdere la connessione con il debugger.</li> + <li>Assicurati di non aver connesso contemporaneamente un dispositivo Android ed un dispositivo Firefox OS al computer.</li> + <li>Controlla il cavo USB che stai usando: + <ul> + <li>Prova ad staccare ed reinserire il cavo USB.</li> + <li>Prova ad inserire il cavo USB in porte differenti nel tuo computer. Potrebbe essere necessario alternare le porte.</li> + <li>Prova a utilizzare un altro cavo USB. I cavi forniti con i telefoni sono spesso di bassa qualità e malfunzionanti.</li> + <li>Prova un cavo USB più corto. I cavi USB lunghi non funzionano molto bene.</li> + </ul> + </li> + <li> Prova a disattivare e riattivare il debug remoto nell'app Impostazioni sul tuo dispositivo.</li> + <li>Se <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">hai disattivato l'addon ADB Helper</a> hai anche eseguito con successo il comando <code>adb forward</code> ?</li> + <li>Se utilizzi Linux sei sicuro di avere aggiunto la regola udev al file come richiesto al passo 3 della guida per <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">impostare un dispositivo Android</a>. Lo <code>idVendor</code> per utilizzare un Geeksphone è "05c6", in <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">questa pagina</a> puoi trovare la lista degli altri <code>idVendor</code> che puoi utilizzare. Una volta aggiunta la regola <code>udev</code> esegui il comando <code>adb devices</code>, se il tuo dispositivo non appare nella lista o appare la scritta <code>"no permission"</code> devi riavviare il server adb (<code>adb kill-server; adb start-server</code>).</li> + <li>Se utilizzi Windows: + <ul> + <li>devi installare i driver per il tuo dispositivo come richiesto al passo 3 della guida per <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">impostare un dispositivo Android</a>. Puoi trovare i driver per il dispositivo Geeksphone sul <a class="external external-icon" href="http://downloads.geeksphone.com/">sito di Geeksphone</a> ed i driver per un dispositivo Google su <a href="http://developer.android.com/sdk/win-usb.html">Google web site</a>. Di defailt Windows 8 non permette di installare dei driver non firmati. Leggi questo tutorial su <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Come installare un driver non firmato su Windows 8"</a>.</li> + <li>Se il WebIDE non riesce a mostrare il tuo dispositivo dopo aver seguito questi passaggi potresti modificare il file <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini</a>.</li> + </ul> + </li> + <li>Se utilizzi EasyTether (OS X), dovrai rimuovere o disabilitare EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> +</ul> + +<h2 id="Connettere_un_dispositivo_Firefox_OS_tramite_Wi-Fi">Connettere un dispositivo Firefox OS tramite Wi-Fi</h2> + +<ul> + <li>Controlla le versioni del software: il debug tramite Wi-Fi richiede Firefox 39 o più recente ed un dispositivo con Firefox OS 3.0 del 2015-03-27 o più recente.</li> +</ul> + +<h2 id="Connettersi_a_Firefox_per_Android">Connettersi a Firefox per Android</h2> + +<p>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:</p> + +<ul> + <li>Controlla la versione di Firefox per Android, assicurati che <strong> sia superiore a Firefox 36</strong>. Il WebIDE non mostra le versioni meno recenti automaticamente e dovrai abilitare il <code>port forwarding</code> e connettere il dispositivo nuovamente - segui le instruzioni <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">qui</a>.</li> + <li>Assicurati di aver abilitato il debug remoto in Firefox: apri Firefox per Android, apri il suo menu, seleziona <code>Impostazioni</code> e spunta la casella in <code>Strumenti di sviluppo > Debug remoto</code>.</li> + <li>Assicurati che il Debug USB sia permesso nelle impostazioni del dispositivo.</li> + <li>Se continui a non rilevare il tuo dispositivo nella finestra nel WebIDE prova ad spuntare di nuovo la casella <code>Debug remoto</code> sul dispositivo. + <ul> + <li>Disconnetti il tuo dispositivo dal computer e disabilita il <code>Debug remoto</code> sul telefono.</li> + <li>Connetti il dispositivo e abilita il <code>Debug remoto</code> - questo riavvia il debugger sul telefono.</li> + <li>Prova a connetterti tramite il WebIDE nuovamente.</li> + </ul> + </li> +</ul> + +<h2 id="Connettersi_ad_altri_browser_(Chrome_Safari)">Connettersi ad altri browser (Chrome, Safari)</h2> + +<p>Il WebIDE usa il progetto<a class="here" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android"> </a><a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (conosciuto come Firefox Tools Adapter)</a> per comunicare con altri browser, come Chrome e Safari. </p> + +<p>Se ha problemi a connettersi ad altri browser controlla i passaggi per impostare il tuo dispositivo per quel browser sulla pagina del <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">progetto Valence.</a></p> + +<h3 id="Problemi_con_il_debug_delle_app">Problemi con il debug delle app</h3> + +<p>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<a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29"> debug senza restrizioni (app certificate, di sistema, processi, etc.)</a>.</p> + +<h2 id="Impossibile_caricare_la_lista_dei_progetti">Impossibile caricare la lista dei progetti</h2> + +<p>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.</p> + +<p>Questo problema può accadere quando il sistema di salvataggio dei progetti del WebIDE (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) 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.</p> + +<p>Non è stata persa nessuna informazione ma dovrai necessariamente continuare ad utilizzare la versione più recente di Firefox per recuperare la lista dei progetti.</p> + +<p>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.</p> + +<ol> + <li>Chiudi Firefox</li> + <li>Trova la tua cartella dei profili</li> + <li>Trova la cartella <code>storage</code> dentro alla cartella del tuo profilo</li> + <li>Nel contenuto della cartella ci saranno dei file o cartelle il cui nome comincia per<code>4268914080AsptpcPerjo</code> (una hash del nome del database)</li> + <li>Rimuovi tutte le cartelle ed i file in questione</li> + <li>Avvia Firefox ed il WebIDE nuovamente</li> +</ol> + +<h2 id="Abilitare_i_log">Abilitare i log</h2> + +<p>Puoi inoltre abilitare un logging senza filtri per raccogliere informazioni diagnostiche:</p> + +<ol start="1" style="list-style-type: decimal;"> + <li>Apri <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, aggiunti una nuova preferenza chiamata <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, con il valore in forma di Stringa impostato ad <code>all</code>, ed imposta la proprietà <code>extensions.adbhelper@mozilla.org.debug</code> al valore <code>true</code>.</li> + <li>Nella pagina <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disabilita e abilita nuovamente l'add-on ADB Helper.</li> + <li>Apri la <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Console del Browser</a> e vedrai dei messaggi che hanno come prefisso la stringa <code>adb</code>. Se i messaggi non sono comprensibili per te <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">chiedi aiuto</a>.</li> +</ol> + +<h2 id="Chiedere_aiuto">Chiedere aiuto</h2> + +<p>Vai <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">alla stanza #devtools su IRC</a> e proveremo ad aiutarti.</p> |