initial commit

10 files changed, 1480 insertions, 0 deletions

diff --git a/files/ar/tools/browser_console/index.html b/files/ar/tools/browser_console/index.html
new file mode 100644
index 0000000000..81a9a8d321
--- /dev/null
+++ b/files/ar/tools/browser_console/index.html
@@ -0,0 +1,181 @@
+---
+title: Browser Console
+slug: Tools/Browser_Console
+translation_of: Tools/Browser_Console
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p>
+
+<p>So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.</p>
+
+<p>If you also want to use the other web developer tools in the regular Web <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> with add-on or browser code, consider using the <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>.</p>
+
+<p>Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p>
+
+<div class="blockIndicator geckoVersionNote">
+<p>NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later)  option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p>
+</div>
+
+<h2 id="Opening_the_Browser_Console">Opening the Browser Console</h2>
+
+<p>You can open the Browser Console in one of two ways:</p>
+
+<ol>
+ <li>from the menu: select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li>
+ <li>from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).</li>
+</ol>
+
+<p>You can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>The Browser Console looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p>
+
+<ul>
+ <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a>.</li>
+ <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear.</li>
+ <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li>
+</ul>
+
+<p>Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled <strong>Show Content Messages</strong>. The following image shows the browser console focused on the same page as above after clicking on the <strong>Show Content Messages</strong> checkbox.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p>
+
+<h2 id="Browser_Console_logging">Browser Console logging</h2>
+
+<p>The Browser console logs the same sorts of messages as the Web Console:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API).</li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li>
+</ul>
+
+<p>However, it displays such messages from:</p>
+
+<ul>
+ <li>web content hosted by all browser tabs</li>
+ <li>the browser's own code</li>
+ <li>add-ons.</li>
+</ul>
+
+<h3 id="Messages_from_add-ons">Messages from add-ons</h3>
+
+<p>The Browser Console displays messages logged by all Firefox add-ons.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p>
+
+<p>One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Learn more:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/console">console API reference</a></li>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. We see we can not only access the Browser Console but also Web Console.</p>
+
+<p>Here is an example on how to clear the contents of the Browser console:</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p>
+
+<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Bonus_Features_Available">Bonus Features Available</h4>
+
+<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p>
+
+<pre class="brush: js">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p>
+
+<h2 id="Browser_Console_command_line">Browser Console command line</h2>
+
+<div class="blockIndicator geckoVersionNote">
+<p>The Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p>
+</div>
+
+<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p>
+
+<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p>
+
+<h3 id="Controlling_the_browser">Controlling the browser</h3>
+
+<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p>
+
+<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can restart the browser with the command <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) or <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac) This command restarts the browser with the same tabs open as before the restart.</p>
+</div>
+
+<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3>
+
+<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On macOS, this similar code will add a new item to the "Tools" menu:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/ar/tools/index.html b/files/ar/tools/index.html
new file mode 100644
index 0000000000..7fe4951617
--- /dev/null
+++ b/files/ar/tools/index.html
@@ -0,0 +1,209 @@
+---
+title: أدوات مطور فايرفوكس
+slug: Tools
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p>
+
+<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p>
+
+<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p>
+</div>
+
+<h2 id="The_Core_Tools">The Core Tools</h2>
+
+<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> &gt; <em>Web Developer</em> &gt; <em>Toggle Tools</em> or use the keyboard shortcut  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p>
+
+<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p>
+
+<table class="standard-table" style="height: 178px; width: 840px;">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
+   <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Toggles Responsive Design Mode.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
+   <td>Closes the Developer Tools</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Page_Inspector">Page Inspector</h3>
+
+<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Web_Console">Web Console</h3>
+
+<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>See messages logged by a web page and interact with the page using JavaScript.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="JavaScript_Debugger">JavaScript Debugger</h3>
+
+<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Stop, step through, examine, and modify the JavaScript running in a page.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Network_Monitor">Network Monitor</h3>
+
+<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>See the network requests made when a page is loaded.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Performance_Tools">Performance Tools</h3>
+
+<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3>
+
+<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>See how your website or app will look and behave on different devices and network types.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Accessibility_inspector">Accessibility inspector</h3>
+
+<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p>
+</div>
+
+<div class="column-half"></div>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p>
+</div>
+
+<h2 id="More_Tools">More Tools</h2>
+
+<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt>
+ <dd>Figure out which objects are keeping memory in use.</dd>
+ <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
+ <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd>
+ <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt>
+ <dd>Inspect the page's DOM properties, functions, etc.</dd>
+ <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
+ <dd>Select a color from the page.</dd>
+ <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt>
+ <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt>
+ <dd>View and edit CSS styles for the current page.</dd>
+ <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt>
+ <dd>Take a screenshot of the entire page or of a single element.</dd>
+ <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt>
+ <dd>Measure a specific area of a web page.</dd>
+ <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt>
+ <dd>Overlay horizontal and vertical rulers on a web page</dd>
+</dl>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
+
+<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p>
+
+<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p>
+</div>
+
+<div class="column-third"></div>
+</div>
+
+<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2>
+
+<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
+ <dd>Debug add-ons, content tabs, and workers running in the browser.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt>
+ <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd>
+ <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt>
+ <dd>Connect the developer tools to a specific iframe in the current page.</dd>
+ <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt>
+ <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd>
+</dl>
+</div>
+
+<h2 id="Debugging_the_browser">Debugging the browser</h2>
+
+<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
+ <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd>
+ <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
+ <dd>Attach the Developer Tools to the browser itself.</dd>
+</dl>
+</div>
+
+<h2 id="Extending_the_devtools">Extending the devtools</h2>
+
+<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p>
+
+<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2>
+
+<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p>
+
+<h2 id="Contribute">Contribute</h2>
+
+<p>If you want to help improve the developer tools, these resources will get you started.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt>
+ <dd>Our developer documentation explains how to get involved.</dd>
+ <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt>
+ <dd>A tool helping to find bugs to work on.</dd>
+</dl>
+</div>
diff --git a/files/ar/tools/page_inspector/how_to/index.html b/files/ar/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..2f18038ec9
--- /dev/null
+++ b/files/ar/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: How to
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
diff --git a/files/ar/tools/page_inspector/index.html b/files/ar/tools/page_inspector/index.html
new file mode 100644
index 0000000000..518af28f10
--- /dev/null
+++ b/files/ar/tools/page_inspector/index.html
@@ -0,0 +1,65 @@
+---
+title: Page Inspector
+slug: Tools/Page_Inspector
+tags:
+  - CSS
+  - DOM
+  - HTML
+  - NeedsTranslation
+  - Stylesheets
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+  - 'l10n:priority'
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Use the Page Inspector to examine and modify the HTML and CSS of a page.</p>
+
+<p>You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p>
+
+<hr>
+<h2 id="User_Interface_Tour">User Interface Tour</h2>
+
+<p>To find your way around the Inspector, here's a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p>
+
+<p>You can split the Rules view out into its own pane, separate from the other tabs on the CSS pane — this is called <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>.</p>
+
+<hr>
+<h2 id="How_to">How to</h2>
+
+<p>To find out what you can do with the Inspector, see the following how to guides:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">Edit fonts</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examine CSS flexbox layouts</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference">Reference</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li>
+</ul>
+</div>
diff --git a/files/ar/tools/scratchpad/index.html b/files/ar/tools/scratchpad/index.html
new file mode 100644
index 0000000000..b76f2da78c
--- /dev/null
+++ b/files/ar/tools/scratchpad/index.html
@@ -0,0 +1,96 @@
+---
+title: Scratchpad
+slug: Tools/Scratchpad
+translation_of: Archive/Tools/Scratchpad
+---
+<p><font><font>تقدم المسودة بيئة لتجريب شفرة جافا سكريبت. </font><font>يمكنك كتابة، تشغيل، وفحص النتائج من التعليمات البرمجية التي تتفاعل مع صفحة الويب.</font></font></p>
+
+<p><font><font>على عكس </font></font><a href="/en-US/docs/Tools/Web_Console" title="EN / استخدام وحدة تحكم ويب"><font><font>وحدة تحكم </font></font></a><font><font>ويب، </font><font>الذي تم تصميمه لتفسير سطر واحد من التعليمات البرمجية في وقت واحد، يتيح لك تطبيق المسودة تعديل قطع أكبر من شفرة جافا سكريبت، ثم تنفيذه بطرق مختلفة اعتمادا على الطريقة التي تريد استخدام الإخراج.</font></font></p>
+
+<p><font><font>{{EmbedYouTube ("Pt7DZACyClM ')}}</font></font></p>
+
+<h2 id="استعمال"><font><font>استعمال</font></font></h2>
+
+<h3 id="المسودة_افتتاح"><font><font>المسودة افتتاح</font></font></h3>
+
+<p><font><font>لفتح نافذة المسودة، اضغط </font></font><kbd><font><font>شيفت</font></font></kbd><font><font> + </font></font><kbd><font><font>F4، أو انتقل إلى القائمة مطور ويب (وهو الفرعية في القائمة أدوات على OS X و Linux)، ثم حدد المسودة. </font></font></kbd><font><font>هذا وسوف تفتح نافذة محرر المسودة، والذي يتضمن التعليق الذي يوفر بعض معلومات موجزة عن كيفية استخدام تطبيق المسودة. </font><font>من هناك يمكنك أن تبدأ على الفور كتابة بعض شفرة جافا سكريبت لمحاولة.</font></font></p>
+
+<h3 id="التحرير"><font><font>التحرير</font></font></h3>
+
+<p><font><font>نافذة المسودة يبدو شيئا من هذا القبيل (على OS X شريط القوائم في الجزء العلوي من الشاشة):</font></font></p>
+
+<p><img alt="لقطة من المسودة" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p>
+
+<p><font><font>من القائمة ملف يوفر خيارات لحفظ وتحميل جافا سكريبت مقتطفات الشفرة، حتى تتمكن من إعادة استخدام التعليمات البرمجية في وقت لاحق إذا أردت.</font></font></p>
+
+<h4 id="إنجاز_قانون_وثائق_مضمنة"><font><font>إنجاز قانون وثائق مضمنة</font></font></h4>
+
+<div class="geckoVersionNote">
+<p><font><font>إنجاز قانون ونوع المعلومات غير متاح إلا من فايرفوكس 32 وما بعده.</font></font></p>
+</div>
+
+<p><font><font>من فايرفوكس 32 فصاعدا المسودة يدمج </font></font><a href="http://ternjs.net/"><font><font>محرك تحليل رمز </font></font></a><font><font>الخرشنة، </font><font>ويستخدم ذلك لتقديم اقتراحات الإكمال التلقائي والنوافذ المنبثقة التي تحتوي على معلومات عن الرمز الحالي. </font><font>لإدراج اقتراحات الإكمال التلقائي، اضغط </font></font><kbd><font><font>على Ctrl</font></font></kbd><font><font> + </font><font>الفضاء. </font><font>لإظهار المنبثقة، اضغط </font><kbd><font>شيفت</font></kbd><font> + </font><kbd><font>الفضاء</font></kbd><font> في فايرفوكس 32 أو </font><kbd><font>السيطرة</font></kbd><font> + </font><kbd><font>التحول</font></kbd><font> + </font><kbd><font>الفضاء</font></kbd><font> في فايرفوكس 33+.</font></font></p>
+
+<p><font><font>على سبيل المثال، حاول كتابة </font></font><kbd><font><font>D، ثم الضغط </font></font></kbd><kbd><font><font>على Ctrl</font></font></kbd><font><font> + </font><font>الفضاء. </font><font>سترى هذا:</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>الرمز الموجود بجانب كل اقتراح إلى نوع، واقتراح المميز حاليا يحصل منبثقة مع مزيد من المعلومات. </font></font><kbd><font><font>↑</font></font></kbd><font><font> </font></font><kbd><font><font>و↓</font></font></kbd><font><font> دورة من خلال الاقتراحات </font></font><kbd><font><font>وأدخل</font></font></kbd><font><font> أو </font></font><kbd><font><font>تبويب</font></font></kbd><font><font> حدد خيار تسليط الضوء عليها.</font></font></p>
+
+<p><font><font>إذا قمت بتحديد </font></font><code><font><font>المستند،</font></font></code><font><font> ثم </font></font><code><font><font>addEventListener، ثم اضغط على </font></font></code><kbd><font><font>التحول</font></font></kbd><font><font>  + </font></font><kbd><font><font>الفضاء</font></font></kbd><font><font> سترى المنبثقة التي تظهر ملخصا لتركيب وظيفة وصفا موجزا:</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>و"[مستندات]" وصلة يأخذك إلى وثائق MDN للرمز.</font></font></p>
+
+<h3 id="تنفيذ"><font><font>تنفيذ</font></font></h3>
+
+<p class="note"><font><font>بمجرد كتابة التعليمات البرمجية الخاصة بك، حدد الرمز الذي تريد تشغيله. </font><font>إذا لم تقم بتحديد أي شيء، سيتم تشغيل كافة التعليمات البرمجية في الإطار. </font><font>ثم اختيار الطريقة التي تريد رمز لتشغيل باستخدام أزرار على طول الجزء العلوي، وذلك باستخدام القائمة تنفيذ، أو باستخدام قائمة السياق. </font><font>يتم تنفيذ التعليمات البرمجية في نطاق التبويب المحدد حاليا. </font><font>ستضاف أية متغيرات قمت بتعريف خارج وظيفة إلى وجوه العالمي لعلامة التبويب هذه.</font></font></p>
+
+<p class="note"><font><font>هناك أربعة خيارات التنفيذ المتاحة.</font></font><strong> </strong></p>
+
+<h4 id="اركض"><font><font>اركض</font></font></h4>
+
+<p><font><font>عند اختيار خيار تشغيل، يتم تنفيذ التعليمات البرمجية المحددة. </font><font>هذا هو ما كنت تستخدم لتنفيذ وظيفة أو رمز الأخرى التي تعالج محتوى الصفحة الخاصة بك دون الحاجة لمعرفة النتيجة.</font></font></p>
+
+<h4 id="فحص"><font><font>فحص</font></font></h4>
+
+<p><font><font>الخيار فحص تنفيذ التعليمات البرمجية تماما مثل الخيار تشغيل. </font><font>ومع ذلك، بعد بإرجاع رمز، يتم فتح مفتش الكائن لتمكنك من دراسة القيمة التي تم إرجاعها.</font></font></p>
+
+<p><font><font>على سبيل المثال، إذا قمت بإدخال رمز:</font></font></p>
+
+<pre class="brush:css"><font><font>نافذة
+</font></font></pre>
+
+<p><font><font>ثم اختر فحص، يظهر مفتش الكائن ويبدو أن شيئا من هذا القبيل:</font></font></p>
+
+<p><img alt="تفتيش كائن في المسودة" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p>
+
+<h4 id="عرض"><font><font>عرض</font></font></h4>
+
+<p><font><font>خيار عرض تنفيذ التعليمات البرمجية المحددة، ثم إدراج نتيجة مباشرة إلى حسابك في المسودة محرر نافذة كتعليق، لذلك يمكنك استخدامه بمثابة </font><font>REPL.</font></font></p>
+
+<h4 id="تحديث_وتشغيل"><font><font>تحديث وتشغيل</font></font></h4>
+
+<p><font><font>متوفر فقط في القائمة تنفيذ خيار تحديث وتشغيل. </font><font>لأول مرة تعيد تحميل الصفحة، ثم تنفيذ التعليمات البرمجية عند "تحميل" وقع الحدث الصفحة. </font><font>وهذا مفيد لتشغيل التعليمات البرمجية في بيئة البكر.</font></font></p>
+
+<h2 id="تشغيل_المسودة_في_سياق_المتصفح"><font><font>تشغيل المسودة في سياق المتصفح</font></font></h2>
+
+<p><font><font>يمكنك تشغيل تطبيق المسودة في سياق متصفح ككل بدلا من صفحة ويب معينة. </font><font>وهذا مفيد إذا كنت تعمل على فايرفوكس نفسها أو تطوير إضافات. </font><font>للقيام بذلك الاختيار "تمكين الكروم وإضافة على التصحيح" في </font></font><a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2"><font><font>إعدادات أداة </font></font></a><font><font>المطور. </font><font>مرة واحدة كنت قد فعلت هذا، القائمة البيئة لديها خيار المتصفح. </font><font>وبمجرد أن اختيار، النطاق الخاص بك هو متصفح كامل وليس مجرد محتوى الصفحة، كما سترون من دراسة بعض جلوبل:</font></font></p>
+
+<pre class="brush: js"><font><font>نافذة</font></font>
+/*<font><font>
+[كائن ChromeWindow]</font></font><font><font>
+*/</font></font>
+<font><font>
+gBrowser</font></font><font><font>
+/*</font></font><font><font>
+[كائن XULElement]</font></font><font><font>
+*/</font></font></pre>
+
+<p><font><font>تم تعيين سياق التنفيذ المسودة إلى المتصفح عندما ملف قصاصة له </font><code><font>// -sp السياق: المتصفح</font></code><font> في السطر الأول.</font></font><br>
+  </p>
+
+<h2 id="اختصارات_لوحة_المفاتيح"><font><font>اختصارات لوحة المفاتيح</font></font></h2>
+
+<p><font><font>{{صفحة ("EN-US / مستندات / أدوات / Keyboard_shortcuts"، "المسودة")}}</font></font></p>
+
+<h3 id="اختصارات_محرر_المصدر"><font><font>اختصارات محرر المصدر</font></font></h3>
+
+<p><font><font>{{صفحة ("EN-US / مستندات / أدوات / Keyboard_shortcuts"، "مصدر محرر")}}</font></font></p>
diff --git a/files/ar/tools/storage_inspector/index.html b/files/ar/tools/storage_inspector/index.html
new file mode 100644
index 0000000000..b4292a14ea
--- /dev/null
+++ b/files/ar/tools/storage_inspector/index.html
@@ -0,0 +1,112 @@
+---
+title: Storage Inspector
+slug: Tools/Storage_Inspector
+translation_of: Tools/Storage_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p>
+
+<ul>
+ <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li>
+ <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li>
+ <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li>
+ <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li>
+ <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li>
+</ul>
+
+<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p>
+
+<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2>
+
+<p>You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p>
+
+<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2>
+
+<p>The Storage Inspector UI is split into three main components:</p>
+
+<ul>
+ <li><a href="#storage-tree">Storage tree</a></li>
+ <li><a href="#table-widget">Table Widget</a></li>
+ <li><a href="#sidebar">Sidebar</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p>
+
+<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3>
+
+<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p>
+
+<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p>
+
+<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p>
+
+<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p>
+
+<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3>
+
+<p>The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p>
+
+<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p>
+
+<h3 id="Search">Search</h3>
+
+<p>There's a search box at the top of the Table Widget:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p>
+
+<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p>
+
+<h3 id="Add_and_refresh_storage">Add and refresh storage</h3>
+
+<p>You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p>
+
+<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3>
+
+<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p>
+
+<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:</p>
+
+<ul>
+ <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li>
+ <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li>
+ <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li>
+</ul>
+
+<p>The shown values can also be filtered using the search box at the top of the sidebar.</p>
+
+<h2 id="Working_with_the_Storage_Inspector">Working with the Storage Inspector</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Cookies">Cookies</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Local_Storage_Session_Storage">Local Storage / Session Storage</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Cache_Storage">Cache Storage</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/IndexedDB">IndexedDB</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector/Extension_Storage">Extension Storage</a></li>
+</ul>
diff --git a/files/ar/tools/web_console/index.html b/files/ar/tools/web_console/index.html
new file mode 100644
index 0000000000..f209646681
--- /dev/null
+++ b/files/ar/tools/web_console/index.html
@@ -0,0 +1,45 @@
+---
+title: Web Console
+slug: Tools/Web_Console
+tags:
+  - أدوات
+  - الأمان
+  - التصحيح
+  - التنقيح
+  - تطوير الويب
+  - 'تطوير الويب: أدوات'
+  - وحدة تحكم الويب
+translation_of: Tools/Web_Console
+---
+<p><strong>وحدة تحكم الويب:</strong></p>
+
+<ol>
+ <li>تسجل المعلومات المرتبطة بصفحة الويب: طلبات الشبكة، جافا سكريبت، CSS, أخطاء الأمان و التحذيرات باﻹضافة إلى اﻷخطاء، التحذير والرسائل الإعلامية التي يتم تسجيلها بشكل صريح من خلال شفرة جافا سكريبت التي تعمل في سياق الصفحة</li>
+ <li>تمكّنك من التفاعل مع صفحة الويب عن طريق تنفيذ تعبيرات جافا سكريبت في سياق الصفحة</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">فتح وحدة تحكم الويب</a></dt>
+ <dd>كيف تبدأ إستعمال وحدة تحكم الويب.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">مفسّر سطر الأوامر</a></dt>
+ <dd>كيف تتفاعل مع مستند بإستعمال وحدة التحكم.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">وحدة التحكم</a></dt>
+ <dd>إستخدم وحدة التحكم بجانب الأدوات الأخرى.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">رسائل وحدة التحكم </a></dt>
+ <dd>تفاصيل الرسائل التي تسجلها وحدة التحكم.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">خرج غني</a></dt>
+ <dd>شاهد و تفاعل مع الكائنات التي تسجلها وحدة التحكم.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">إختصارات لوحة المفاتيح</a></dt>
+ <dd>مرجع اﻹختصار.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ar/tools/web_console/the_command_line_interpreter/index.html b/files/ar/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..119cc57f13
--- /dev/null
+++ b/files/ar/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,185 @@
+---
+title: The JavaScript input interpreter
+slug: Tools/Web_Console/The_command_line_interpreter
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.</p>
+
+<h2 id="Single-line_mode">Single-line mode</h2>
+
+<p>For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the <strong>&gt;&gt;</strong> prompt.</p>
+
+<p><img alt="The Web Console, showing single-line mode" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p>
+
+<p>To enter expressions in single-line mode, type at the prompt and press <kbd>Enter</kbd>. To enter multi-line expressions, press <kbd>Shift</kbd>+<kbd>Enter</kbd> after typing each line, then <kbd>Enter</kbd> to run all the entered lines.</p>
+
+<p>The expression you type is echoed under the input prompt, followed by the result.</p>
+
+<p>If your input does not appear to be complete when you press <kbd>Enter</kbd>, then the Console treats this as <kbd>Shift</kbd>+<kbd>Enter</kbd> , enabling you to finish your input.</p>
+
+<p>For example, if you type:</p>
+
+<pre class="brush: js" dir="rtl">function foo() {</pre>
+
+<p>and then <kbd>Enter</kbd>, the Console does not immediately execute the input, but behaves as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p>
+
+<h2 id="Multi-line_mode">Multi-line mode</h2>
+
+<p>For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press  <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). The multi-line editing pane opens on the left side the of Web Console.</p>
+
+<p><img alt="Web Console in multi-line mode" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p>
+
+<p>You can enter multiple lines of JavaScript by default in this mode, pressing <kbd>Enter</kbd> after each one. To execute the snippet that is currently in the editing pane, click the <strong>Run</strong> button or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> (or <kbd>Cmd</kbd>+<kbd>Return</kbd> on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result. You can also select a range of lines in the editing pane, and run just the code on those lines.</p>
+
+<p>Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.</p>
+
+<p>You can open files when in multi-line mode, and save the current contents of the editing pane to a file.</p>
+
+<ul>
+ <li>To open a file, press <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> on MacOS). A file dialog box opens so you can select the file to open.</li>
+ <li>To save the contents of the editing pane, press <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> on MacOS). A file dialog box opens so you can specify the location to save to.</li>
+</ul>
+
+<p>To switch back to single-line mode, click the <strong>X</strong> icon at the top of the multi-line editing pane, or press  <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p>
+
+<h2 id="Accessing_variables">Accessing variables</h2>
+
+<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript libraries like <em>jQuery</em>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Autocomplete">Autocomplete</h2>
+
+<p>The editor has autocomplete: enter the first few letters and a popup appears with possible completions:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p>
+
+<p>Press  <kbd>Enter</kbd>, <kbd>Tab</kbd>, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p>
+
+<p>Console autocomplete suggestions are case-insensitive.</p>
+
+<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p>
+
+<p>You get autocomplete suggestions for array elements, as well:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Enable Autocompletion</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p>
+
+<h2 id="Instant_evaluation">Instant evaluation</h2>
+
+<div class="blockIndicator note">
+<p>This feature is available in Firefox Nightly, in versions labeled 74 and later.</p>
+</div>
+
+<p>When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.</p>
+
+<p>You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Instant Evaluation</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p>
+
+<h2 id="Execution_context">Execution context</h2>
+
+<p>Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click <strong>Run</strong>, you can switch to single-line mode and still use your function.</p>
+
+<h2 id="Syntax_highlighting">Syntax highlighting</h2>
+
+<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p>
+
+<p>The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".</p>
+
+<p>The output is highlighted as well where appropriate.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Syntax highlighting is not visible in your browser if Accessibility features have been enabled.</p>
+</div>
+
+<h2 id="Execution_history">Execution history</h2>
+
+<p>The interpreter remembers expressions you've typed. To move back and forward through your history:</p>
+
+<ul>
+ <li>In single-line mode, use the up and down arrows. </li>
+ <li>In multi-line mode, use the  <strong>⋀</strong> and <strong>⋁ </strong>icons in the editing panel's toolbar.</li>
+</ul>
+
+<p>The expression history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">helper function</a>.</p>
+
+<p>You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press <kbd>F9</kbd>. On Mac press <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>note:</strong> not <kbd>Cmd</kbd>+<kbd>R</kbd>!) to initiate the reverse search.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p>
+
+<p>Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing <kbd>F9</kbd> on Windows and Linux ( <kbd>Ctrl</kbd>+<kbd>R</kbd> on Mac) cycles backwards through the matches.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>Once you  have initiated the reverse search, you can use <kbd>Shift</kbd> + <kbd>F9</kbd> on Windows or Linux ( <kbd>Ctrl</kbd>+<kbd>S</kbd> on Mac) to search forward in the list of matches. You can also use the  <strong>⋀</strong> and <strong>⋁ </strong>icons in the expression search bar.</p>
+
+<p>When you find the expression you want, press <kbd>Enter</kbd> (<kbd>Return</kbd>) to execute the statement.</p>
+
+<h2 id="Working_with_iframes">Working with iframes</h2>
+
+<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p>
+
+<p>You can pass the iframe DOM element:</p>
+
+<pre class="brush: js" dir="rtl">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>You can pass a CSS selector that matches the iframe:</p>
+
+<pre class="brush: js" dir="rtl">cd("#frame1");</pre>
+
+<p>You can pass the iframe's global window object:</p>
+
+<pre class="brush: js" dir="rtl">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p>
+
+<pre class="brush: js" dir="rtl">cd();</pre>
+
+<p>For example, suppose we have a document that embeds an iframe:</p>
+
+<pre class="brush: html" dir="rtl">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The iframe defines a new function:</p>
+
+<pre class="brush: html" dir="rtl">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>You can switch context to the iframe like this:</p>
+
+<pre class="brush: js" dir="rtl">cd("#frame1");</pre>
+
+<p>Now you'll see that the global window's document is the iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<p>And you can call the function defined in the iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h2 id="Helper_commands">Helper commands</h2>
+
+<p>{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}</p>
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 &gt; 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 &gt; More information &gt; 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 &gt; 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>معلومات الجهاز&gt; </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>المعلومات الأجهزة&gt; مزيد من المعلومات&gt; </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>أدوات المطور&gt; تصحيح الأخطاء عن </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>