diff options
Diffstat (limited to 'files/ar/tools/webide')
| -rw-r--r-- | files/ar/tools/webide/index.html | 467 | ||||
| -rw-r--r-- | files/ar/tools/webide/troubleshooting/index.html | 107 |
2 files changed, 574 insertions, 0 deletions
diff --git a/files/ar/tools/webide/index.html b/files/ar/tools/webide/index.html new file mode 100644 index 0000000000..906c5e9912 --- /dev/null +++ b/files/ar/tools/webide/index.html @@ -0,0 +1,467 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +<div class="geckoVersionNote"> +<p>WebIDE is available from Firefox 34 onwards.</p> +</div> + +<div class="summary"> +<p>WebIDE is the replacement for the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Like the App Manager, it enables you to run and debug <a href="/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.</p> + +<p>Finally, WebIDE enables you to connect the <a href="/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">create an app, or open an existing app</a>. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - 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> and so on - to examine and modify the running app.</p> + +<h2 id="System_requirements">System requirements</h2> + +<p>To develop and debug apps using WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.</p> + +<p>You can only use WebIDE for Firefox OS if you're targeting Firefox OS 1.2 or later.</p> + +<h2 id="Opening_WebIDE">Opening WebIDE</h2> + +<p>There are three ways to open WebIDE:</p> + +<ul> + <li>In the Web Developer menu, click on the "WebIDE" entry and WebIDE opens.</li> + <li>Use the keybinding Shift-F8.</li> + <li>A dedicated icon in the Firefox toolbar. This is always present if you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, and with any Firefox from version 36 onwards it appears after you've opened the WebIDE once:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="width: 897px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Here's what the WebIDE looks like:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;">The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p> + +<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p> + +<p>From Firefox 36, you can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size</li> + <li><code>Ctrl -</code> decreases font size</li> + <li><code>Ctrl 0</code> resets the font size to the default</li> +</ul> + +<h2 id="Setting_up_runtimes">Setting up runtimes</h2> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect a runtime to WebIDE using an arbitrary name and port. From Firefox 36, this runtime type is renamed "Other". If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, this section will also list the <a href="/en-US/docs/Tools/WebIDE#Valence-enabled_runtimes">additional runtimes it enables</a>.</li> +</ul> + +<p>The first time you click the dropdown, you might not see any runtimes here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="width: 723px; height: 564px; display: block; margin-left: auto; margin-right: auto;">The rest of this section describes how you can add some runtimes.</p> + +<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and 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="width: 710px; height: 562px; display: block; margin-left: auto; margin-right: auto;"></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="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;">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="width: 712px; height: 559px; display: block; margin-left: auto; margin-right: auto;">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_menu_items">Runtime menu items</h3> + +<p>When a runtime is selected, the Runtimes dropdown menu has up to five extra items:</p> + +<dl> + <dt><strong>Runtime Info</strong></dt> + <dd>Information on the current runtime</dd> + <dt><strong>Permissions Table</strong></dt> + <dd>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 (!)</dd> +</dl> + +<dl> + <dt><strong>Device Preferences</strong></dt> + <dd>A table listing, and letting you edit, the preferences that are made available in the runtime via the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService">Preferences service</a>. These are platform-level configuration values exposing the same set of data as Firefox's about:config (but for the device). Because these preferences are highly security-sensitive, you need to disable the <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">DevTools restricted privileges setting</a> before you can modify them.</dd> + <dt><strong>Device Settings</strong> (new in Firefox 38/Firefox OS 3)</dt> + <dd>A table listing, and letting you edit, the settings that can be controlled in the Firefox OS Settings app. Most things on the device which have a UI control to change (volume, alarm, etc.) are found in Device Settings. Because these settings are less sensitive than the device preferences, you can modify them without removing the restricted privileges setting. However, since this feature is new in Gecko 38 you need the WebIDE in Firefox 38 and a nightly build of Firefox OS or the Simulator.</dd> + <dt><strong>Screenshot</strong></dt> + <dd>A command to take a screenshot from the runtime.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10185/webide-runtimes.png" style="width: 833px; height: 601px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p> </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="width: 723px; height: 562px; display: block; margin-left: auto; margin-right: auto;"></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="width: 739px; height: 591px; display: block; margin-left: auto; margin-right: auto;"></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="width: 846px; height: 625px; display: block; margin-left: auto; margin-right: auto;"></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="width: 847px; height: 626px; display: block; margin-left: auto; margin-right: auto;"></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="width: 849px; height: 628px; display: block; margin-left: auto; margin-right: auto;">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="width: 867px; height: 653px; display: block; margin-left: auto; margin-right: auto;"></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="width: 872px; height: 652px; display: block; margin-left: auto; margin-right: auto;"></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_a_custom_build_step">Running a custom build step</h2> + +<div class="geckoVersionNote"> +<p>New in Firefox 37.</p> +</div> + +<p>For some use cases you need to run a custom command before pushing your app to the device. For example, you might want to satisfy JavaScript dependencies or minify CSS, or use WebIDE to develop Gaia apps or Cordova apps, both of which require a custom build step.</p> + +<p>From Firefox 37 you can do this by including a file called "package.json" in the root of your app. This is the same file that's used to <a href="https://docs.npmjs.com/files/package.json">package a node.js library</a>, so you might already have one in the root of your project. If you don't, you can create one for this purpose.</p> + +<p>Inside package.json, WebIDE looks for a property called "webide". The table below summarises the syntax of "webide":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 10%;"><code>webide</code></td> + <td style="width: 10%;"> </td> + <td style="width: 10%;"> </td> + <td style="width: 70%;"> + <p>Object containing instructions for WebIDE.</p> + + <p>This may contain two properties, both optional: "<code>prepackage</code>" and "<code>packageDir</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>prepackage</code></td> + <td> </td> + <td> + <p>Specifies a command-line command for WebIDE to run before pushing the app to the runtime.</p> + + <p>This may be a string, in which case the command is just executed as-is, or may be an object which must contain "<code>command</code>", and may contain any of "<code>env</code>", "<code>args</code>", and "<code>cwd</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>command</code></td> + <td> + <p>The command to execute in the command shell.</p> + + <p>For example: "<code>echo</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>env</code></td> + <td> + <p>Any environment variables to set.</p> + + <p>This is specified as an array of strings in the form "NAME=value". For example: <code>["NAME=world"]</code></p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>args</code></td> + <td> + <p>Any arguments to pass along with the command.</p> + + <p>This is specified as an array of strings.</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>cwd</code></td> + <td> + <p>The directory from which to run the command.</p> + + <p>This may be absolute or relative to the current directory.</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>packageDir</code></td> + <td> </td> + <td> + <p>The directory from which WebIDE should look for the app to push to the runtime.</p> + + <p>Use this if you want the project in WebIDE to be the source from which to build a packaged app. The build step specified in <code>prepackage</code> would place the built app in an output directory, you will specify the output directory in <code>packageDir</code>, and WebIDE will install the app from that output directory rather than the project directory.</p> + + <p>This property is optional, and if it's omitted WebIDE will package the app from the project root, just as if package.json was omitted.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Examples">Examples</h3> + +<p>A "package.json" to build a Gaia app:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": { + "command": "make", + "env": ["APP=settings"], + "cwd": "../.." + }, + "packageDir": "../../build_stage/settings/" + } +}</pre> + +<p>A "package.json" for working with Cordova:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": "cordova prepare", + "packageDir": "./platforms/firefoxos/www" + } +}</pre> + +<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="width: 1314px; height: 718px; display: block; margin-left: auto; margin-right: auto;">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="width: 1310px; height: 688px; display: block; margin-left: auto; margin-right: auto;"></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="width: 1302px; height: 681px; display: block; margin-left: auto; margin-right: auto;"></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> + +<div class="note"> +<p><strong>Note</strong>: As indicated above, to enable unrestricted privileges on a real device through WebIDE you'll need a rooted device. There is however a developer setting available in Firefox OS 2.2 onwards called <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Reset_and_enable_full_DevTools">Reset and enable full DevTools</a> — when activated this will wipe all user data (for security reasons), reset the device, and enable unrestricted priviledges on <em>any</em> device.</p> +</div> + +<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/ar/tools/webide/troubleshooting/index.html b/files/ar/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..9841f92d7d --- /dev/null +++ b/files/ar/tools/webide/troubleshooting/index.html @@ -0,0 +1,107 @@ +--- +title: WebIDE Troubleshooting +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +<h2 id="توصيل_جهاز_فايرفوكس_OS"><u><em><strong><font><font>توصيل جهاز فايرفوكس OS</font></font></strong></em></u></h2> + +<p><font><font>إذا كنت تحاول توصيل جهاز فايرفوكس OS لWebIDE وأنها لا تظهر، وهنا بعض الأشياء التي يمكنك تجربتها:</font></font></p> + +<ul> + <li><font><font>تحقق من النسخة فايرفوكس OS: تأكد من جهازك تشغيل </font></font><strong><font><font>فايرفوكس OS 1.2 / 1.2 Boot2Gecko أو </font></font></strong><font><font>أعلى. </font><font>التحقق من إصدار، انتقل إلى إعدادات التطبيق على الجهاز، ثم </font></font><code><font><font>معلومات الجهاز> </font></font></code><font><font>البرامج. </font><font>إذا لم يكن لديك نسخة عالية بما فيه الكفاية، العثور على جهازك في </font></font><a href="/en-US/Firefox_OS/Developer_phone_guide"><font><font>دليل الهاتف المطور</font></font></a><font><font> واتبع الإرشادات لرفع مستواها.</font></font></li> + <li><font><font>تمكين تصحيح البعيد: في التطبيق إعدادات على الجهاز، انتقل إلى </font></font><code><font><font>المعلومات الأجهزة> مزيد من المعلومات> </font></font></code><font><font>المطور.</font></font> + <ul> + <li><font><font>فايرفوكس OS 1.3 و في وقت سابق: "التصحيح عن بعد" هو مجرد مربع بسيط. </font><font>ضع علامة في المربع.</font></font></li> + <li><font><font>فايرفوكس OS 1.4 و في وقت لاحق: "التصحيح عن بعد" يطلب منك لتمكين للتو ADB، أو لADB وDevTools. </font><font>حدد "ADB وDevTools".</font></font></li> + </ul> + </li> + <li><font><font>تعطيل قفل الشاشة على جهازك: في التطبيق إعدادات على الجهاز، انتقل إلى </font></font><code><font><font>شاشة قفل</font></font></code><font><font> وإلغاء تحديد </font></font><code><font><font>قفل الشاشة</font></font></code><font><font> مربع. </font><font>هذا هو فكرة جيدة لأنه عندما يحصل على قفل الشاشة، يضيع اتصال الهاتف، مما يعني أنها لم تعد متوفرة من أجل التصحيح.</font></font></li> + <li><font><font>تأكد من أنك لم توصيل الهاتف الروبوت في نفس الوقت الهاتف فايرفوكس OS لجهاز الكمبيوتر الخاص بك.</font></font></li> + <li><font><font>التحقق من كابل USB الذي تستخدمه:</font></font> + <ul> + <li><font><font>محاولة الفصل وreplugging في كابل USB.</font></font></li> + <li><font><font>حاول توصيل كابل USB بمنفذ مختلفة على جهاز الكمبيوتر الخاص بك. </font><font>قد يكون لديك بالتناوب بين الموانئ.</font></font></li> + <li><font><font>حاول كبل USB مختلف. </font><font>الكابلات التي تأتي مع الهواتف وغالبا ما تكون ذات نوعية رديئة وتفشل في كثير من الأحيان.</font></font></li> + <li><font><font>حاول كبل USB أقصر. </font><font>من المعروف أن كابلات USB طويلة لا تعمل بشكل جيد جدا.</font></font></li> + </ul> + </li> + <li><font><font>حاول تعطيل وإعادة تمكينه التصحيح عن بعد في تطبيق الإعدادات على الجهاز.</font></font></li> + <li><font><font>إذا </font></font><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes"><font><font>قمت بتعطيل ADB الملحق </font></font></a><font><font>مساعد، </font><font>هل بنجاح تشغيل </font></font><code><font><font>إلى الأمام ADB</font></font></code><font><font> الأمر؟</font></font></li> + <li><font><font>إذا كنت تستخدم لينكس:</font></font> + <ul> + <li><font><font>تأكد من أنك أضاف </font></font><code><font><font>ديف</font></font></code><font><font> ملف النظام، كما هو موثق في الخطوة 3 من هذا الدليل </font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font>لإنشاء </font><font>جهاز </font></font></a><font><font>الروبوت. </font></font><code><font><font>وidVendor</font></font></code><font><font> السمة لاستخدامه في Geeksphone هو "05c6"، </font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds"><font><font>والصفحة </font><font>هذه</font></font></a><font><font> القوائم الأخرى </font></font><code><font><font>idVendor</font></font></code><font><font> القيم. </font><font>المقبل، تشغيل </font></font><code><font><font>الأجهزة بنك التنمية الاسيوى</font></font></code><font><font> لتأكد من أن الجهاز هو في القائمة. </font><font>اذا كان الجهاز يبدو أن "لا إذن"، تحتاج إلى إعادة تشغيل الخادم مصرف التنمية الآسيوي (مثل </font></font><code><font><font>بنك التنمية الاسيوى قتل خادم، بنك التنمية الآسيوي بداية </font></font></code><font><font>خادم).</font></font></li> + </ul> + </li> + <li><font><font>إذا كنت تستخدم ويندوز:</font></font> + <ul> + <li><font><font>تحتاج إلى تثبيت برامج التشغيل، كما هو موثق في الخطوة 3 من هذا الدليل </font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font>لإنشاء </font><font>جهاز </font></font></a><font><font>الروبوت. </font><font>يمكنك العثور على برامج تشغيل لأجهزة Geeksphone على </font></font><a class="external external-icon" href="http://downloads.geeksphone.com/"><font><font>موقع على شبكة الإنترنت Geeksphone</font></font></a><font><font> والسائقين لأجهزة جوجل على </font></font><a href="http://developer.android.com/sdk/win-usb.htm"><font><font>موقع جوجل على شبكة </font></font></a><font><font>الإنترنت. </font><font>ويندوز 8 بشكل افتراضي لن تسمح لك تثبيت برامج التشغيل غير الموقعة. </font><font>نرى هذا البرنامج التعليمي على </font></font><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"><font><font>"كيفية تثبيت برنامج تشغيل غير الموقعة على ويندوز </font></font></a><font><font>8".</font></font></li> + <li><font><font>إذا WebIDE لا تستطيع رؤية الجهاز بعد اتباع جميع الخطوات، قد تضطر إلى </font></font><a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"><font><font>تعديل </font></font></a><font><font>adb_usb.ini.</font></font></li> + </ul> + </li> + <li><strong><font><font>اذا أنت </font></font></strong> + <ul> + <li><strong><font><font>إذا كنت تحصل أخطاء مهلة ربط إلى كل من المحاكاة والأجهزة الحقيقية، قد يكون غير قادر على الاتصال LOCALHOST بسبب الخ / ملف فارغ / تستضيف. </font><font>يمكنك حل المشكلة عن طريق ملء الملف والكشف ذاكرة التخزين المؤقت DNS </font></font><a href="https://discussions.apple.com/thread/2729411?tstart=0"><font><font>كما هو موضح </font></font></a><font><font>هنا.</font></font></strong></li> + <li><strong><font><font>إذا كنت من مستخدمي EasyTether، وسوف تحتاج إلى إزالة أو تعطيل EasyTether: </font></font><code><font><font>سودو kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</font></font></code></strong></li> + </ul> + </li> +</ul> + +<h3 id="التصحيح_غير_المقيد_(بما_في_ذلك_التطبيقات_المعتمدة،_المدمج_في_تطبيقات،_تطبيقات_مثبتة_مسبقا_على_الجهاز)"><font><font>التصحيح غير المقيد (بما في ذلك التطبيقات المعتمدة، المدمج في تطبيقات، تطبيقات مثبتة مسبقا على الجهاز)</font></font></h3> + +<p><font><font>إذا كنت تجد أنه لا يمكن تصحيح التطبيقات المعتمدة، المدمج في تطبيقات، أو تطبيقات مثبتة مسبقا على الجهاز الحقيقي، فإنك قد تكون قادمة عبر تقييد السياسة الأمنية امتيازات WebIDE ل. </font><font>لمعرفة المزيد، راجع القسم الخاص </font></font><a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29"><font><font>غير المقيد تصحيح التطبيق (بما في ذلك التطبيقات المعتمدة، والعملية الرئيسية، </font></font></a><font><font>الخ).</font></font></p> + +<h2 id="الاتصال_فايرفوكس_لأندرويد"><font><font>الاتصال فايرفوكس لأندرويد</font></font></h2> + +<p><font><font>إذا كنت تحاول الاتصال مثيل فايرفوكس يعمل على نظام التشغيل أندرويد وأنها لا تظهر، وهنا بعض الأشياء التي يمكنك تجربتها:</font></font></p> + +<ul> + <li><font><font>التحقق من إصدار فايرفوكس الخاص بك: تأكد من جهازك تشغيل </font></font><strong><font><font>فايرفوكس 36 أو </font></font></strong><font><font>أعلى. </font><font>سوف WebIDE لم يكشف الإصدارات القديمة تلقائيا، لذلك تحتاج إلى تمكين ميناء الشحن والاتصال إلى ميناء الجهاز - اتبع التعليمات </font><font>هنا.</font></font></li> + <li><font><font>تأكد من حصولك على تمكين تصحيح الأخطاء عن بعد في فايرفوكس: فتح فايرفوكس لالروبوت، افتح القائمة الخاصة، حدد </font></font><code><font><font>إعدادات، ثم اضغط على مربع في </font></font></code><code><font><font>أدوات المطور> تصحيح الأخطاء عن </font></font></code><font><font>بعد.</font></font></li> + <li><font><font>تأكد من أن يتم السماح USB التصحيح في إعدادات المطور للجهاز</font></font></li> + <li><font><font>إذا كنت لا تزال لا ترى جهازك في إطار WebIDE، حاول تبديل </font></font><code><font><font>التصحيح عن بعد</font></font></code><font><font> على الهاتف.</font></font> + <ul> + <li><font><font>قطع جهازك من جهاز الكمبيوتر الخاص بك وإيقاف </font></font><code><font><font>التصحيح عن بعد</font></font></code><font><font> على الهاتف.</font></font></li> + <li><font><font>أعد توصيل الجهاز وتشغيل </font></font><code><font><font>تصحيح الأخطاء عن بعد</font></font></code><font><font> - وهذا إعادة تشغيل مثيل المصحح على الهاتف.</font></font></li> + <li><font><font>حاول الاتصال عبر WebIDE مرة أخرى.</font></font></li> + </ul> + </li> +</ul> + +<h2 id="الاتصال_المتصفحات_الأخرى_(كروم،_سفاري)"><font><font>الاتصال المتصفحات الأخرى (كروم، سفاري)</font></font></h2> + +<p><a class="here" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android"><font><font>WebIDE يستفيد من </font></font></a><a href="/en-US/docs/Tools/Firefox_Tools_Adapter"><font><font>فالنسيا (سابقا فايرفوكس أدوات محول)</font></font></a><font><font> للوصول إلى المتصفحات الأخرى، مثل كروم وسفاري. </font></font></p> + +<p><font><font>إذا كنت تواجه مشكلة في الاتصال لهذه المتصفحات الأخرى، والتحقق من خطوات الإعداد والملاحظات الأخرى لهذه المتصفحات على </font></font><a href="/en-US/docs/Tools/Firefox_Tools_Adapter"><font><font>الصفحة </font></font></a><font><font>فالنسيا.</font></font></p> + +<h2 id="غير_قادر_على_تحميل_قائمة_المشروع"><font><font>غير قادر على تحميل قائمة المشروع</font></font></h2> + +<p><font><font>إذا كنت WebIDE مفتوحة في إصدار واحد من فايرفوكس، ثم الرجوع إلى إصدار فايرفوكس السابق مع نفس التشكيل الجانبي، قد ترى الخطأ "غير قادر على تحميل قائمة المشروع" عند فتح WebIDE في فايرفوكس الإصدار السابق.</font></font></p> + +<p><font><font>يمكن أن يحدث هذا عندما يكون النظام التخزين التي WebIDE الاستخدامات </font></font><a href="/en-US/docs/Web/API/IndexedDB_API"><font><font>(المفهرسة</font></font></a><font><font> يحتاج) لنقل أو إعادة هيكلة الملفات الداخلية لفايرفوكس الإصدار الأحدث. </font><font>يصبح قائمة المشروع ثم لا يمكن الوصول إليها بشكل فعال في الإصدارات القديمة من فايرفوكس.</font></font></p> + +<p><font><font>تم فقدان أية بيانات، ولكنك لن تحتاج إلى الاستمرار في استخدام أحدث نسخة من فايرفوكس الذي تم استخدامه مع ملف التعريف الخاص بك للحصول على قائمة المشروع مرة أخرى.</font></font></p> + +<p><font><font>إذا تريد حقا أن استخدام النسخة القديمة من فايرفوكس، يمكنك محاولة حذف القائمة للتو المشروع على النحو التالي، ولكن هذا غير معتمد ويمكن أن تؤدي إلى مشاكل أخرى أو فقدان بيانات إضافية:</font></font></p> + +<ol> + <li><font><font>وثيق فايرفوكس</font></font></li> + <li><font><font>البحث فايرفوكس الدليل ملفك الشخصي</font></font></li> + <li><font><font>العثور على </font></font><code><font><font>تخزين</font></font></code><font><font> مجلد داخل الدليل الشخصي</font></font></li> + <li><font><font>تحت جزء من هذه الشجرة الملف، يجب أن يكون هناك ملفات و / أو الدلائل التي تبدأ مع </font></font><code><font><font>4268914080AsptpcPerjo</font></font></code><font><font> (اسم تجزئته من قاعدة البيانات)</font></font></li> + <li><font><font>إزالة أي من هذه الملفات والدلائل</font></font></li> + <li><font><font>بدء فايرفوكس وWebIDE مرة أخرى</font></font></li> +</ol> + +<h2 id="تمكين_تسجيل"><font><font>تمكين تسجيل</font></font></h2> + +<p><font><font>يمكنك أيضا تمكين تسجيل مطول لجمع التشخيص:</font></font></p> + +<ol start="1" style="list-style-type: decimal;"> + <li><font><font>مفتوح </font></font><a class="external external-icon" href="http://kb.mozillazine.org/About:config"><font><font>حول: </font></font></a><font><font>التكوين، </font><font>وإضافة تفضيل جديد يسمى </font></font><code><font><font>extensions.adbhelper@mozilla.org.sdk.console.logLevel،</font></font></code><font><font> مع قيمة السلسلة </font></font><code><font><font>جميع، وتعيين </font></font></code><code><font><font>extensions.adbhelper@mozilla.org.debug</font></font></code><font><font> إلى </font><font>صحيح.</font></font></li> + <li><font><font>في </font></font><a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons"><font><font>إدارة الوظائف </font></font></a><font><font>الإضافية، </font><font>تعطيل ومن ثم إعادة تمكين ADB مساعد الإضافة.</font></font></li> + <li><font><font>فتح </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font><font>المتصفح وحدة </font></font></a><font><font>التحكم، </font><font>وعليك الآن أن نرى رسائل تعزية مسبوقة مع </font></font><code><font><font>بنك التنمية </font></font></code><font><font>الآسيوي. </font><font>إذا لا تعني الرسائل لك شيئا، </font></font><a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help"><font><font>اطلب </font></font></a><font><font>المساعدة.</font></font></li> +</ol> + +<h2 id="الحصول_على_المساعدة"><font><font>الحصول على المساعدة</font></font></h2> + +<p><font><font>انتقل إلى </font></font><a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication"><font><font>غرفة #devtools على IRC</font></font></a><font><font> وسنحاول مساعدة.</font></font></p> |