initial commit

8 files changed, 1109 insertions, 0 deletions

diff --git a/files/id/tools/accessibility_inspector/index.html b/files/id/tools/accessibility_inspector/index.html
new file mode 100644
index 0000000000..ded237c344
--- /dev/null
+++ b/files/id/tools/accessibility_inspector/index.html
@@ -0,0 +1,196 @@
+---
+title: Accessibility Inspector
+slug: Tools/Accessibility_inspector
+tags:
+  - Aksesibilitas
+  - Alat
+  - DevTools
+  - Inspektur Aksesibilitas
+  - Panduan
+translation_of: Tools/Accessibility_inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">The Accessibility Inspector (Inspektur Akesibilitas) menyediakan sebuah sarana untuk mengakses informasi penting terbuka untuk teknologi bantu di dalam halaman ini lewat pohon aksesibilitas, memperbolehkan anda untuk cek apa yang hilang atau jika tidak butuh perhatian. Artikel ini membawamu melewati fitur utama dari Accessibility Inspector (Inspektur Aksesibilitas) dan bagaimana menggunakannya.</p>
+
+<h2 id="Sebuah_panduan_yang_sangat_singkat_untuk_aksesibilitas">Sebuah panduan yang (sangat) singkat untuk aksesibilitas</h2>
+
+<p>Accessibility (Aksesibilitas) adalah latihan untuk membuat website anda dapat digunakan oleh sebanyak mungkin orang . Ini berarti mencoba yang terbaik dari kamu untuk tidak mengunci siapapun untuk mengakses informasi karena kecacatan yang mungkin mereka miliki, atau keadaan pribadi seperti perangkat yang mereka gunakan, kecepatan dari koneksi jaringan mereka, atau geografis lokasi mereka atau lokal. Kamu dapat mencari informasi lebih luas di dalam bagian <a href="/en-US/docs/Web/Accessibility">Accessibility</a> (Aksesibilitas)  dalam Dokumen Web MDN.</p>
+
+<p>Di sini kita terutama berbicara tentang mengekspos informasi kepada orang-orang dengan cacat visual - ini dilakukan melalui <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility APIs</a> (API aksesibilitas) yang tersedia di dalam web browser, yang memaparkan informasi tentang peran elemen-elemen yang berbeda di halaman Anda (misalnya, apakah mereka hanya teks, atau apakah mereka tombol, tautan, elemen formulir, dll?).</p>
+
+<p>Semantic DOM elements have roles assigned to them by default that hint at what their purpose is. Sometimes, however, you need to use some non-semantic markup (e.g., {{htmlelement("div")}}s) to build a complex custom control, and the control won't have a default role that reflects its purpose. In such a situation, you can use <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> role attributes to provide your own roles.</p>
+
+<p>Roles and other information exposed by browser accessibility APIs are presented in a hierarchical structure called the accessibility tree. This is a bit like the DOM tree, except that it contains a more limited set of elements and slightly different information about them.</p>
+
+<p>Assistive technologies like screenreaders use this information to find out what's on a web page, tell their users what's there, and enable them to interact with the page. The Accessibility Inspector also uses this information to provide valuable accessibility debugging capabilities in the DevTools.</p>
+
+<h2 id="Accessing_the_Accessibility_Inspector">Accessing the Accessibility Inspector</h2>
+
+<p>The Accessibility Inspector is available by default since Firefox 63:</p>
+
+<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16366/Screen_Shot_2018-11-30_at_11.58.54.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1986px;"></p>
+
+<p>Initially, the DevTools accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester). This is because the accessibility engine runs in the background when the accessibility features are turned on. While it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as <a href="/en-US/docs/Tools/Memory">Memory</a> and <a href="/en-US/docs/Tools/Performance">Performance</a> as well as overall browser performance. For this reason, you should keep it turned off when you aren't specifically using it.</p>
+
+<p>You can turn the features on using the <em>Turn On Accessibility Features</em> button.</p>
+
+<p>Once the panel content loads, you can then turn it off again using the <em>Turn Off Accessibility Features</em> button available in the top-left corner, unless you have the accessibility engine running previously to operate a screenreader, in which case this button will be disabled.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.</p>
+</div>
+
+<h2 id="Features_of_the_Accessibility_panel">Features of the Accessibility panel</h2>
+
+<p>The enabled accessibility panel looks like so:</p>
+
+<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labelled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16857/accessibility_inspector.png" style="border: 1px solid black; display: block; height: 776px; margin: 0px auto; width: 1976px;"></p>
+
+<p>On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:</p>
+
+<ul>
+ <li><em>Role</em> — the role this item has on the page (e.g., <code>pushbutton</code>, or <code>footer</code>). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA <code>role</code> attribute.</li>
+ <li><em>Name</em> — the name this item has on the page. The name depends on the element; for example, the name of most text elements is simply their <code>textContent</code>, whereas form elements' names are the contents of their associated {{htmlelement("label")}}.</li>
+</ul>
+
+<p>On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:</p>
+
+<ul>
+ <li><em>name</em> — the item's name, as described above.</li>
+ <li><em>role</em> — the item's role, as described above.</li>
+ <li><em>actions</em> — a list of actions that can be performed on the item, for example, a pushbutton would have "Press" listed, while a link would have "Jump" listed.</li>
+ <li><em>value</em> — the value of the item. This can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the URL in the corresponding <code>&lt;a&gt;</code> element's <code>href</code>.</li>
+ <li><em>DOMNode</em> — the type of DOM node that the item in the accessibility tree represents. You can click on the "target" icon that comes after it to select the node in the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. Hovering over the "target" icon highlights the DOM node in the page content.<br>
+  <img alt="DOMNode property in accessibility inspector with target icon highlighted" src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li>
+ <li><em>description</em> — any further description provided on the element, usually by the content of a title attribute.</li>
+ <li><em>keyboardShortcut</em> — any keyboard shortcut that is available to activate the element, as specified in an <code>accessKey</code> attribute. Note that this works correctly as of Firefox 62 ({{bug("1467381")}}).</li>
+ <li><em>childCount</em> — the number of child items the current item has in the accessibility tree hierarchy.</li>
+ <li><em>indexInParent</em> — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.</li>
+ <li><em>states</em> — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>.</li>
+ <li><em>relations</em> — a list of the accessiblity-relevant relationships between this item and other items. For example, in a form, an entry item could have a "labelled by" relation with a label item, which in turn has a "label for" relation to the entry item.</li>
+ <li><em>attributes</em> — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Gecko object attributes</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.</p>
+</div>
+
+<h3 id="Keyboard_controls">Keyboard controls</h3>
+
+<p>The <em>Accessibility</em> tab is fully keyboard-accessible:</p>
+
+<ul>
+ <li>You can tab between the <em>Turn Off Accessibility Features</em> button and left and right panels.</li>
+ <li>When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).</li>
+</ul>
+
+<h3 id="Print_accessibility_tree_to_JSON">Print accessibility tree to JSON</h3>
+
+<p>You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting <strong>Print to JSON:</strong></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 298px; margin: 0px auto; width: 1000px;"></p>
+
+<p>When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p>
+
+<p>Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw JSON data on a separate tab in the viewer.</p>
+
+<h3 id="Check_for_accessibility_issues">Check for accessibility issues</h3>
+
+<p>You can check for accessibility issues by clicking the drop-down menu next to: <strong>Check for issues</strong>. The available menu items include:</p>
+
+<ul>
+ <li><strong>None</strong> — Don't show the possible list of issues</li>
+ <li><strong>All Issues</strong> — Check for all types of issues</li>
+ <li><strong>Contrast</strong> — Check for issues with visual contrast</li>
+ <li><strong>Text Labels</strong> — Check for issues with missing text labels</li>
+</ul>
+
+<p>When you one of the menu items, Firefox scans your document for the type of issues you selected. Depending on the size and complexity of your document, this may take a few seconds. When the scan is complete, the left side of the Accessibility Inspector panel displays only the items that have that type of issue. In the right side of the panel, the <em>Checks</em> subpanel lists the specific issue with the selected node. For each type of issue, there is a <strong>Learn more</strong> link to further information on <em>MDN Web Docs</em> about the issue.</p>
+
+<p><img alt='Check for "all" issues, with "contrast" and "text labels" selected' src="https://mdn.mozillademos.org/files/16863/check_for_issues_menu.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 918px;"></p>
+
+<p>The menu items act as toggles. Select the item to view that type of issue; select the item again to clear the display of issues of that type.</p>
+
+<p>Issues with a particular item are always displayed in the <em>Checks</em> subpanel as you browse the tree. The <strong>Check for issues</strong> buttons are a quick way to view all and only those items that have issues.</p>
+
+<h2 id="Notable_related_features">Notable related features</h2>
+
+<p>When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:</p>
+
+<h3 id="Context_menu_options">Context menu options</h3>
+
+<p>An extra context menu option is added, both for the general context menu on the web page when right/<kbd>Ctrl</kbd> + clicking a UI feature, and the HTML pane of the page inspector when right/<kbd>Ctrl</kbd> + clicking a DOM element:</p>
+
+<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p>
+
+<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>
+
+<p>When you choose the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu options, the <em>Accessibility</em> tab is immediately opened to show the corresponding accessibility tree item and its properties.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Some DOM elements do not have accessibility properties — in that case, the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu item is grayed out.</p>
+</div>
+
+<h3 id="Highlighting_of_UI_items">Highlighting of UI items</h3>
+
+<p>In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar along with color contrast information if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</p>
+
+<p>In the following example, you can see that the image has been highlighted and its role, graphic, name, "Road, Asphalt, Sky, Clouds, Fall", and the color contrast ratio, 3.46, appears in the information bar above it.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p>
+
+<h4 id="Color_contrast">Color contrast</h4>
+
+<p>Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text. See <a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Color contrast</a> for details about recommended contrast ratios.</p>
+
+<p>For example:</p>
+
+<p><img alt="A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold." src="https://mdn.mozillademos.org/files/16459/Screen_Shot_2019-01-29_at_10.11.13.png" style="display: block; height: 237px; margin: 0px auto; width: 357px;"></p>
+
+<p>The color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio.</p>
+
+<p>As of Firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. For example:</p>
+
+<p><img alt="A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines." src="https://mdn.mozillademos.org/files/16460/Screen_Shot_2019-01-29_at_10.21.07.png" style="display: block; height: 434px; margin: 0px auto; width: 1484px;"></p>
+
+<p>In this example, the contrast ranges from 4.72 to 5.98. The numbers are followed by AAA and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or Level AAA.</p>
+
+<p>See <a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Color contrast</a> for more information on color contrast.</p>
+
+<h3 id="Accessibility_picker">Accessibility picker</h3>
+
+<p>Like the element picker button on the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">Page Inspector</a>, the <em>Accessibility</em> tab's element picker button allows you to hover and select UI items on the current page  highlight objects in the accessibility tree.</p>
+
+<p>The accessibility tab element picker looks slightly different from the Page Inspector HTML pane picker, as shown below:</p>
+
+<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>
+
+<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p>
+
+<p>When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the <kbd>Shift</kbd> key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the <kbd>Shift</kbd> key.</p>
+
+<p>When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the <kbd>Esc</kbd> key.</p>
+
+<h2 id="Typical_use_cases">Typical use cases</h2>
+
+<p>The Accessibility Inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without <code>alt</code> text and form elements without proper labels have a <code>name</code> property of <code>null</code>, for example.</p>
+
+<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<p>It is also very handy for verifying semantics — you can use the <em>Inspect Accessibility Properties</em> context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or a link is really a link).</p>
+
+<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility">Accessibility tutorials</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility">Web accessibility overview</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li>
+</ul>
diff --git a/files/id/tools/debugger/index.html b/files/id/tools/debugger/index.html
new file mode 100644
index 0000000000..c1f0d2c11e
--- /dev/null
+++ b/files/id/tools/debugger/index.html
@@ -0,0 +1,49 @@
+---
+title: Debugger
+slug: Tools/Debugger
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div><p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p>
+
+<p>You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<hr>
+<h2 id="User_Interface_Tour">User Interface Tour</h2>
+
+<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p>
+
+<hr>
+<h2 id="How_to">How to</h2>
+
+<p>To find out what you can do with the debugger, see the following how-to guides:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Break on a DOM event</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Search and filter</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Black box a source</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference">Reference</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/Settings">Settings</a></li>
+</ul>
+</div>
diff --git a/files/id/tools/index.html b/files/id/tools/index.html
new file mode 100644
index 0000000000..1b8f7b5fa8
--- /dev/null
+++ b/files/id/tools/index.html
@@ -0,0 +1,189 @@
+---
+title: Alat
+slug: Tools
+tags:
+  - Mengembangkan Mozilla
+  - Panduan
+  - Pengembangan Web
+  - 'Pengmbang Web: Alat'
+translation_of: Tools
+---
+<p class="summary">Uji, ubah, dan <em>debug</em> HTML, CSS, dan JavaScript di desktop dan di ponsel.</p>
+
+
+
+<hr>
+<div class="column-container">
+<div class="column-third"></div>
+
+<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;">Untuk alat dan fitur terbaru, cobalah Firefox Edisi Pengembang, Cobalah Firefox Developer Edition.</p>
+
+<p><a href="https://www.mozilla.org/id/firefox/developer/" style="width: 280px; 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;">Unduh Firefox Developer Edition</a></p>
+</div>
+</div>
+
+<h2 id="Peralatan_Inti">Peralatan Inti</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Pemeriksa_Laman">Pemeriksa Laman</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/15481/57-inspector.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Lihat dan ubah konten dan tata letak laman. Visualisasikan banyak aspek laman termasuk <em>box model</em>, animasi dan tata letak <em>grid</em>.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Konsol_Web">Konsol Web</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/15483/57-console.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Lihat pesan yang dicatat oleh laman web dan interaksi dengan laman menggunaan JavaScript.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Pen-debug_JavaScript">Pen-<em>debug   </em>JavaScript</h3>
+
+<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/15485/57-debugger.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Berhenti, melangkah melalui, uji, dan modifikasi JavaScript yang berjalan dalam sebuah laman.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Monitor_Jaringan">Monitor Jaringan</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/15487/57-network.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Lihat permintaan jaringan yang dibuat ketika sebuah laman dimuat.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Alat_Kinerja">Alat Kinerja</h3>
+
+<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Analisa kinerja responsif, JavaScript, dan tata letak situs Anda.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Mode_Desain_Responsif">Mode Desain Responsif</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/15491/57-rdm.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Lihat bagaimana situs atau aplikasi Anda akan terlihat dan berperilaku pada perangkat dan jenis jaringan yang berbeda.</p>
+</div>
+</div>
+
+<hr>
+<h2 id="Alat_Lainnya">Alat Lainnya</h2>
+
+<p>Alat pengembang ini juga dibuat ke dalam Firefox. Tidak seperti "Alat Inti" di atas, mungkin Anda tidak menggunakannya setiap hari.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Memory">Memori</a></dt>
+ <dd>Cari tahu objek mana yang sedang menyimpan memori yang digunakan.</dd>
+ <dt><a href="/en-US/docs/Tools/Storage_Inspector">Pemeriksa Penyimpanan</a></dt>
+ <dd>Memeriksa kuki, penyimpan lokal, <em>indexedDB</em>, dan Inspect cookies, local storage, indexedDB, dan penyimpanan sesi kini pada sebuah laman.</dd>
+ <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM </a><em><a href="/en-US/docs/Tools/DOM_Property_Viewer">Property Viewer</a></em></dt>
+ <dd>Memeriksa properti DOM laman, fungsi, dan lain-lain.</dd>
+ <dt><a href="/en-US/docs/Tools/GCLI">Toolbar Pengembang</a></dt>
+ <dd>Sebuah antarmuka <em>command-line</em> untuk alat pengembang.</dd>
+ <dt><em><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></em></dt>
+ <dd>Memilih warna dari laman.</dd>
+ <dt><em><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></em></dt>
+ <dd>Sebuah editor teks yang dibuat ke dalam Firefox yang  memungkinkan Anda menulis dan menjalankan JavaScript</dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor">Editor Gaya</a></dt>
+ <dd>Tinjau dan ubah gaya CSS untuk halaman saat ini.</dd>
+ <dt><em><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></em></dt>
+ <dd>Tinjau dan edit <em>vertex </em>dan <em>fragment shaders</em> yang digunakan oleh <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Editor Audio Web</a></dt>
+ <dd>Periksa grafik dari node audio dalam kontek audio, dan modifikasi parameternya.</dd>
+ <dt><a href="/en-US/docs/Tools/Screenshot_tool">Mengambil tangkapan layar</a></dt>
+ <dd>Mengambil sebuah tangkapan layar dari keseluruhan laman atau dari sebuah elemen tunggal.</dd>
+ <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Mengukur sebagian laman</a></dt>
+ <dd>Mengukur area tertentu pada sebuah laman web.</dd>
+ <dt><a href="/en-US/docs/Tools/Rulers"><em>Rulers</em> (Penggaris)</a></dt>
+ <dd>Penggaris sepanjang horizontal dan vertikal pada sebuah laman web.</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="Menghubungkan_Alat_Pengembang">Menghubungkan Alat Pengembang</h2>
+
+<p>Jika Anda membuka alat pengembang menggunakan <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">pintasan <em>keyboard</em></a> atau or item menu yang sama, mereka akan menargetkan dokumen yang telah di-<em>host</em> oleh tab yang sedang aktif. Tetapi Anda bisa memasang alat ke berbagai target lain, juga di dalam peramban saat ini dan di berbagai peramban atau bahkan perangkat yang berbeda.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
+ <dd>Men-<em>debug</em> <em>pengayas</em>, tab konten, dan pekerja yang berjalan di peramban.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Menghubungan ke Firefox untuk Android</a></dt>
+ <dd>Menghubungkan alat pengembang ke sebuah <em>instance</em> dari Firefox yang berjalan pada sebuah perangkat Android.</dd>
+ <dt><a href="/en-US/docs/Tools/Working_with_iframes">Menghubungkan ke iframes</a></dt>
+ <dd>Menghubungkan alat pengembang ke sebuah iframe tertentu pada laman saat ini</dd>
+ <dt><a href="/en-US/docs/Tools/Valence">Menghubungkan ke peramban lain</a></dt>
+ <dd>Menghubungkan alat pengembang ke Chrome pada Android dan Safari pada iOS.</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="Men-debug_peramban">Men-<em>debug</em> peramban</h2>
+
+<p>Secara <em>default</em>, alat pengembang dilampirkan ke laman web atau aplikasi web. Tetapi Anda bisa juga menghubungkan mereka ke peramban secara keseluruhan. Ini berguna untuk pengembangan peramban dan <em>pengayas</em>.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Browser_Console">Konsol Peramban</a></dt>
+ <dd>Lihat pesan yang dicatat oelh peramban itu dan oleh <em>pengaya</em>, dan jalankan kode JavaScript di linkup peramban.</dd>
+ <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Kotak Perkakas Peramban</a></dt>
+ <dd>Menyematkan alat pengembang ke peramban itu sendiri.</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="Memperluas_devtools">Memperluas <em> devtools</em></h2>
+
+<p>Alat pengembang dirancang agar dapat diperluas. Pengaya Firefox dapat mengakses alat pengembang dan komponen yang mereka gunakan untuk memperluas alat yang ada dan menambahkan alat yang baru. Dengan protokol men-<em>debug</em> jarak jauh, Anda dapat menerapkan men-<em>debug</em> klien dan server Anda sendiri, memungkinkan Anda men-<em>debug</em> situs web menggunakan alat Anda sendiri atau untuk men-debug berbagai sasaran menggunakan alat Firefox.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Example_add-ons">Contoh pengaya alat pengembang</a></dt>
+ <dd>Gunakan contoh-contoh ini untuk memahami bagaimana untuk menerapkan pengaya alat pengembang.</dd>
+ <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Menambah sebuah panel baru ke alat pengembang</a></dt>
+ <dd>Menulis sebuah pengaya yang menambah sebuah panel baru ke Kotak perkakas.</dd>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Protokol Men-<em>debug</em> Jarak Jauh</a></dt>
+ <dd>Protokol digunakan untuk mengkoneksi Alat Firefox Developer Tools untuk sebuah target men-<em>debug</em> seperti <em>instance</em> dari perangkat Firefox atau Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Tools/Editor">Peubah Sumber</a></dt>
+ <dd>Sebuah editor kode di buat kedalam Firefox yang bisa disematkan ke pengaya Anda.</dd>
+ <dt><a href="/en-US/docs/Tools/Debugger-API">Antarmuka <code>Debugger</code></a></dt>
+ <dd>Sebuah API yang memungkinkan kode JavaScript mengemati eksekusi dari kode JavaScript yang lain. Alat Pengembang Firefox menggunakan API untuk menerapakan pen-<em>debug</em> JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Konsol Web keluaran kustom</a></dt>
+ <dd>Bagaimana memperluas keluaran dari <a href="/en-US/docs/Tools/Web_Console">Konsol Web</a> dan <a href="/en-US/docs/Tools/Browser_Console">Konsol Peramban</a>.</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="Migrasi_dari_Firebug">Migrasi dari Firebug</h2>
+
+<p>Firebug akan sampai pada akhir masa pakainya (lihat <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug tinggal di Firefox DevTools</a> untuk lebih jelasnya mengapa), dan kita menghargai bahwa beberapa orang akan merasa migrasi ke set alat pengembang yang kurang terkenal akan menjadi menantang. Untuk memudahkan transisi dari Firebug ke alat pengembang Firefox, kami telah menulis panduan praktis — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrasi dari Firebug</a>.</p>
+
+<hr>
+<h2 id="Kontribusi">Kontribusi</h2>
+
+<p>Jika Anda ingin untuk membantu mengembangkan alat pengembang, sumber daya ini akan membantu Anda untuk memulai.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://devtools-html.github.io/#getting-in-touch">Ikut Terlibat</a></dt>
+ <dd>Halaman wiki Mozilla menjelaskan bagaimana caranya untuk terlibat.</dd>
+ <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
+ <dd>Sebuah alat yang membantu mencari <em>bugs</em> untuk dikerjakan.</dd>
+</dl>
+</div>
diff --git a/files/id/tools/page_inspector/how_to/index.html b/files/id/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..2f18038ec9
--- /dev/null
+++ b/files/id/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/id/tools/page_inspector/index.html b/files/id/tools/page_inspector/index.html
new file mode 100644
index 0000000000..68f6b614ec
--- /dev/null
+++ b/files/id/tools/page_inspector/index.html
@@ -0,0 +1,53 @@
+---
+title: Page Inspector
+slug: Tools/Page_Inspector
+tags:
+  - CSS
+  - HTML
+  - Tools
+  - Web Development
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>Gunakan peninjau halaman untuk melihat dan memodifikasi HTML dan CSS dari sebuah halaman.</p>
+
+<p>Anda bisa melihat atau memeriksa halaman yang telah dimuat pada salinan lokal di firefox, atau pada remote target seperti pada perangkat Firefox OS atau firefox untuk android. Lihat <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>untuk mempelajari bagaimana cara menghubungkan developer tools pada sebuah remote target.</p>
+
+<hr>
+<h2 id="Mempelajari_Antarmuka_Pengguna">Mempelajari Antarmuka Pengguna</h2>
+
+<p>Untuk mengetahui cara menggunakan inspector/Peninjau, berikut <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">tur singkat dari UI</a>.</p>
+
+<hr>
+<h2 id="Paduan">Paduan</h2>
+
+<p>Untuk mengetahui apasaja yang anda bisa lakukan dengan inspector, lihat paduan berikut:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Membuaka Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Memeriksa dan merubah HTML</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Memeriksa dan mengubah box model</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Menuinjau dan memilih warna</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Mengubah posisi elemen dari sebuah halaman</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Melihat font</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">Menggunakan API Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Memilih Elemen</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Memeriksa dan mengubah CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Memeriksa event listeners</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Bekerja menggunakan animations</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Menubah Filter CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Melihat gambar latar</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Menggunakan Inspector dari Web Console</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Referensi">Referensi</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/id/tools/remote_debugging/index.html b/files/id/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..a917c007b1
--- /dev/null
+++ b/files/id/tools/remote_debugging/index.html
@@ -0,0 +1,34 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Remote_Debugging
+---
+<div>{{ToolsSidebar}}</div><p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+</ul>
+
+<h2 id="Firefox_for_Android">Firefox for Android</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p>
+
+<h2 id="Firefox_for_Metro">Firefox for Metro</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p>
+
+<h2 id="Firefox_OS">Firefox OS</h2>
+
+<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.</p>
+
+<h2 id="Thunderbird">Thunderbird</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p>
diff --git a/files/id/tools/webide/index.html b/files/id/tools/webide/index.html
new file mode 100644
index 0000000000..3cf3b7bf2b
--- /dev/null
+++ b/files/id/tools/webide/index.html
@@ -0,0 +1,458 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+translation_of: Archive/WebIDE
+---
+<div>{{ToolsSidebar}}</div><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="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p>
+
+<p>Here's what the WebIDE looks like:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">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="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<h3 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h3>
+
+<p>From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p>
+
+<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE#Remote_runtime">custom remote runtime</a>.</p>
+
+<h3 id="Adding_a_Simulator">Adding a Simulator</h3>
+
+<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p>
+
+<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p>
+
+<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p>
+
+<h3 id="Custom_runtimes">Custom runtimes</h3>
+
+<h4 id="Remote_runtime">Remote runtime</h4>
+
+<p>With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p>
+
+<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p>
+
+<p>This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br>
+ <br>
+ If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p>
+
+<p>Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p>
+
+<h4 id="Valence-enabled_runtimes">Valence-enabled runtimes</h4>
+
+<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p>
+
+<ul>
+ <li>Chrome on Android</li>
+ <li>Safari on iOS</li>
+ <li>Chrome Desktop</li>
+</ul>
+
+<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p>
+
+<h2 id="Selecting_a_runtime">Selecting a runtime</h2>
+
+<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p>
+
+<ul>
+ <li>If you select a Simulator, WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_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="display: block; height: 601px; margin-left: auto; margin-right: auto; width: 833px;"></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="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p>
+
+<h3 id="The_source_editor">The source editor</h3>
+
+<p>WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p>
+
+<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="Code_completion">Code completion</h4>
+
+<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="Inline_documentation">Inline documentation</h4>
+
+<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p>
+
+<h4 id="Saving_files">Saving files</h4>
+
+<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p>
+
+<h3 id="Removing_projects">Removing projects</h3>
+
+<p>To remove an app from WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_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="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;"></p>
+
+<div class="geckoVersionNote">
+<p>From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.</p>
+</div>
+
+<p>Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p>
+
+<h3 id="Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</h3>
+
+<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p>
+
+<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ However, when connecting to a real device we have a security policy in force:</p>
+
+<ul>
+ <li>On devices running Firefox OS versions up to 2.1, all installed apps on device that are <strong>not</strong> certified apps (so privileged and web / regular apps) appear in "Runtime Apps" by default.</li>
+ <li>On Firefox 2.1 and above, we changed this so that only apps installed via DevTools / WebIDE appear in "Runtime Apps", regardless of app type. We did this to protect potentially sensitive data that could be present in apps.</li>
+</ul>
+
+<p>To remove this restriction:</p>
+
+<ul>
+ <li>The device must be running a development build of Firefox OS 1.2+</li>
+ <li>You must disable the <code>DevTools restricted privileges</code> setting.</li>
+</ul>
+
+<p>To disable <code>DevTools restricted privileges</code>, connect to the runtime, and then, in the menu, go to <code>Runtime &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/id/tools/webide/troubleshooting/index.html b/files/id/tools/webide/troubleshooting/index.html
new file mode 100644
index 0000000000..d39320049b
--- /dev/null
+++ b/files/id/tools/webide/troubleshooting/index.html
@@ -0,0 +1,117 @@
+---
+title: WebIDE
+slug: Tools/WebIDE/Troubleshooting
+tags:
+  - Indonesia
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<div>{{ToolsSidebar}}</div><h2 id="Connecting_a_Firefox_OS_device_over_USB">Connecting a Firefox OS device over USB</h2>
+
+<p>If you're trying to connect a Firefox OS device to WebIDE and it doesn't show up, here are some things you can try:</p>
+
+<ul>
+ <li>Check your Firefox OS version: make sure your device is running<strong> Firefox OS 1.2/Boot2Gecko 1.2 or higher</strong>. 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>Enable remote debugging: in the Settings app on the device, go to <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+   <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check the box.</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>Disable screen lock on your device: 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>Make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer.</li>
+ <li>Check the USB cable you are using:
+  <ul>
+   <li>Try unplugging and replugging in the USB cable.</li>
+   <li>Try plugging the USB cable into a different port on your computer. You may have to alternate between ports.</li>
+   <li>Try a different USB cable. The cables that come with phones are often of poor quality and fail often.</li>
+   <li>Try a shorter USB cable. Long USB cables have been known to not work so well.</li>
+  </ul>
+ </li>
+ <li>Try disabling and re-enabling Remote Debugging in the Settings app on the device.</li>
+ <li>If <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">you disabled the ADB Addon Helper</a>, did you successfully run the <code>adb forward</code> command?</li>
+ <li>If you use Linux:
+  <ul>
+   <li>Make sure you added a <code>udev</code> rules file, as documented in step 3 of this guide to <a class="external external-icon" 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 class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values. Next, run the <code>adb devices</code> to make sure your device is in the list. If device appears to be "no permission", you need to restart adb server (e.g. <code>adb kill-server;adb start-server</code>).</li>
+  </ul>
+ </li>
+ <li>If you use Windows:
+  <ul>
+   <li>You need to install drivers, as documented in step 3 of this guide to <a class="external external-icon" 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 class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone web site</a> and drivers for Google devices on <a href="http://developer.android.com/sdk/win-usb.htm">Google web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <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">"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-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+  </ul>
+ </li>
+ <li>If you use Mac OS X:
+  <ul>
+   <li>If you're getting timeout errors connecting to both simulators and real devices, you may be unable to connect to localhost due to an empty /etc/hosts file. You can solve the problem by populating the file and flushing DNS cache <a href="https://discussions.apple.com/thread/2729411?tstart=0">as described here</a>.</li>
+   <li>If you're an EasyTether user, you will need to uninstall or disable EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Connecting_a_Firefox_OS_device_over_Wi-Fi">Connecting a Firefox OS device over Wi-Fi</h2>
+
+<ul>
+ <li>Check your version: Wi-Fi debugging requires Firefox 39 or higher, and a Firefox OS device running a build of Firefox OS 3.0 from 2015-03-27 or later.</li>
+ <li>The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. <a href="https://bugzil.la/1145772">Bug 1145772</a> aims to improve this soon. If you have trouble with this, try scanning with a few different orientations. If you chose "Scan and Remember, then you won't have to scan the code again the next time you connect your computer to this device.</li>
+</ul>
+
+<h2 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h2>
+
+<p>If you're trying to connect to a Firefox instance running on the Android OS and it doesn't show up, here are some things you can try:</p>
+
+<ul>
+ <li>Check your Firefox version: make sure your device is running<strong> Firefox 36 or higher</strong>. WebIDE will not detect older versions automatically, so you need to enable port forwarding and connect to the device port - follow the instructions <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">here</a>.</li>
+ <li>Make sure you have enabled remote debugging in Firefox: open Firefox for Android, open its menu, select <code>Settings</code>, and then check the checkbox at <code>Developer Tools &gt; Remote debugging</code>.</li>
+ <li>Make sure that USB debugging is allowed in the device's developer settings</li>
+ <li>If you still do not see your device in the WebIDE window, try toggling <code>Remote debugging</code> on the phone.
+  <ul>
+   <li>Disconnect your device from your computer and turn off <code>Remote debugging</code> on the phone.</li>
+   <li>Reconnect the device and turn on <code>Remote debugging</code> - this restarts the debugger instance on the phone.</li>
+   <li>Try connecting via WebIDE again.</li>
+  </ul>
+ </li>
+ <li>If using Windows, make sure that your Android device is recognized correctly and that it is using the Google USB Driver that is included with the Android SDK.</li>
+</ul>
+
+<h2 id="Connecting_to_other_browsers_(Chrome_Safari)">Connecting to other browsers (Chrome, Safari)</h2>
+
+<p>WebIDE makes use of <a href="/en-US/docs/Tools/Valence">Valence (formerly Firefox Tools Adapter)</a> to reach other browsers, like Chrome and Safari. </p>
+
+<p>If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the <a href="/en-US/docs/Tools/Valence">Valence page</a>.</p>
+
+<h2 id="Can't_debug_some_apps">Can't debug some apps</h2>
+
+<p>If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, 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>.</p>
+
+<h2 id="Unable_to_load_project_list">Unable to load project list</h2>
+
+<p>If you open WebIDE in one version of Firefox, and then downgrade to a previous Firefox version with the same profile, you may see the error "Unable to load project list" when opening WebIDE in the earlier Firefox version.</p>
+
+<p>This can occur when the storage system that WebIDE uses (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) needs to move or restructure its internal files for the newer Firefox version. The project list then becomes effectively inaccessible to older versions of Firefox.</p>
+
+<p>No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.</p>
+
+<p>If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:</p>
+
+<ol>
+ <li>Close Firefox</li>
+ <li>Find your Firefox profile directory</li>
+ <li>Find the <code>storage</code> folder inside the profile directory</li>
+ <li>Under some part of this file tree, there should be files and/or directories that start with <code>4268914080AsptpcPerjo</code> (a hashed name of the database)</li>
+ <li>Remove any such files and directories</li>
+ <li>Start Firefox and WebIDE again</li>
+</ol>
+
+<h2 id="Enable_logging">Enable logging</h2>
+
+<p>You can also enable verbose logging to gather diagnostics:</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>Open <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, with the string value <code>all</code>, and set <code>extensions.adbhelper@mozilla.org.debug</code> to <code>true</code>.</li>
+ <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li>
+ <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li>
+</ol>
+
+<h2 id="Get_help">Get help</h2>
+
+<p>Go to the <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> and we will try to help.</p>