aboutsummaryrefslogtreecommitdiff
path: root/files/de/tools
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/tools')
-rw-r--r--files/de/tools/3d_untersuchung/index.html99
-rw-r--r--files/de/tools/about_colon_debugging/index.html252
-rw-r--r--files/de/tools/add-ons/index.html17
-rw-r--r--files/de/tools/barrierefreiheits_inspektor/index.html136
-rw-r--r--files/de/tools/bildschirmgroessen-testen/index.html81
-rw-r--r--files/de/tools/browser_console/index.html157
-rw-r--r--files/de/tools/browser_werkzeuge/index.html42
-rw-r--r--files/de/tools/debugger/how_to/index.html11
-rw-r--r--files/de/tools/debugger/how_to/open_the_debugger/index.html22
-rw-r--r--files/de/tools/debugger/how_to/use_a_source_map/index.html32
-rw-r--r--files/de/tools/debugger/index.html369
-rw-r--r--files/de/tools/debugger/settings/index.html57
-rw-r--r--files/de/tools/debugger/source_map_errors/index.html70
-rw-r--r--files/de/tools/firefox_os_1.1_simulator/index.html352
-rw-r--r--files/de/tools/index.html149
-rw-r--r--files/de/tools/index/index.html9
-rw-r--r--files/de/tools/json_viewer/index.html26
-rw-r--r--files/de/tools/keyboard_shortcuts/index.html847
-rw-r--r--files/de/tools/netzwerkanalyse/index.html126
-rw-r--r--files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html27
-rw-r--r--files/de/tools/page_inspector/how_to/index.html13
-rw-r--r--files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html23
-rw-r--r--files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html231
-rw-r--r--files/de/tools/paint_flashing_tool/index.html94
-rw-r--r--files/de/tools/performance/index.html96
-rw-r--r--files/de/tools/remote_debugging/debugging_firefox_desktop/index.html38
-rw-r--r--files/de/tools/remote_debugging/firefox_for_android/index.html136
-rw-r--r--files/de/tools/remote_debugging/index.html44
-rw-r--r--files/de/tools/scratchpad/index.html85
-rw-r--r--files/de/tools/seiten_inspektor/index.html109
-rw-r--r--files/de/tools/seiten_inspektor/tastenkombinationen/index.html12
-rw-r--r--files/de/tools/shader-editor/index.html57
-rw-r--r--files/de/tools/storage_inspector/cache_storage/index.html15
-rw-r--r--files/de/tools/storage_inspector/cookies/index.html43
-rw-r--r--files/de/tools/storage_inspector/index.html200
-rw-r--r--files/de/tools/storage_inspector/indexeddb/index.html45
-rw-r--r--files/de/tools/storage_inspector/local_storage_session_storage/index.html20
-rw-r--r--files/de/tools/style_editor/index.html54
-rw-r--r--files/de/tools/web_konsole/hilfe/index.html65
-rw-r--r--files/de/tools/web_konsole/index.html582
-rw-r--r--files/de/tools/webide/index.html280
-rw-r--r--files/de/tools/webide/problemlösung/index.html165
-rw-r--r--files/de/tools/webide_clone/index.html279
43 files changed, 5567 insertions, 0 deletions
diff --git a/files/de/tools/3d_untersuchung/index.html b/files/de/tools/3d_untersuchung/index.html
new file mode 100644
index 0000000000..061ce4f11b
--- /dev/null
+++ b/files/de/tools/3d_untersuchung/index.html
@@ -0,0 +1,99 @@
+---
+title: 3D-Untersuchung
+slug: Tools/3D_untersuchung
+translation_of: Tools/3D_View
+---
+<div>{{ToolsSidebar}}</div>
+<div class="warning">
+<p>Seit Firefox 47 ist die 3D-Ansicht nicht mehr verfügbar.</p>
+
+<p>Es gibt ein Add-on, das diese Funktionalität erhält: <a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D</a>. Beachten Sie allerdings, dass auch dieses nicht mit dem <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">Multiprocess-Firefox</a> kompatibel ist.</p>
+</div>
+
+<p>Mit einem Klick auf die 3D-Untersuchung Schaltfläche gelangst du in in den 3D-Untersuchungsmodus. In diesem Modus werden die HTML Elemente als dreidimensionale Blöcke dargestellt. Die Verschachtelung der Inhalte wird so auf eine eindrückliche Art und Weise virtualisiert, was einem das Studieren des Aufbaus der Seite erleichtert.</p>
+
+<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
+
+<p>Durch Klicken uns Ziehen mit der Maus, kann man die Ansicht in alle Richtungen drehen und so die DOM Struktur von verschiedenen Winkeln aus betrachten. Auch Elemente ausserhalb des Bildschirmrands und solche, die versteckt sind, werden in dieser Ansicht sichtbar. Mit einem Klick auf ein Element, sieht man den entsprächenden Code im <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML panel</a> bzw. dem <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.</p>
+
+<p>Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">Liste blockierter Grafik-Treiber</a> für weitere Informationen.</p>
+
+<h2 id="Steuerung_der_3D-Ansicht">Steuerung der 3D-Ansicht</h2>
+
+<p>Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+ <tr>
+ <td class="header">Funktion</td>
+ <td class="header">Tastatur</td>
+ <td class="header">Maus</td>
+ </tr>
+ <tr>
+ <td>Vergrössern/Verkleinern</td>
+ <td>+ / -</td>
+ <td>Scroll wheel up/down</td>
+ </tr>
+ <tr>
+ <td>Nach links/rechts drehen</td>
+ <td>a / d</td>
+ <td>Maus nach links/rechtsziehen</td>
+ </tr>
+ <tr>
+ <td>Nach oben/unten kippen</td>
+ <td>w / s</td>
+ <td>Maus nach oben/unten ziehen</td>
+ </tr>
+ <tr>
+ <td>Ansicht nach links/rechts verschieben</td>
+ <td>← / →</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td>Ansicht nach oben/unten verschieben</td>
+ <td>↑ / ↓</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td>Vergrösserung/Verkleinerung zurücksetzten</td>
+ <td>0</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td>Ausgewähles Element fokusieren {{ fx_minversion_inline("13.0") }}</td>
+ <td>f</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td>Ansicht (Grösse und Sichtswinkel) zurücksetzten {{ fx_minversion_inline("12.0") }}</td>
+ <td>r</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td>Ausgewähltes Element ausblenden  {{ fx_minversion_inline("12.0") }}</td>
+ <td>x</td>
+ <td>-</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Anwendungsbeispiele">Anwendungsbeispiele</h2>
+
+<p>Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:</p>
+
+<ul>
+ <li>Zur Evaluierung von Fehlern bei der Verschachtelung. Oft schleichen sich Fehler bei der Verschachtelung von Inhalten ein. In der 3D-Ansicht können diese Fehler viel schneller gefunden werden.</li>
+ <li>Falls Inhalte gar nicht oder nicht vollständig angezeigt werden, kann die 3D-Ansicht helfen, die Fehlerquelle zu finden. Auch Elemente, welche sich ausserhalb des Bildschirmrands befinden, werden dadurch sichtbar.</li>
+ <li>Du kannst die Struktur deiner Seite genau analysieren und so dein Layout optimieren.</li>
+ <li>Und zu guter letzt: Es sieht einfach cool aus!</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Tools/Seiten_Inspektor">Seiteninspektor</a></li>
+ <li><a href="/de/docs/Tools" title="Tools">Firefox Tools für Webentwickler</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (Blog Eintrag)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/de/tools/about_colon_debugging/index.html b/files/de/tools/about_colon_debugging/index.html
new file mode 100644
index 0000000000..a342b78ee8
--- /dev/null
+++ b/files/de/tools/about_colon_debugging/index.html
@@ -0,0 +1,252 @@
+---
+title: 'about:debugging'
+slug: 'Tools/about:debugging'
+translation_of: 'Tools/about:debugging'
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>The <code>about:debugging</code> page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p>
+
+<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2>
+
+<p>There are two ways to open <code>about:debugging</code>:</p>
+
+<ul>
+ <li>Type <code>about:debugging</code> in the Firefox URL bar.</li>
+ <li>In the <strong>Tools</strong> &gt; <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li>
+</ul>
+
+<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p>
+
+<dl>
+ <dt>Setup</dt>
+ <dd>Use the Setup tab to configure the connection to your remote device.</dd>
+ <dt>This Firefox</dt>
+ <dd>Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p>
+
+<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p>
+
+<h2 id="Setup_tab">Setup tab</h2>
+
+<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3>
+
+<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p>
+
+<p>Before you connect:</p>
+
+<ol>
+ <li>Enable Developer settings on your Android device.</li>
+ <li>Enable USB debugging in the Android Developer settings.</li>
+ <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li>
+ <li>Connect the Android device to your computer using a USB cable.</li>
+</ol>
+
+<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p>
+
+<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the <strong>Refresh devices</strong> button again. The device should appear.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p>
+</div>
+
+<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.</p>
+
+<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p>
+
+<p>Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:</p>
+
+<p><img alt="The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser." src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p>
+
+<p>In Firefox 76 and above, the message can look like the following:</p>
+
+<p><img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png" style="height: 64px; width: 675px;"></p>
+
+<p>See <a href="#">Connection for Firefox for Android 68</a> for more information.</p>
+
+<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p>
+
+<p><img alt="Screenshot showing the remote debugging window, with the editable URL bar" src="https://mdn.mozillademos.org/files/17317/remote-debugger-w-URL-buttons.png" style="border: 1px solid black; display: block; height: 471px; margin: 0px auto; width: 1014px;"></p>
+
+<p>Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.</p>
+
+<p>Starting in Firefox 78, the URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking the <strong>Reload</strong> button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the <strong>Back</strong> and <strong>Forward</strong> buttons.</p>
+
+<h3 id="Connecting_over_the_Network">Connecting over the Network</h3>
+
+<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="This_Firefox">This Firefox</h2>
+
+<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p>
+
+<dl>
+ <dt>Temporary Extensions</dt>
+ <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd>
+ <dt>Extensions</dt>
+ <dd>This section lists information about the extensions that you have installed on your system.</dd>
+ <dt>Service Workers, Shared Workers, and Other Workers</dt>
+ <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p>
+
+<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p>
+
+<h2 id="Extensions">Extensions</h2>
+
+<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3>
+
+<p>With the <strong>Load Temporary Add-on</strong> button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the <strong>Temporary Extensions</strong> header.</p>
+
+<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p>
+
+<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p>
+
+<ul>
+ <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li>
+ <li>You can load an add-on without signing it and without needing to disable signing.</li>
+</ul>
+
+<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p>
+
+<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p>
+
+<p>You can use the following buttons:</p>
+
+<dl>
+ <dt>Inspect</dt>
+ <dd>Loads the extension in the debugger.</dd>
+ <dt>Reload</dt>
+ <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd>
+ <dt>Remove</dt>
+ <dd>Unloads the temporary extension.</dd>
+</dl>
+
+<p>Other information about the extension is displayed:</p>
+
+<dl>
+ <dt>Location</dt>
+ <dd>The location of the extension's source code on your local system.</dd>
+ <dt>Extension ID</dt>
+ <dd>The temporary ID assigned to the extension.</dd>
+ <dt>Internal UUID</dt>
+ <dd>The internal UUID assigned to the extension.</dd>
+ <dt>Manifest URL</dt>
+ <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd>
+</dl>
+
+<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3>
+
+<p>If you install an extension in this way, what happens when you update the extension?</p>
+
+<ul>
+ <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li>
+ <li>For other changes, click the <strong>Reload</strong> button. This does what it says:
+ <ul>
+ <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li>
+ <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li>
+ </ul>
+ </li>
+</ul>
+
+<h3 id="Installed_Extensions">Installed Extensions</h3>
+
+<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p>
+
+<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p>
+
+<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p>
+
+<div class="note">
+<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p>
+</div>
+
+<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p>
+</div>
+
+<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p>
+
+<p>{{EmbedYouTube("efCpDNuNg_c")}}</p>
+
+<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p>
+
+<h2 id="Workers">Workers</h2>
+
+<p>The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:</p>
+
+<ul>
+ <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li>
+ <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li>
+ <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li>
+</ul>
+
+<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p>
+
+<h3 id="Service_worker_state">Service worker state</h3>
+
+<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p>
+
+<ul>
+ <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li>
+ <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li>
+ <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li>
+</ul>
+
+<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p>
+
+<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools <a href="/en-US/docs/Tools/Application">Application panel</a>.</p>
+</div>
+
+<h3 id="Unregistering_service_workers">Unregistering service workers</h3>
+
+<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p>
+
+<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3>
+
+<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p>
+
+<h3 id="Service_workers_not_compatible">Service workers not compatible</h3>
+
+<div>
+<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p>
+</div>
+
+<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p>
+
+<h2 id="Connection_to_Firefox_for_Android_68">Connection to Firefox for Android 68</h2>
+
+<p>Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:</p>
+
+<ul>
+ <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox Preview</a>, if your desktop Firefox is the main release or Developer Edition</li>
+ <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox for Android Nightly</a></li>
+</ul>
+
+<p>If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">Firefox Extended Support Release (ESR)</a>, which is also based on version 68.</p>
+
+<p>Note that <code>about:debugging</code> is not enabled by default in Firefox ESR.  To enable it, open the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> (<code>about:config</code>) and set <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p>
+
+<p>If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">What happens to my profile if I downgrade to a previous version of Firefox?</a></p>
diff --git a/files/de/tools/add-ons/index.html b/files/de/tools/add-ons/index.html
new file mode 100644
index 0000000000..24ffbe79e9
--- /dev/null
+++ b/files/de/tools/add-ons/index.html
@@ -0,0 +1,17 @@
+---
+title: Add-ons
+slug: Tools/Add-ons
+tags:
+ - NeedsTranslation
+ - TopicStub
+ - Web Development
+ - 'Web Development:Tools'
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div><p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt>
+ <dd>Examine the data exchanged in a WebSocket connection.</dd>
+ <dd> </dd>
+</dl>
diff --git a/files/de/tools/barrierefreiheits_inspektor/index.html b/files/de/tools/barrierefreiheits_inspektor/index.html
new file mode 100644
index 0000000000..24195cabad
--- /dev/null
+++ b/files/de/tools/barrierefreiheits_inspektor/index.html
@@ -0,0 +1,136 @@
+---
+title: Barrierefreiheitsinspektor
+slug: Tools/Barrierefreiheits_inspektor
+translation_of: Tools/Accessibility_inspector
+---
+<p>{{ToolsSidebar}}</p>
+
+<p class="summary">Der Barrierefreiheitsinspektor bietet Zugriff auf wichtige Informationen, die auf der aktuellen Seite über die barrierefreie Strukturansicht den Hilfstechnologien zur Verfügung gestellt werden. So können Sie überprüfen, was fehlt oder ob Sie anderweitig darauf achten müssen. Dieser Artikel führt Sie durch die Hauptfunktionen des Barrierefreiheitsinspektor und dessen Verwendung.</p>
+
+<h2 id="Ein_sehr_kurzer_Leitfaden_zur_Barrierefreiheit">Ein (sehr) kurzer Leitfaden zur Barrierefreiheit</h2>
+
+<p>Barrierefreiheit ist die Praxis, Ihre Websites für möglichst viele Menschen nutzbar zu machen. Dies bedeutet, dass Sie alles versuchen sollten, um Personen nicht daran zu hindern, auf Informationen zuzugreifen, weil sie eine Behinderung haben oder andere persönliche Umstände sie einschränken wie das von ihnen verwendete Gerät, die Geschwindigkeit ihrer Netzwerkverbindung oder ihre geografische Position oder ihr Gebietsschema.</p>
+
+<p>Hier geht es vor allem darum, Informationen für Menschen mit Sehbehinderungen zu anzuzeigen - dies geschieht über die in Webbrowsern verfügbaren <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Zugänglichkeits-APIs</a>, die Informationen darüber liefern, welche Rollen die verschiedenen Elemente auf Ihrer Seite spielen (z.B. bestehen sie nur aus Text oder sind es Buttons, Links, Formularelemente, etc.?).</p>
+
+<p>Semantischen DOM-Elementen sind standardmäßig Rollen zugewiesen, die auf ihren Zweck hindeuten. Manchmal müssen Sie jedoch ein nicht-semantisches Markup (z. B. {{htmlelement ("div")}} s) verwenden, um ein komplexes benutzerdefiniertes Steuerelement zu erstellen, und das Steuerelement hat keine Standardrolle, die seinen Zweck widerspiegelt. In solch einer Situation können Sie <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>-Rollenattribute verwenden, um Ihre eigenen Rollen bereitzustellen.</p>
+
+<p>Rollen und andere Informationen, die von Browser-APIs zur Verfügung gestellt werden, werden in einer hierarchischen Struktur namens Zugänglichkeitsbaum dargestellt. Ähnlich wie der DOM-Baum, außer dass er eine begrenzte Anzahl von Elementen und etwas andere Informationen über sie enthält.</p>
+
+<p>Hilfstechnologien wie Screenreader nutzen diese Informationen, um herauszufinden, was auf einer Webseite vorhanden ist, lesen ihren Benutzern vor, was dort ist, und ermöglichen ihnen, mit der Seite zu interagieren. Der Zugänglichkeitsinspektor verwendet diese Informationen auch, um wertvolle Debugging-Funktionen für die Barrierefreiheit in den DevTools bereitzustellen.</p>
+
+<h2 id="Auf_den_Barrierefreiheitsinspektor_zugreifen">Auf den Barrierefreiheitsinspektor zugreifen</h2>
+
+<p>Der Barrierefreiheitsinspektor (verfügbar seit Firefox 61) wird in den DevTools standardmäßig nicht angezeigt. Um ihn einzuschalten, müssen Sie zu den DevTools-Einstellungen gehen (drücken Sie <kbd>F1</kbd> , oder gehen Sie zum "Drei Punkte" -Menü und wählen Sie <em>Einstellungen</em>) und aktivieren Sie das Kontrollkästchen <em>Barrierefreiheit </em>unter der Überschrift <em>Standard-Entwicklungswerkzeuge</em>. Die Registerkarte <em>Barrierefreiheit</em> im DevTools-Fenster wird angezeigt, auf die man klicken kann, um den Barrierefreiheitsinspektor anzuzeigen:</p>
+
+<p><img alt='Barrierefreiheitsregister in Firefox DevTools, deaktiviert, mit einem Button, der die Beschriftung trägt "Barrierefreiheitsfunktionen aktivieren"ures' src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
+
+<p>Anfangs sind die DevTools-Barrierefreiheitsfunktionen deaktiviert. (Es sei denn, Sie haben sie bereits in einer anderen Browser-Registerkarte aktiviert oder die Firefox-Barrierefreiheit-Engine wurde bereits gestartet, z. B. könnten Sie ein Screenreader-Benutzer oder -Tester sein). Dies liegt daran, dass die Eingabehilfen-Engine im Hintergrund ausgeführt wird, wenn die Barrierefreiheitsfunktionen aktiviert sind. Während sie ausgeführt wird, verlangsamt sie Leistung und Arbeitsspeicher; Daher stört es die Messwerte anderer Panels wie <a href="https://developer.mozilla.org/en-US/docs/Tools/Memory">Speicher </a>und <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Leistung </a>sowie die allgemeine Browserleistung. Aus diesem Grund sollten Sie die Barrierefreiheitsfunktionen ausschalten, wenn Sie sie nicht verwenden.</p>
+
+<p>Sie können die Funktionen mithilfe der Schaltfläche <em>Barrierefreiheitsfunktionen aktivieren</em> einschalten.</p>
+
+<p>Sobald der Inhalt des Bedienfelds geladen ist, können Sie ihn mithilfe der Schaltfläche <em>Barrierefreiheitsfunktionen deaktivieren</em> in der oberen linken Ecke wieder deaktivieren, es sei denn, die Barrierefreiheitsengine wurde zuvor zum Ausführen eines Bildschirmlesers ausgeführt. In diesem Fall wird diese Schaltfläche deaktiviert.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Sie die Eingabehilfen auf mehreren Registerkarten verwenden, werden sie auf allen Registerkarten deaktiviert.</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 labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></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. Where this comes from 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 the 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 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>help</em> — this is not implemented in Gecko, so it always returns an empty string. This will be removed from the inspector in Firefox 62 ({{bug(1467643)}}).</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>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>
+
+<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 such a 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. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</p>
+
+<h3 id="Accessibility_picker">Accessibility picker</h3>
+
+<p>In a similar way to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">Page Inspector HTML pane picker</a>, when the <em>Accessibility</em> tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.</p>
+
+<p>The accessibility tab picker differs in look slightly 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 whether 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 fundamentals</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/de/tools/bildschirmgroessen-testen/index.html b/files/de/tools/bildschirmgroessen-testen/index.html
new file mode 100644
index 0000000000..08921cb77d
--- /dev/null
+++ b/files/de/tools/bildschirmgroessen-testen/index.html
@@ -0,0 +1,81 @@
+---
+title: Bildschirmgrößen testen
+slug: Tools/bildschirmgroessen-testen
+translation_of: Tools/Responsive_Design_Mode
+---
+<div>{{ToolsSidebar}}</div><p><a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive Designs</a> passen sich an verschiedene Bildschirmgrößen an um auf verschiedenen Arten von Geräten, wie zum Beispiel Mobilgeräte oder Tablets, angemessen dargestellt zu werden. Die Ansicht "Bildschirmgrößen testen" macht es einfach zu sehen, wie Ihre Webseite oder Web-App auf verschiedenen Bildschirmgrößen aussehen wird.</p>
+
+<p>Im folgenden Bildschirmfoto wird eine Seite der mobilen Version von Wikipedia auf einer 320 mal 480 Pixel großen Fläche dargestellt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png">Die Ansicht "Bildschirmgrößen testen" ist leicht zu bedienen, da sie schnell und präzise die Größe der Darstellungsfläche ändern können.</p>
+
+<p>Natürlich könnten Sie einfach die größe Ihres Browser-Fensters ändern: aber wenn Sie dies tun, werden dann auch alle anderen Registerkarten im Registerkartenreiter verkleinert, was die Bedienung der Benutzeroberfläche des Browsers viel schwerer macht.</p>
+
+<p>Während die Ansicht "Bildschirmgrößen testen" aktiviert ist, können sie weiterhin wie gewohnt im skalierten Inhaltsbereich navigieren.</p>
+
+<h2 id="Aktivieren_und_deaktivieren">Aktivieren und deaktivieren</h2>
+
+<p>Es gibt zwei Möglichkeiten um Bildschirmgrößen zu testen:</p>
+
+<ul>
+ <li>Wählen Sie "Bildschirmgrößen testen" vom Web-Entwickler-Untermenü im Firefox-Menü (oder Extras-Menü, wenn die Menüleiste aktiviert ist oder Sie Mac OS X benutzen) aus</li>
+ <li>Klicken Sie auf die Schaltfläche "Bildschirmgrößen testen" in der <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Symbolleiste der Werkzeugleiste</a>.</li>
+</ul>
+
+<p>Es gibt drei Möglichkeiten, um die Ansicht wieder zu deaktivieren:</p>
+
+<ul>
+ <li>Wählen Sie den Menüpunkt "Bildschirmgrößen testen" erneut aus</li>
+ <li>Drücken Sie die Escape-Taste auf der Tastatur</li>
+ <li>Klicken Sie auf die x-Schaltfläche in der oberen, linken Ecke des Fensters.</li>
+</ul>
+
+<h2 id="Skalieren">Skalieren</h2>
+
+<p>Sie können die Inhaltsfläche auf eine von zwei Arten ändern:</p>
+
+<ul>
+ <li>indem Sie die <a href="#select-size">Größe mit der Auswahliste festlegen</a></li>
+ <li>indem Sie die Bedienelemente auf der rechten und unteren Seite der Inhaltsfläche, oder in der unteren, rechten Ecke, anklicken und verschieben</li>
+</ul>
+
+<p>Wenn Sie mit der zweiten Methode die Ansicht skalieren, können Sie die Funktionstaste (Steuertaste auf Mac OS X) gedrückt halten um die Größe beim Skalieren zu verfeinern. Dies macht das Auswählen der Größe viel präziser.</p>
+
+<div style="overflow: hidden;">
+<h2 id="Bedienelemente_der_Ansicht">Bedienelemente der Ansicht</h2>
+<img alt="" src="https://mdn.mozillademos.org/files/7525/bildschirmgroessen-testen-steuerungselemente.png" style="float: right; height: 356px; width: 545px;">
+<p>Auf der Oberseite des Fensters, in dem die Bildschirmgrößen getestet werden, gibt es fünf Bedienelemente:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td><strong>Schließen</strong></td>
+ <td>Schließen Sie die Ansicht "Bildschirmgrößen testen" und kehren Sie zur normalen Ansicht zurück</td>
+ </tr>
+ <tr>
+ <td><strong><a name="select-size">Größe auswählen</a></strong></td>
+ <td>Wählen Sie aus mehreren vorgegebenen Breiten x Höhen-Kombinationen oder geben Sie Ihre eigenen ein.</td>
+ </tr>
+ <tr>
+ <td><strong>Drehen</strong></td>
+ <td>Drehen Sie die die Ansicht und wechseln Sie so zwischen horizontaler und vertikaler Ansicht.</td>
+ </tr>
+ <tr>
+ <td>
+ <p><strong>Berührungsereignisse simulieren</strong></p>
+ </td>
+ <td>
+ <p>"Berührungsereignisse simulieren" aktivieren/deaktivieren: falls aktiviert, werden Mausereignisse in <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">Berührungsereignisse</a> umgewandelt.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <p><strong>Bildschirmfoto erstellen</strong></p>
+ </td>
+ <td>Bildschirmfoto der Inhaltsansicht erstellen. Bildschirmfotos werden im standardmäßigen Download-Ordner abgespeichert.</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/browser_console/index.html b/files/de/tools/browser_console/index.html
new file mode 100644
index 0000000000..39d8c889ec
--- /dev/null
+++ b/files/de/tools/browser_console/index.html
@@ -0,0 +1,157 @@
+---
+title: Browser Console
+slug: Tools/Browser_Console
+translation_of: Tools/Browser_Console
+---
+<div>{{ToolsSidebar}}</div><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>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>
+
+<p>To open the Browser Console, select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X).</p>
+
+<p>From Firefox 27 onwards, 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/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></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>
+
+<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 acess it, which adds a message to the Browser Console.</p>
+
+<pre class="brush: js">const Cu = Components.utils;
+const consoleJSM =
+Cu.import("resource://gre/modules/devtools/Console.jsm", {});
+let console = consoleJSM.console; //access exported symbol of "console" from the Console.jsm
+
+<code>console.log("Hello from Firefox code"); //output messages to the console</code></pre>
+
+<p> </p>
+
+<p>The full module with other functionality is found here on <a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Mozilla Cross-Reference</a>.</p>
+
+<p>For more methods of the console exported attribute of the Console.jsm see this article: <a href="/en-US/docs/Web/API/console?redirectlocale=en-US&amp;redirectslug=DOM%2Fconsole">Console</a></p>
+
+<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="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</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">var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/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">var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/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>
+
+<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>
+
+<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 OS X, 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/de/tools/browser_werkzeuge/index.html b/files/de/tools/browser_werkzeuge/index.html
new file mode 100644
index 0000000000..63c820a218
--- /dev/null
+++ b/files/de/tools/browser_werkzeuge/index.html
@@ -0,0 +1,42 @@
+---
+title: Browser_Werkzeuge
+slug: Tools/Browser_Werkzeuge
+tags:
+ - Developer
+ - Fehlerbehebung
+ - Firefox
+ - JavaScript
+translation_of: Tools/Browser_Toolbox
+---
+<div>{{ToolsSidebar}}</div><p>Die Browser-Werkzeuge sind wie die normale <a href="/de/docs/Tools/Web_Konsole">Webkonsole</a>, aber funktionieren mit dem ganzen Browser und nicht nur mit einem einzelnen Tab. Es erlaubt Ihnen die normalen Entwicklertools für den Browser an sich zu benutzen, statt nur für eine Seite. Dies erlaubt Ihnen dann auch das debuggen von Addons und vom browsereigenen JavaScript Code und nicht nur von Internetseiten.</p>
+
+<h2 id="Öffnen_der_Browser-Werkzeuge">Öffnen der Browser-Werkzeuge</h2>
+
+<p>Die Browser-Werkzeuge sind nicht standardmäßig aktiviert. Um dies zu tun, müssen Sie diese Schritte befolgen:</p>
+
+<ul>
+ <li>öffnen Sie die <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a></li>
+ <li>Klicken Sie auf "<em>chrome-Debugging aktivieren</em>" und <em>"Externes Debugging aktivieren".</em></li>
+</ul>
+
+<p>Jetzt sollten sie einen neuen Menüpunkt mit dem Namen "Browser-Werkzeuge" sehen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6661/open-menu.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 508px;">Nach dem Klick auf Browser Toolbox wird Ihnen eine Meldung wie folgt angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 554px;">Bestätigen Sie diese mit OK und die Browser Toolbox wird in einem seperatem Fenster geöffnet:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">Sie sehen alle JavaScript Dateien, die vom Browser und den laufenen Add-Ons, geladen wurden und können diese debuggen. Außerdem haben Sie Zugriff auf folgende Entwickler Werkzeuge (developer tools):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/tools/debugger/how_to/index.html b/files/de/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..084f1717e5
--- /dev/null
+++ b/files/de/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+ - NeedsTranslation
+ - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/de/tools/debugger/how_to/open_the_debugger/index.html b/files/de/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..1fe2d0fb8b
--- /dev/null
+++ b/files/de/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,22 @@
+---
+title: Öffne den Debugger
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Es gibt drei Möglichkeiten den Debugger zu öffnen:</p>
+
+<ul>
+ <li>Wähle "Debugger" im Untermenü "Web-Entwickler" (oder "Werkzeuge" wenn du die die Menüleite eingeblendet hast oder Mac OS X benutzt) im Firefoxmenü.</li>
+ <li>
+ <p>Drücke die Tastenkombination <kbd>Strg</kbd> <kbd>Shift</kbd> <kbd>S</kbd>(<kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd> in OS X).</p>
+
+ <div class="blockIndicator note"><strong>Note:</strong> Wenn Firefox 66 veröffentlicht wurde, wird diese Tastenkombination nicht mehr den Debugger öffnen.</div>
+ </li>
+ <li>Drück die Menütate ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ), drücke"Developer", wähle dann "Debugger".</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
+
+<p> </p>
diff --git a/files/de/tools/debugger/how_to/use_a_source_map/index.html b/files/de/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..db733cd8f2
--- /dev/null
+++ b/files/de/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,32 @@
+---
+title: Use a source map
+slug: Tools/Debugger/How_to/Use_a_source_map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:</p>
+
+<ul>
+ <li>sources are often combined and <a href="https://en.wikipedia.org/wiki/Minification_(programming)">minified</a> to make delivering them from the server more efficient.</li>
+ <li>JavaScript running in a page is often machine-generated, as when compiled from a language like <a href="http://coffeescript.org/">CoffeeScript</a> or <a href="http://www.typescriptlang.org/">TypeScript</a>.</li>
+</ul>
+
+<p>In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.</p>
+
+<p>To enable the debugger to work with a source map, you must:</p>
+
+<ul>
+ <li>generate the source map</li>
+ <li>include a comment in the transformed file, that points to the source map. The comment's syntax is like this:</li>
+</ul>
+
+<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>In the video above we load <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:</p>
+
+<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
+
+<p>In the Debugger's <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a>, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.</p>
diff --git a/files/de/tools/debugger/index.html b/files/de/tools/debugger/index.html
new file mode 100644
index 0000000000..e105ba65b5
--- /dev/null
+++ b/files/de/tools/debugger/index.html
@@ -0,0 +1,369 @@
+---
+title: Debugger
+slug: Tools/Debugger
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Der JavaScript Debugger ermöglicht es dir, schrittweise durch den JavaScript Code zu gehen und dabei seinen Zustand zu sehen und zu verändern, um Fehler im Code einfacher zu finden.</p>
+
+<p>Man kann ihn benutzen, um Code lokal in Firefox zu debuggen, oder remote - zum Beispiel auf einem Firefox-OS-Gerät oder einem Firefox auf Android. In dieser Anleitung wird davon ausgegangen, dass du lokalen Code bearbeitest, aber das meiste trifft auch für das Remote-Debugging zu. Zu den Unterschieden siehe die <a href="/de/docs/Tools/Remote_Debugging">Anleitung zum Remote-Debugging</a>.</p>
+
+<p>Um den Debugger zu öffnen, wählt man einfach "Debugger" aus dem Webentwickler-Untermenü von Firefox (oder im Werkzeuge-Menü, wenn die Menüleiste benutzt wird oder du auf Mac OS X arbeitest), oder indem man die Tastenkombination (das "Shortcut") <em>Control-Shift-S</em> (<em>Command-Option-S</em> auf Mac) auf der Tastatur drückt.</p>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> erscheint am unteren Rand des Browserfensters. Als Standardeinstellung ist der Debugger aktiviert. So sieht sie aus, wenn sie zum ersten mal geöffnet wird:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5955/debugger-startup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Und das ist die Ansicht während des Debugging-Prozesses:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5957/debugger-breakpoint-hit.png" style="display: block; margin-left: auto; margin-right: auto;">In dieser Anleitung werden wir uns zunächst kurz die Benutzeroberfläche des Debuggers ansehen und dann beschreiben, wie man einige häufig vorkommende Debuggingaufgaben durchführt.</p>
+
+<h2 id="Die_Benutzeroberfläche_des_Debuggers"><a name="Benutzeroberfläche"></a>Die Benutzeroberfläche des Debuggers</h2>
+
+<p>Die Benutzeroberfläche ("User Interface", UI) ist in vier Bereiche aufgeteilt, die wir uns nacheinander ansehen werden:</p>
+
+<ul>
+ <li>die Werkzeugleiste ("toolbar")</li>
+ <li>die Quellcode-Dateiliste ("source list pane")</li>
+ <li>der Quellcodebereich ("source pane")</li>
+ <li>die Variablenliste ("variables pane")</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5959/debugger-sections.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Die_Quellcode-Dateiliste"><a name="Quellcode-Dateiliste">Die Quellcode-Dateiliste</a></h3>
+
+<p>Auf der linken Seite siehst du eine Liste mit allen JS-Quelldateien, die von der aktuellen Seite geladen wurden. Man kann jede davon auswählen, um sie zu debuggen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5961/debugger-source-list-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Die Quelldateien sind unter Überschriften eingeordnet, die angeben, von wo sie geladen wurden. Hier ein Beispiel für eine Quellcode-Dateiliste, wenn eine Seite von developer.mozilla.org geladen ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5965/debugger-source-list-pane-only.png" style="display: block; height: 275px; margin-left: auto; margin-right: auto; width: 250px;"></p>
+
+<p>Die Dateinamen und Domains stimmen überein mit den folgenden <code>script</code>-Tags im Quellcode der Seite:</p>
+
+<pre class="brush: html"><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">/en-US/jsi18n/build:8987063</a>"&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>
+</span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://login.persona.org/include.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"&gt;</span><span>&lt;/<span class="end-tag">script&gt;
+<span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<span><a class="attribute-value">//mozorg.cdn.mozilla.net/en-US/</a>libs/jquery-1.7.1.min.js</span>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"&gt;</span><span>&lt;/<span class="end-tag">script&gt;</span></span></span></span>
+<span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">//mozorg.cdn.mozilla.net/en-US/tabzilla/tabzilla.js</a>" <span class="attribute-name">async</span>&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span></pre>
+
+<p>In der Quellcode-Dateiliste kann man einfach eine der Dateien anklicken, um sie im Quellcodebereich anzeigen und untersuchen zu können.</p>
+
+<p>Haltepunkte ("Breakpoints"), die man durch Klick neben eine Codezeile gesetzt hat, erscheinen unter dem Dateinamen.<img alt="" src="https://mdn.mozillademos.org/files/5967/debugger-breakpoints-set.png" style="display: block; margin-left: auto; margin-right: auto;">Mit der Checkbox kann man Breakpoints an- und ausschalten. Durch Rechts-Klick auf einen Brakepoint-Eintrag in der Liste kann man ein Kontextmenü anzeigen lassen, mit dem man</p>
+
+<ul>
+ <li>einzelne oder alle Haltepunkte aktivieren oder deaktivieren kann (oder alle Haltepunkte <em>bis auf</em> den angeklickten)</li>
+ <li>Bedingungen ("conditions") definieren kann, unter denen die Ausführung an dieser Stelle unterbrochen werden soll (oder diese Bedingungen verändern, wenn sie bereits gesetzt sind)</li>
+</ul>
+
+<p>Durch Klick auf den "Augapfel" kann man das Verdecken ("black boxing") für eine bestimmte Quelle an- und abschalten (z.B. Sprünge in JavaScript-Bibliotheken verhindern). Mehr Informationen dazu findest du unter "<a href="#black-box-a-source" title="#black-box-a-source">Black box a source</a>".</p>
+
+<h3 id="Quellcodebereich_2"><a name="Quellcodebereich">Quellcodebereich</a></h3>
+
+<p>Hier wird die aktuell geladene JavaScript-Datei angezeigt. Haltepunkte ("Breakpoints", im Bild "Breakpoint Set") sind die blauen Kreise neben den Zeilennummern, während Haltepunkte, an der die Code-Ausführung aktuell gestoppt wurde, einen grünen Pfeil innerhalb des Kreises haben ("Breakpoint Hit"):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5969/debugger-breakpoint-hit-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Im Quellcodebereich kann man über das Kontextmenü folgende Aufgaben erledigen:</p>
+
+<ul>
+ <li>Breakpoints setzen</li>
+ <li>bedingte Breakpoints setzen</li>
+ <li>einen Überwachungsausdruck für die Auswahl hinzufügen</li>
+ <li>die <a href="#Skriptsuche">Skriptsuche</a> benutzen bzw. mit Hilfe eines solchen Filters suchen</li>
+</ul>
+
+<h3 id="Werkzeugleiste_2"><a name="Werkzeugleiste">Werkzeugleiste</a></h3>
+
+<p>Die Werkzeugleiste ("toolbar") besteht aus vier Teilen:</p>
+
+<ul>
+ <li>eine Buttonleiste, mit der man die Bewegung durch das Script steuern kann (Pause/Weiter, Hineinspringen, Verlassen, Ausführen)</li>
+ <li>eine Visualisierung des "Call stack" (Aufrufliste)</li>
+ <li>der Scriptfilter</li>
+ <li>Buttons, mit denen man die <a href="#Variablenliste">Variablenliste</a> und die Debugger-Einstellungen ein- und ausklappen kann</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5733/debugger-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Die vier Buttons auf der linken Seite haben folgende Funktionen:</p>
+
+<ul>
+ <li><strong>Pause/Weiter</strong> (F6): Unterbricht die Skript-Ausführung bzw. setzt sie fort. Wenn der Schalter blau und "gedrückt" dargestellt wird wie oben, ist die Ausführung unterbrochen - entweder weil du selbst diesen Button gedrückt hast, oder weil sie an einem Breakpoint (Haltepunkt) angekommen ist. ("Pause/Resume<strong>"</strong>)</li>
+ <li><strong>Ausführen</strong> (F7): Führt die aktuelle JavaScript-Codezeile aus und springt zur nächsten. ("Step over")</li>
+ <li><strong>Hineinspringen</strong> (F8): Springt in die Funktion, die in der aktuellen JavaScript-Zeile aufgerufen wird. ("Step into")</li>
+ <li><strong>Verlassen</strong> (Shift-F8): Lässt das Skript durchlaufen (und führt es aus), bis die aktuelle Funktion beendet ist. ("Step out")</li>
+</ul>
+
+<p>Die visuelle Darstellung des "Call stack" (Liste der Code-Unterbrechungen, an denen  eine Ebene tiefer in eine neue Funktion gesprungen wurde) zeigt die Liste aller Code-Stellen an denen Funktionsaufrufe zum aktuellen Breakpoint geführt haben. Über diese Liste kann man herausfinden, wie das Programm "an die aktuelle Stelle gekommen ist".</p>
+
+<p>Durch Klick auf die Einträge wird im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> die Absprungstelle angezeigt und man kann nachvollziehen, von wo gesprungen wurde. Gleichzeitig werden in der <a href="#Variablenliste">Variablenliste</a> die Variablenwerte zum Zeitpunkt des jeweiligen Funktionsaufrufs anzeigt. Oft lässt sich dadurch herausfinden, ob und warum Parameter falsch übergeben wurden und wo der eigentliche Fehler aufgetreten ist. Auch wenn Funktionen von verschiedenen Stellen im Code aufgerufen werden, lässt sich über den Stack herausfinden, um welchen Fall es sich handelt.</p>
+
+<h4 id="Skriptsuche_2"><a name="Skriptsuche"><strong>Skripts</strong>uche</a></h4>
+
+<p>Mit der Skriptsuche ("script filter") kann man alle drei Debugger-Bereiche durchsuchen. Man kann dem Suchbegriff eines der folgenden Sonderzeichen voranstellen, um verschiedene Sonderfunktionen zu nutzen.</p>
+
+<dl>
+</dl>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Prefix</th>
+ <th scope="col">Function</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Nichts</td>
+ <td>Skripte durchsuchen, die in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> angezeigt werden.</td>
+ </tr>
+ <tr>
+ <td>!</td>
+ <td>In sämtlichen Dateien nach dem Suchbegriff suchen.</td>
+ </tr>
+ <tr>
+ <td>@</td>
+ <td>Nur nach Funktions-Definitionen in allen Dateien suchen, die den Begriff enthalten.</td>
+ </tr>
+ <tr>
+ <td>#</td>
+ <td>Nur in der Datei, die aktuell im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> angezeigt wird, nach dem Begriff suchen.</td>
+ </tr>
+ <tr>
+ <td>:</td>
+ <td>Zu einer Zeilennummer springen (in der aktuell im<a href="#Quellcodebereich" title="#source-pane"> Quellcodebereich</a> angezeigten Datei).</td>
+ </tr>
+ <tr>
+ <td>*</td>
+ <td>Variablen durchsuchen, die in der <a href="#Variablenliste">Variablenliste</a> angezeigt werden.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Diese Optionen werden in einem Popup angezeigt, wenn du in das Suchfeld klickst, und sie sind außerdem über das Kontextmenü im<a href="#Quellcodebereich" title="#source-pane"> Quellcodebereich</a> erreichbar. Die Sonderzeichen können auch kombiniert werden, um präzisere Suchen machen: "<em>file.js:12</em>" öffnet zum Beispiel file.js und springt in Zeile 12. "<em>mod#onLoad</em>" sucht in allen Dateien, die "mod" im Namen enthalten nach dem Begriff "onLoad". Mit der Return-/Enter-Taste kann von einem zum nächsten Ergebnis gesprungen werden.</p>
+
+<h4 id="Debugger-Einstellungen"><a name="Einstellungen">Debugger-Einstellungen</a></h4>
+
+<p>Am rechten Ende der Werkzeugleiste befinden sich zwei weitere Buttons. Der erste schaltet zwischen Ein- und Ausblenden der <a href="#Variablenliste">Variablenliste</a> hin und her. Mit dem zweiten kann man zwischen verschiedenen Debugger-Einstellungen umschalten:</p>
+
+<p>With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td>
+ <p><strong>Auto Prettify Minified Sources</strong></p>
+ </td>
+ <td>Ist diese Option eingeschaltet, findet der Debugger automatisch minimierte JavaScript-Dateien und stellt sie in lesbarer Form dar.</td>
+ </tr>
+ <tr>
+ <td>
+ <p><strong>Pause bei Exceptions</strong></p>
+ </td>
+ <td>Skriptausführung automatisch unterbrechen, wenn eine JavaScript-Exception geworfen wird.</td>
+ </tr>
+ <tr>
+ <td><strong>Ignore caught exceptions</strong></td>
+ <td>
+ <p>Wenn diese Einstellung gesetzt ist (Voreinstellung) und "Pause bei Exceptions" aktiviert ist, wird nur noch bei Fehlern unterbrochen, die nicht mit <code>try-catch</code> abgefangen werden. Diese Einstellung ist Standard, weil man davon ausgehen kann, dass abgefangene Exceptions im Programm ordnungsgemäß behandelt werden.</p>
+
+ <div class="geckoVersionNote">
+ <p>Neue Option in Firefox 26.</p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td><strong>Show panes on startup</strong></td>
+ <td>Wenn diese Option aktiviert ist, wird die <a href="#Variablenliste">Variablenliste</a> des Debuggers angezeigt, sobald der Debugger zum ersten mal aktiviert wird.</td>
+ </tr>
+ <tr>
+ <td><strong>Show only enumerable properties</strong></td>
+ <td>Enabling this option adds a "Filter variables" search box to the <a href="#variables-pane" title="#variables-pane">variables panel</a>, so that you can filter the displayed list of variables.</td>
+ </tr>
+ <tr>
+ <td><strong>Show variables filter box</strong></td>
+ <td>Do not display non-enumerable JavaScript properties</td>
+ </tr>
+ <tr>
+ <td><strong>Show original sources</strong></td>
+ <td>Enabling this option will make the debugger use <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.</td>
+ </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h3 id="Variablenliste_2"><a name="Variablenliste">Variablenliste</a></h3>
+
+<p>In der Variablenliste kann man sehen, welche Werte die Variablen an einer bestimmten Stelle im Programm gerade haben - und man kann sie sogar für Versuche manuell verändern und das Skript dann weiterlaufen lassen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5737/debugger-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Variablenwerte_beobachten">Variablenwerte beobachten</h4>
+
+<p>Die Variablen sind nach Geltungsbereich ("scope") gruppiert: im Funktions-Scope sieht man die (standardmäßig vorhandenen) Werte von <code>arguments</code> und <code>this</code> und lokale Variablen, die in der Funktion definiert wurden (im Beispiel: <code>user</code> und <code>greeting</code>).</p>
+
+<p>Ähnlich verhält es sich mit globalen Variablen, die auf der obersten Ebene des JavaScript-Files (also nicht in Funktionen) definiert wurden - im Bild etwa <code>greetme</code>, aber auch standardmäßig vorhandene Variablen wie <code>localStorage</code> und <code>console</code>.</p>
+
+<p>Objekte können mit dem kleinen Pfeil links von ihnen auf- und zugeklappt werden. Dadurch werden ihre Eigenschaften (und Funktionen) und deren Werte sichtbar.</p>
+
+<p>Wenn man mit dem Cursor über die Variablen fährt, wird ein Tooltip mit weiteren Informationen angezeigt - bei Rollover über das <code>greeting</code>-Objekt wird zum Beispiel "<em><s>configurable</s> enumerable writable</em>" angezeigt. Weitere Details zur Bedeutung dieser Eigenschaften unter <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a>.</p>
+
+<p>Die angezeigten Variablen lassen sich filtern - entweder durch Nutzung des "*"-Modifiers in the <a href="#Skriptsuche">Skriptsuche</a>, oder durch Text-Eingabe des Filters (#,!,...) vor dem Suchbegriff im Suchfeld, wenn diese Option in den <a href="#Einstellungen">Debugger-Einstellungen</a> aktiviert wurde.</p>
+
+<h4 id="Variablenwerte_verändern"><a name="Variablenwerte_veraendern">Variablenwerte verändern</a></h4>
+
+<p>Variablenwerte können einfach manuell verändert werden, indem man auf die Werte klickt und einen anderen Wert eingibt. Wenn man etwa auf <code>"Hi, Dr. Nick!"</code> klickt, den Variablenwert von <code>greeting</code>, kann man die Begrüßung ändern und das Programm mit diesem Wert weiter arbeiten lassen.</p>
+
+<h4 id="Überwachungsausdrücke"><a name="watch-expressions">Überwachungsausdrücke</a></h4>
+
+<p>Überwachungsausdrücke sind Ausdrücke, die jedesmal ausgewertet werden, wenn die Code-Ausführung gestoppt wird. Mit Hilfe von Überwachungsausdrücken kann man sich einen Überblick über Werte verschaffen, die nicht direkt in der Variablenliste angezeigt werden - wie etwa bestimmte Eigenschaften eines Objekts, die für das Verständnis des Codeablaufs gerade erforderlich sind (siehe Beispiel <code>user.value</code> im Bild). Oder Variablen im Code, die nicht mit <code>var</code> deklariert wurden und daher vom Debugger nicht in der Liste angezeigt werden - oder Werte, die nur mit einer getter-Methode ausgelesen werden können (wie etwa <code>user.getValue("something")</code>) oder jQuery-Ausdrücke wie <code>$("div.myclass&gt;table")</code>.</p>
+
+<p>Einfach auf "Überwachungsausdruck hinzufügen" über der Variablenliste klicken ("Add watch expression") und einen Ausdruck genauso eingeben, wie man es im Code an der aktuellen Stelle machen würde, um einen Wert zu erhalten. Dieser Wert wird dann, während man durch den Code geht, bei jedem Programm-Stop berechnet und wie die Werte der Variablen in der Liste angezeigt.<img alt="" src="https://mdn.mozillademos.org/files/5765/debugger-watch.png" style="display: block; margin-left: auto; margin-right: auto;">Auf diese Weise kann man beim Durchlaufen des Programmes dabei zusehen, wie bestimmte Werte sich ändern. In dem Moment, wo eine Veränderung stattfindet, wird der Überwachungsausdruck kurz gelb hinterlegt, so dass man die Änderungen auch aus dem Augenwinkel mitbekommt, während man den Programmcode liest.</p>
+
+<p>Selbstverständlich kann man auch mehrere Ausdrücke gleichzeitig in der Liste überwachen. Um einen Ausdruck wieder zu entfernen, klickt man einfach auf das kleine "x", das rechts neben dem Überwachungsausdruck erscheint, wenn man mit dem Cursor darüber fährt.</p>
+
+<h2 id="Wie_kann_ich...">Wie kann ich...?</h2>
+
+<h3 id="den_Debugger_öffnen">den Debugger öffnen</h3>
+
+<p>Einfach im Webentwickler-Submenü "Debugger" auswählen (oder in der Firefox-Menüleiste unter "Werkzeuge &gt; Webentwickler &gt; Debugger" klicken, falls du Mac OS X nutzt oder die Menüleiste eingeblendet hast). Alternativ auch mit <em>Control-Shift-S</em> (bzw. <em>Command-Option-S</em> auf Mac).</p>
+
+<h3 id="eine_Quelldatei_finden">eine Quelldatei finden</h3>
+
+<p>Quelldateien ("source files") sind leicht zu finden: Wenn der Debugger geöffnet ist, werden alle JavaScript Quelldateien ("source files") links in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> aufgelistet. Wenn die Liste zu lang ist, ist es of einfacher, die <a href="#Skriptsuche">Skriptsuche</a> oben rechts zu benutzen.</p>
+
+<h3 id="Codestellen_in_einer_Datei_finden">Codestellen in einer Datei finden</h3>
+
+<p>Um eine Funktion zu finden, nach einem Stichwort zu suchen oder in eine bestimmte Zeile im Code zu sprichen, der im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> geöffnet ist, kann man die Spezialfilter der <a href="#Skriptsuche">Skriptsuche</a> verwenden.</p>
+
+<h3 id="Breakpoint_setzen">Breakpoint setzen</h3>
+
+<p>Um einen Haltepunkt ("breakpoint") in einer Datei zu setzen, die im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> geöffnet ist:</p>
+
+<ul>
+ <li>etweder auf die Zeilennummer neben der Codezeile klicken, wo unterbrochen werden soll</li>
+ <li>oder über der Codezeile selbst das Kontextmenü öffnen (Rechtsklick, Ctrl-Klick) und dort "Haltepunkt hinzufügen" wählen ("Add Breakpoint").</li>
+</ul>
+
+<p>Jeder Breakpoint wird an drei Stellen im Debugger angezeigt:</p>
+
+<ul>
+ <li>in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> unter dem Dateinamen</li>
+ <li>die Zeile im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> ist neben den Zeilennummern mit einem blauen Kringel markiert</li>
+ <li>die graue Leiste rechts neben der Quellcode-Scrollbar zeigt alle Haltepunkte als kleine blaue Kästchen (im Maßstab der Scrollbar, also auch aktuell im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> nicht sichtbare Haltepunkte)</li>
+</ul>
+
+<p>In dem Screenshot unten siehst du Breakpoints in den Zeilen 7 und 65 der JavaScript-Datei:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5743/debugger-breakpoint-set-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Einen_bedingten_Breakpoint_setzen">Einen bedingten Breakpoint setzen</h3>
+
+<p>Um einen bedingten Haltepunkt  ("conditional breakpoint") zu setzen, an dem nur in bestimmten Fällen unterbrochen werden soll, öffnet man in der betreffenden Zeile das Kontextmenü und wählt "Bedingten Haltepunkt hinzufügen" ("Add conditional breakpoint"). In dem Textfeld, das sich daraufhin öffnet, kann einfach ein Boolscher Ausdruck eingesetzt werden. Die Syntax ist genau die gleiche wie in der Klammer einer if-Anweisung:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5747/debugger-conditional-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;">Um die Haltebedingung ("condition") zu verändern oder einem "normalen" Breakpoint nachträglich eine Bedingung hinzuzufügen, kann einfach das Kontextmenü auf dem Breakpoint geöffnet werden und "Haltebedingung  hinzufügen" ("Configure conditional breakpoint") gewählt werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5749/debugger-configure-conditional-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Breakpoint_deaktivieren">Breakpoint deaktivieren</h3>
+
+<p>Um einen Brakepoint außer Kraft zu setzen ("disable a breakpoint") ohne ihn zu löschen:</p>
+
+<ul>
+ <li>entweder: Häkchen in der Checkbox neben dem Breakpoint-Eintrag in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> entfernen</li>
+ <li>oder: über das Kontextmenü über dem Eintrag in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> und dort "Haltepunkt deaktivieren" ("Disable breakpoint") klicken</li>
+</ul>
+
+<h3 id="Dem_Programmablauf_folgen">Dem Programmablauf folgen</h3>
+
+<p>Wenn die Ausführung des Codes an einem Breakpoint gestoppt wird, kannst du Schritt für Schritt die Abarbeitung Programmzeilen und einzelner Befehle folgen. Dazu verwendet man die vier Buttons (Pause/Weiter, Hineinspringen, Verlassen, Ausführen) oben links in der <a href="#Werkzeugleiste">Werkzeugleiste</a> ("toolbar"):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5769/debugger-stepping-through.png" style="display: block; margin-left: auto; margin-right: auto;">Die vier Buttons auf der linken Seite haben folgende Funktionen:</p>
+
+<ul>
+ <li><strong>Pause/Weiter</strong> (F6): Unterbricht die Skript-Ausführung bzw. setzt sie fort. Wenn der Schalter blau und "gedrückt" dargestellt wird wie oben, ist die Ausführung unterbrochen - entweder weil du selbst diesen Button gedrückt hast, oder weil sie an einem Breakpoint (Haltepunkt) angekommen ist. ("Pause/Resume<strong>"</strong>)</li>
+ <li><strong>Ausführen</strong> (F7): Führt die aktuelle JavaScript-Codezeile aus und springt zur nächsten. ("Step over")</li>
+ <li><strong>Hineinspringen</strong> (F8): Springt in die Funktion, die in der aktuellen JavaScript-Zeile aufgerufen wird. ("Step into")</li>
+ <li><strong>Verlassen</strong> (Shift-F8): Lässt das Skript durchlaufen (und führt es aus), bis die aktuelle Funktion beendet ist. ("Step out")</li>
+</ul>
+
+<h3 id="Source_Maps">Source Maps</h3>
+
+<p>JavaScript-Quellcode wird oft aus mehreren Dateien zusammengefasst und das Ergebnis wird "minified" (komprimiert), um Serverbelastung und Ladezeiten zu optimieren. Immer häufiger ist das geladene JavaScript auch Maschinen-generiert, zum Beispiel aus Sprachen wie CoffeeScript.</p>
+
+<p>Durch die Nutzung von <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, kann der Debugger den gerade ausgeführten Code auf JS-Dateien "mappen", die für Menschen bequemer lesbar sind - also die entsprechenden Stellen in den Menschen-lesbaren Dateien anzeigen, was das Debuggen sehr erleichtert.</p>
+
+<p>Dazu muss man dem Debugger mitteilen, dass es solche Source maps zum verwendeten Code gibt, indem man in den <a href="#Einstellungen">Debugger-Einstellungen</a> (Zahnrad-Icon oben rechts) auf "Originalquellen anzeigen" klickt ("Show original sources"):<img alt="" src="https://mdn.mozillademos.org/files/5763/debugger-show-original-sources.png" style="display: block; margin-left: auto; margin-right: auto;">Damit das funktioniert, muss man in der Quelldatei eine Mapping-URL in einem Kommentar angegeben haben, der dem Debugger sagt, wo sich die alternativen Dateien befinden. Ein solcher Kommentar in der JavaScript-Datei sollte folgendermaßen aussehen:</p>
+
+<p><code>//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></p>
+
+<h3 id="Variablenwerte_prüfen">Variablenwerte prüfen</h3>
+
+<p>Wenn der Debugger an einem Haltepunkt ("breakpoint") die Programm-Ausführung unterbricht, kann man sich die aktuellen Werte der Variablen an dieser Stelle im Code ansehen. Sie werden rechts in der <a href="#Variablenliste">Variablenliste</a> angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5737/debugger-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Rechts befindet sich die <a href="#Variablenliste">Variablenliste</a>. Die Variablen werden in Blöcken nach Geltungsbereichen ("scopes") gefiltert angezeigt. Obje können ausgeklappt werden, wenn man einzelne Eigenschaften sehen möchte (siehe <a href="#Variablenliste">Variablenwerte</a> oben). Auch über ein "*" am Beginn des <a href="#Skriptsuche">Skriptsuche</a>-Eingabefelds ("filter expression") kann die Anzeige der Variablen gefiltert werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5767/debugger-filter-variables.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Variablen_andere_Werte_zuweisen">Variablen andere Werte zuweisen</h3>
+
+<p>Wenn die Ausführung des Codes an einem Breakpoint ("Haltepunkt") unterbrochen wurde, können die Werte in der <a href="#Variablenwerte_veraendern">Variablenanzeige</a> des Debuggers verändert werden. Einfach auf den aktuellen Variablenwert klicken - der Wert wird zu einem Eingabefeld und kann sofort geändert werden:<img alt="" src="https://mdn.mozillademos.org/files/5761/debugger-modify-variable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Einen_Ausdruck_beobachten">Einen Ausdruck beobachten</h3>
+
+<p>Sie können den Wert eines Javascript-Ausdrucks mit der Funktion "Ausdruck beobachten" in der Variablenleiste beobachten.</p>
+
+<h3 id="Mobile_Geräte_debuggen">Mobile Geräte debuggen</h3>
+
+<p>Das debuggen von mobilen Geräten wird in <a href="/en-US/docs/Tools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>behandelt.</p>
+
+<h3 id="Verstecken_von_Quelldateien_(Black_boxing)"><a name="black-box-a-source">Verstecken von Quelldateien ("Black boxing")</a></h3>
+
+<p>Viele Webseiten und Programme nutzen heute Frameworks wie <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a> oder <a href="http://angularjs.org/">Angular</a> und zu 99% kann man einfach davon ausgehen, dass deren Code funktioniert. Die Interna dieser Bibliotheken wollen wir beim Debuggen meistens nicht sehen - wir verstecken sie und behandeln sie als <a href="http://en.wikipedia.org/wiki/Black_box">Black box</a>. Durch Black boxing entfällt das leidige Eintauchen in Bibliothek-Dateien (zum Beispiel bei each-Schleifen oder dem Auslösen von Events) und wir können uns auf unseren eigentlichen Code konzentrieren.</p>
+
+<dl>
+ <dt style="text-align: center;"><img alt="How to blackbox a source" src="https://mdn.mozillademos.org/files/6279/debugger-blackbox.png" style="display: block; margin-left: auto; margin-right: auto;"></dt>
+</dl>
+
+<p>Black boxing kann auch man für einzelne Dateien ein- und ausschalten, indem man auf das Breakpoint-Symbol (<em>"eyeball"</em>: Augapfel) links neben der Quelldatei in der Liste klickt. Viele Quellen können auch versteckt werden, indem man in der Entwickler-Toolbar (Shift + F2) den <code>blackbox</code>-Befehl benutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;">Wenn eine Code-Datei versteckt ist:</p>
+
+<ul>
+ <li>... werden alle Haltepunkte in dieser Quelldatei deaktiviert.</li>
+ <li>... lässt der Debugger diesen Code auch beim schrittweisen Durchlaufen des Codes ("stepping") aus.</li>
+ <li>Wenn "Unterbrechung bei Exceptions" (<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/Settings">"pause on exceptions"</a>) eingeschaltet ist, hält der Debugger nicht an, wenn ein Fehler in einer versteckten ("black boxed") Quelldatei geworfen wird - stattdessen wartet er, bis (und: ob) er in der Aufrufliste ("call stack") an einen nicht versteckten Punkt zurück kommt.</li>
+</ul>
+
+<h3 id="Browser-Add-Ons_debuggen">Browser-Add-Ons debuggen</h3>
+
+<p>Im Chrome Umfeld gibt es die folgenden Debug-Möglichkeiten:</p>
+
+<p>chrome://browser/content/debugger.xul oder</p>
+
+<p>in Version 23 beta, chrome://browser/content/devtools/debugger.xul:</p>
+
+<ul>
+ <li>window.addEventListener("Debugger:EditorLoaded") - wird nach dem Laden des read-only script panel aufgerufen.</li>
+ <li>window.addEventListener("Debugger:EditorUnloaded")</li>
+</ul>
+
+<p>Zugehörige Dateien:</p>
+
+<ul>
+ <li>chrome://browser/content/devtools/debugger-controller.js</li>
+ <li>chrome://browser/content/devtools/debugger-toolbar.js</li>
+ <li>chrome://browser/content/devtools/debugger-view.js</li>
+ <li>chrome://browser/content/devtools/debugger-panes.js</li>
+</ul>
+
+<p>Unglücklicherweise gibt es bis jetzt noch keine API um Ausdrücke im Debug-Bereich auszuwerten oder um Seitenelemente zu markieren die durch Variablen im Debug-Bereich referenziert werden. (Ist im Moment in Arbeit, siehe auch Bug-Meldung <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a>.)</p>
+
+<h2 id="Siehe_auch">Siehe auch:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></li>
+ <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote debugging protocol</a></li>
+ <li><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/" title="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Remote Debugging on Firefox for Android</a> (blog post)</li>
+</ul>
diff --git a/files/de/tools/debugger/settings/index.html b/files/de/tools/debugger/settings/index.html
new file mode 100644
index 0000000000..972e98ff9a
--- /dev/null
+++ b/files/de/tools/debugger/settings/index.html
@@ -0,0 +1,57 @@
+---
+title: Settings
+slug: Tools/Debugger/Settings
+translation_of: Archive/Tools/Debugger_settings
+---
+<div>{{ToolsSidebar}}</div><p>The Debugger has its own settings menu, which you can access from an icon in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#toolbar">toolbar</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9819/debugger-settings.png" style="display: block; margin-left: auto; margin-right: auto;">Each setting is a simple on/off switch:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td style="width: 40%;"><strong>Auto Prettify Minified Sources</strong></td>
+ <td>With this option enabled, the debugger will automatically detect minified JS files and <a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">pretty-print</a> them.</td>
+ </tr>
+ <tr>
+ <td><strong>Pause on Exceptions</strong></td>
+ <td>When this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.</td>
+ </tr>
+ <tr>
+ <td><strong>Ignore Caught Exceptions</strong></td>
+ <td>
+ <p>If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.</p>
+
+ <p>This is usually the behavior you want. You don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><strong>Show Panes on Startup</strong></td>
+ <td>When this option is enabled, the debugger's <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">variables pane</a> is visible when you first start the debugger.</td>
+ </tr>
+ <tr>
+ <td><strong>Show Only Enumerable Properties</strong></td>
+ <td>Do not display non-enumerable JavaScript properties.</td>
+ </tr>
+ <tr>
+ <td><strong>Show Variables Filter Box</strong></td>
+ <td>Enabling this option adds a "Filter variables" search box to the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">variables pane</a>, so that you can filter the displayed list of variables.</td>
+ </tr>
+ <tr>
+ <td><strong>Show Original Sources</strong></td>
+ <td>Enabling this option will make the debugger use <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript. Defaults to true.</td>
+ </tr>
+ <tr>
+ <td><strong>Automatically Black Box Minified Sources</strong></td>
+ <td>
+ <div class="geckoVersionNote">
+ <p>New in Firefox 33.</p>
+ </div>
+
+ <p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Automatically <a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">black box</a> sources whose URL ends with ".min.js". Defaults to true.</span></span></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/tools/debugger/source_map_errors/index.html b/files/de/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..b5c88af661
--- /dev/null
+++ b/files/de/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,70 @@
+---
+title: Source map errors
+slug: Tools/Debugger/Source_map_errors
+tags:
+ - Debugger
+ - Debugging
+ - Dev Tools
+ - Reference
+ - Source maps
+ - Tools
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Source maps sind JSON files, die einen Weg bieten, transformierte Quellen, so wie sie vom Browser gesehen werden, mit Original Sourcen, so wie sie von einem Entwickler geschrieben wurden, in Einklang zu bringen. Manchmal erhält man Fehler, wenn man mit source maps arbeitet. Diese Seite erklärt die Probleme, die am häufigsten auftreten und wie man diese Probleme beheben kann.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Wenn Sie mehr über das Thema source maps erfahren möchten, klicken Sie hier: <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">How to use a source map</a>.</p>
+</div>
+
+<h2 id="Allgemeines_source_map_error_reporting">Allgemeines source map error reporting</h2>
+
+<p>Wenn Sie ein Problem sehen, erscheint eine Meldung in der Webconsole. Diese Meldung enthält eine Fehlermeldung, die URL der Ressource und die URL der source map:</p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p>Hier wird uns mitgeteilt, dass <code>bundle.js</code> eine source map voraussetzt und die URL der source map sagt uns, wo die source-map-Daten zu finden sind (in diesem Fall relativ zur Ressoucre). Der Fehler teilt uns mit, dass die source map nicht im JSON-Format vorliegt - wir bieten also die falsche Datei an.</p>
+
+<p>Source maps können in ein paar allgemeinen Fällen fehlerhaft sein; die folgenden Abschnitte beschrieben diese Fälle.</p>
+
+<h2 id="Source_map_nicht_vorhanden_oder_nicht_zugreifbar">Source map nicht vorhanden oder nicht zugreifbar</h2>
+
+<p>Auf die source map Ressource kann nicht zugegriffen werden oder sie ist nicht vorhanden.</p>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p>Die Lösung ist hier, sicherzustellen, dass auf die Datei zugegriffen werden kann.</p>
+
+<h2 id="Ungültige_source_map">Ungültige source map</h2>
+
+<p>Die Source Map Daten können ungültig sein — entweder, es ist überhaupt kein JSON file, oder es hat eine ungültige Struktur. Typische Fehlermeldungen sind hier:</p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="Originale_Quelle_fehlt">Originale Quelle fehlt</h2>
+
+<p>Es kann sein, dass eine originale Quelle fehlt. Sie werden dies eventuell feststellen, wenn Sie versuchen, eine der Original Sourcen im Debugger zu öffnen. Die Meldung sieht in diesem Fall ein bisschen anders aus:</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p>In diesem Fall wird die Meldung auch im Source Tab im Debugger angezeigt:</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
+
+<h2 id="Netzwerkfehler_beim_Zugriff_auf_die_Ressource">Netzwerkfehler beim Zugriff auf die Ressource</h2>
+
+<p>Ein Fehler in Firefox verhindert, dass die Source map für web extensions geladen wird.</p>
+
+<p>Details dazu finden Sie hier: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a>.</p>
+
+<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map</span></span></span></pre>
+
+<p>Der einzige Weg, dies zu umgehen, besteht darin, die URL manuell auf eine öffentliche Adresse (http://localhost:1234/file.map.js) zu ändern und einen lokalen Webserver auf diesem Port zu starten.</p>
diff --git a/files/de/tools/firefox_os_1.1_simulator/index.html b/files/de/tools/firefox_os_1.1_simulator/index.html
new file mode 100644
index 0000000000..ec2bafe6ee
--- /dev/null
+++ b/files/de/tools/firefox_os_1.1_simulator/index.html
@@ -0,0 +1,352 @@
+---
+title: Firefox OS 1.1 Simulator
+slug: Tools/Firefox_OS_1.1_Simulator
+translation_of: Tools/Firefox_OS_1.1_Simulator
+---
+<div>{{ToolsSidebar}}</div><div id="doc-content">
+<div class="page-content boxed">
+<div class="note">
+<p>Diese Seite beschreibt den "alten" Firefox OS Simulator. Dieser sollte nur verwendet werden, falls man Apps für Firefox 1.1 entwickelt und er kann daher auch nur auf Firefox 24 oder Firefox 25 installiert werden.</p>
+
+<p>Wenn man Apps für Firefox OS 1.2 oder später entwickelt, muß stattdessen der <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager </a>verwendet werden.</p>
+
+<p>Falls Hilfe benötigt wird, kann man in der <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list </a>oder bei <a href="irc://irc.mozilla.org/#devtools">#devtools auf irc.mozilla.org</a> nachfragen.</p>
+</div>
+
+<p>Die Firefox OS Simulator-Erweiterung ist ein Werkzeug, welches es ermöglicht, eigene <a href="https://developer.mozilla.org/en-US/docs/Apps" title="/en-US/docs/Apps">Firefox OS Apps</a> auf dem Desktop zu testen und zu debuggen. Der Code-Test-Debug-Zyklus ist sehr viel schneller mit dem Simulator als mit dem echten Gerät und dieses braucht man dafür natürlich dann auch nicht.</p>
+
+<p>Im Wesentlichen enthält die Simulator-Erweiterung:</p>
+
+<ul>
+ <li><strong>den Simulator</strong>: dieser beinhaltet den <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS Desktop Client</a>, welcher eine Version der höheren Schichten des <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> ist, das auf dem Desktop läuft. Der Simulator enthält auch einige <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">zusätzliche Features in der Emulation</a>, die in den Standard Firefox OS Desktop Builds nicht enthalten sind.</li>
+ <li><strong>das Dashboard</strong>: ein Werkzeug, welches durch den Firefox-Browser gehostet wird und Start und Stop des Simulators ermöglicht, sowie das Installieren, Deinstallieren und Debuggen von Apps, die darin laufen. Das Dashboard hilft ebenfalls, die Apps auf ein reales Gerät zu übetragen und überprüft die App-Manifests auf die geläufigsten Probleme.</li>
+</ul>
+
+<p>Der Screenshot im Folgenden zeigt eine Debugging-Sitzung unter Verwendung des Simulators.</p>
+
+<p>Das Dashboard ist oben rechts innerhalb eines Firefox-Tabs. Wir haben eine App hinzugefügt, eine "Packaged App", die wir "Wo bin ich? (Where am I?)" genannt haben. Links oben läuft die App im Simulator. Wir haben ebenfalls die Debugger-Werkzeuge eingebunden, die im Panel weiter unten sind. Man kann sehen, daß das Konsolenfeld Meldungen über die App anzeigt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p>
+
+<p>Dieses Handbuch behandelt folgende Themen:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Installing" title="#Installing">Wie man die Simulator-Erweiterung installiert</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Adding-updating-removing" title="#Adding-updating-removing">Wie man Apps hinzufügt, entfernt und auffrischt</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">Überprüfung eines Manifests</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Running-the-Simulator" title="#Running-the-Simulator">Wie man den Simulator startet</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Attaching-developer-tools" title="#Attaching-developer-tools">Wie man Entwickler-Werkzeuge in im Simulator laufende Apps einbindet, wie z.B. den JS debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-receipts" title="#Simulator-receipts">Wie man Testergebnisse für eine "paid App" bekommt</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Push-to-device" title="#Push-to-device">Wie man Apps auf ein verbundenes Gerät überträgt</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Limitations" title="#Limitations">Die Beschränkungen des Simulators im Vergleich zu einem echten Firefox OS-Gerät</a></li>
+</ul>
+
+<div class="note">For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div>
+
+<h2 id="Die_Simulator-Erweiterung_installieren"><a name="Installing">Die Simulator-Erweiterung installieren</a></h2>
+
+<p>Der Simulator kommt als Firefox Erweiterung. So wird er insatlliert:</p>
+
+<ol>
+ <li>Besuche mit Firefox die folgende Seite: <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">Simulator's page on addons.mozilla.org</a>.</li>
+ <li>Klicke "Add to Firefox".</li>
+ <li>Nach dem Download wirst Du aufgefordert, es zu installieren: Klicke "Install Now".</li>
+</ol>
+
+<p>Aufgrund der Größe der Erweiertung kann Firefox für einige Sekunden einfrieren. Falls ein Dialog mit der Warnung: "Unresponsive script" erscheint, klicke "Continue" um die Installation vollständig auszuführen. Das sollte aber nicht mit Firefox ab Version 27 passieren.<br>
+ <br>
+ Firefox wird nach der Installation regelmäßig nach Aktualisierungen des Simulators suchen und diese automatisch installieren.</p>
+
+<p>Das Dashboard des Simulators öffnet sich bei der Insatllation automatisch, und Du kannst es jederzeit erneut öffnen im "Firefox" Menü (oder dem "Extras" Menü unter OS X und Linux), dann "Web-Entwickler", dann "Firefox OS Simulator":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="display: block; margin-left: auto; margin-right: auto;"><br>
+ Das Dashboard ist das Werkzeug, mit dem Du Deine App dem Simularot hinzufügst und laufen lässt. So sieht es aus: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png" style="height: 650px; width: 1212px;"></p>
+
+<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2>
+
+<h3 id="Adding_apps">Adding apps</h3>
+
+<p>To add a <a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest file</a> for your app.<br>
+ <br>
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.<br>
+ <br>
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p>
+
+<p>The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.</p>
+
+<h3 id="Managing_apps">Managing apps</h3>
+
+<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br>
+ Each entry gives us the following information about the app:</p>
+
+<ul>
+ <li>its name, taken from the manifest</li>
+ <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li>
+ <li>a link to its manifest file</li>
+ <li>the result of manifest validation</li>
+</ul>
+
+<p>It also gives us four commands:</p>
+
+<ul>
+ <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.</li>
+ <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li>
+ <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li>
+ <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li>
+</ul>
+
+<div class="note">
+<p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p>
+</div>
+
+<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3>
+
+<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p>
+
+<ul>
+ <li>manifest errors: problems that will prevent your app from installing or running</li>
+ <li>manifest warnings: problems that may prevent your app from working properly</li>
+ <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li>
+</ul>
+
+<p>It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.</p>
+
+<h4 id="Manifest_errors">Manifest errors</h4>
+
+<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p>
+
+<ul>
+ <li>the manifest does not include the mandatory "name" field</li>
+ <li>the manifest is not valid JSON</li>
+ <li>the app is a hosted app, but the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li>
+ <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li>
+</ul>
+
+<p>Here's the result of trying to add a manifest file with a missing "name":<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p>
+
+<h4 id="Manifest_warnings">Manifest warnings</h4>
+
+<p>The Dashboard will report the following manifest issues as warnings:</p>
+
+<ul>
+ <li>missing icons</li>
+ <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li>
+ <li>the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is unrecognized</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> which will be denied</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li>
+</ul>
+
+<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4>
+
+<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p>
+
+<ul>
+ <li>the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li>
+</ul>
+
+<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2>
+
+<p>There are two different ways the Simulator may be started:</p>
+
+<ul>
+ <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li>
+ <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li>
+</ul>
+
+<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br>
+ <br>
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p>
+
+<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3>
+
+<p>In the bottom toolbar, from left to right, these are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p>
+
+<ul>
+ <li>the <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)</li>
+ <li>the <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li>
+ <li>the <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="height: 309px; width: 520px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="height: 297px; width: 500px;"></a></p>
+
+<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3>
+
+<p>In the top menubar, you can access some useful commands to make development more efficient:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p>
+
+<ul>
+ <li><strong>File -&gt; Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li>
+ <li><strong>App -&gt; Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li>
+</ul>
+
+<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p>
+
+<ul>
+ <li>make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)</li>
+ <li>type the keyboard shortcut to refresh the app running in the Simulator</li>
+</ul>
+
+<div class="note">
+<p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p>
+
+<ul>
+ <li>
+ <p>localStorage / sessionStorage</p>
+ </li>
+ <li>
+ <p>cookies</p>
+ </li>
+ <li>
+ <p>indexedDB</p>
+ </li>
+ <li>
+ <p>appCache</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2>
+
+<p>You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a> and the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>.</p>
+
+<div class="geckoVersionNote">
+<p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p>
+</div>
+
+<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<p>The app can log to this console using the global <a href="https://developer.mozilla.org/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p>
+
+<h3 id="Debugger">Debugger</h3>
+
+<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p>
+
+<h3 id="Style_Editor">Style Editor</h3>
+
+<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p>
+
+<h3 id="Profiler">Profiler</h3>
+
+<p>Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p>
+
+<h3 id="Network_Monitor">Network Monitor</h3>
+
+<p>Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p>
+
+<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2>
+
+<p>If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p>
+
+<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p>
+
+<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2>
+
+<p>If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.</p>
+
+<h3 id="Connecting_a_device">Connecting a device</h3>
+
+<p>To connect the device, follow the instructions in the guide to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p>
+
+<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3>
+
+<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p>
+
+<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p>
+
+<div class="note">
+<p><strong>Manual Steps:</strong></p>
+
+<ul>
+ <li>
+ <p>Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content</p>
+ </li>
+ <li>
+ <p>If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3>
+
+<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="height: 480px; width: 320px;"></p>
+
+<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3>
+
+<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p>
+
+<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2>
+
+<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p>
+
+<h3 id="Hardware_limitations">Hardware limitations</h3>
+
+<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p>
+
+<h3 id="Audiovideo_codecs">Audio/video codecs</h3>
+
+<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p>
+
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+
+<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p>
+
+<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3>
+
+<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li>
+</ul>
+
+<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2>
+
+<p><span style="line-height: 1.572;">If you have a question, try asking us on the </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.572;">dev-developer-tools mailing list</a><span style="line-height: 1.572;"> or on </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.572;">#devtools on irc.mozilla.org</a><span style="line-height: 1.572;">.</span></p>
+
+<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3>
+
+<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p>
+</div>
+</div>
+
+<div class="note">
+<p> </p>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/index.html b/files/de/tools/index.html
new file mode 100644
index 0000000000..4daa07374a
--- /dev/null
+++ b/files/de/tools/index.html
@@ -0,0 +1,149 @@
+---
+title: Firefox Tools für Webentwickler
+slug: Tools
+tags:
+ - Entwickler
+ - Tools
+ - Webentwicklung
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary"><span class="seoSummary"><math display="block"><semantics><mrow></mrow><annotation encoding="TeX"></annotation></semantics></math>Untersuchen, bearbeiten und debuggen von HTML, CSS und JavaScript für Desktop- und Mobilseiten</span></div>
+
+<div class="column-container">
+<div class="column-half">
+<p>Falls Sie auf der Suche nach Informationen sind, wie man die Developer Tools von Firefox verwendet, sind Sie hier richtig – diese Seite stellt Links zu detaillierten Informationen über alle Kern-Werkzeuge und zusätzlichen Werkzeuge bereit, sowie zu weiteren Informationen, zum Beispiel wie man sich mit Firefox für Android verbindet und es debugged, wie man die Developer Tools erweitert, und wie man den Browser als Ganzes debugged.</p>
+
+<p>Bitte erkunden Sie die Links in der Seitenleiste und weiter unten auf der Seite. Falls Sie Feedback oder Fragen zu den Developer Tools haben, schicken Sie uns Nachrichten auf unserer Mailingliste oder unserem IRC-Kanal (siehe die Community-Links am unteren Ende der Seite). Falls Sie hingegen Feedback oder Fragen zur Dokumentation haben, ist die <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse-Seite</a> ein guter Ort dafür.</p>
+
+<h2 id="Creating" name="Creating">Entwerfen</h2>
+
+<p>Werkzeuge zum Erstellen von Webseiten und Web Apps.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Scratchpad" title="Tools/Scratchpad">JavaScript-Umgebung</a></dt>
+ <dd>Ein Texteditor innerhalb Firefox zum Schreiben und Ausführen von JavaScript.</dd>
+ <dt><a href="/de/docs/Tools/Style_Editor" title="Tools/Style_Editor">Stilbearbeitung</a></dt>
+ <dd>Betrachten und bearbeiten von CSS-Styles der aktuellen Seite.</dd>
+ <dt><a href="/de/docs/Tools/Shader_Editor">Shader Bearbeitung</a></dt>
+ <dd>Ansehen und bearbeiten der <a href="/de/docs/Web/WebGL">WebGL</a> Vertex/Fragment Shaders.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Exploring" name="Exploring">Untersuchen und Debuggen</h2>
+
+<p>Untersuchen, optimieren, entdecken und debuggen von Webseiten und Web Apps.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Web_Console" title="Tools/Web_Console">Web-Konsole</a></dt>
+ <dd>Log-Nachrichten einer Webseite anschauen und mittels JavaScript mit der Seite interagieren.</dd>
+ <dt><a href="/de/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Inspektor</a></dt>
+ <dd>HTML und CSS einer Seite anschauen und verändern.</dd>
+ <dt><a href="/de/docs/Tools/Debugger" title="Tools/Debugger">JavaScript Debugger</a></dt>
+ <dd>JavaScript einer Seite stoppen, schrittweise laufen lassen, untersuchen und verändern.</dd>
+ <dt><a href="/de/docs/Tools/Network_Monitor" title="Tools/Network_Monitor">Netzwerkanalyse</a></dt>
+ <dd>Netzwerkanfragen beim Laden der Seite untersuchen.</dd>
+ <dt><a href="/de/docs/Tools/GCLI" title="Developer Toolbar">Developer Toolbar</a></dt>
+ <dd>Eine Kommandozeile für die Entwickler-Werkzeuge.</dd>
+ <dt><a href="/de/docs/Tools/3D_View" title="Tools/3D_View">3D-Untersuchung</a></dt>
+ <dd>3D-Visualisierung der Seite und deren Aufbau. Ganz einfach und übersichtlich.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Mobile" name="Mobile">Mobilgeräte</h2>
+
+<p>Hilfreiche und leistungsstarke Werkzeuge für die Entwicklung mit Mobilgeräten.</p>
+
+<dl>
+ <dt><a href="/de/Firefox_OS/Using_the_App_Manager" title="App Manager">App-Manager</a></dt>
+ <dd>Designen und entwickeln von großartigen Apps für Firefox OS.</dd>
+ <dt><a href="/de/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
+ <dd>Starten und debuggen Sie Ihre Firefox OS App auf dem Desktop, ohne ein echtes Firefox OS Handy zu benötigen. Dies spart Ihnen viel Zeit beim Entwickeln.</dd>
+ <dt><a href="/de/docs/Tools/Responsive_Design_View" title="/de/docs/Tools/Responsive_Design_View">Reaktives Design</a></dt>
+ <dd>Sehen Sie sich an, wie Ihre Webseite oder App in verschiedenen Browser-Größen dargestellt wird, ohne dass Sie die Größe Ihres Browser-Fensters verändern müssen.</dd>
+ <dt><a href="/de/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Firefox auf Android debuggen</a></dt>
+ <dd>Verbinden Sie die Entwickler-Werkzeuge mit Firefox auf dem Android-Handy.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Performance" name="Performance">Performance</h2>
+
+<p>Finden und beheben von Geschwindigkeitsproblemen.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Profiler" title="Tools/Profiler">JavaScript Profiler</a></dt>
+ <dd>Finden Sie heraus, wo JavaScript Zeit benötigt, um den Code auszuführen. Optimieren Sie so Ihre Scripte.</dd>
+ <dt><a href="/de/docs/Tools/Paint_Flashing_Tool" title="Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
+ <dd>Hebt die neu gezeichneten Flächen einer Seite hervor.</dd>
+ <dt><a href="/de/docs/Tools/Web_Konsole#DOM-Neuberechnungen" title="Reflow events">Reflow Event Logging</a></dt>
+ <dd>Untersuchen von Reflow-Ereignissen in der Web-Konsole.</dd>
+ <dt><a href="de/docs/Tools/netzwerkanalyse#Netzwerkanalyse_starten" title="Network performance">Laufzeitanalyse</a></dt>
+ <dd>Untersuchen, wie lange Teile der Seite zum Laden brauchen.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Den_Browser_debuggen">Den Browser debuggen</h2>
+
+<p>Normalerweise werden die Entwickler-Werkzeuge für Webseiten oder Web Apps verwendet. Es gibt aber auch die Möglichkeit, den Browser als Ganzes zu untersuchen und zu debuggen. Das kann zum Beispiel für die Entwicklung des Browsers selbst oder von Add-ons nützlich sein.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Browser_Console" title="Browser Console">Browser Konsole</a></dt>
+ <dd>Sehen Sie sich die Log-Nachrichten des Browsers selbst und von Add-ons an und führen Sie JavaScript-Code im Kontext des Browsers aus.</dd>
+ <dt><a href="/de/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></dt>
+ <dd>Verbinden der Entwickler-Werkzeuge mit dem Browser.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Die_Entwickler-Werkzeuge_erweitern">Die Entwickler-Werkzeuge erweitern</h2>
+
+<p>Die Entwickler-Werkzeuge sind so gebaut, dass es möglich ist, diese zu erweitern. Firefox Add-ons haben Zugriff auf die Entwickler-Werkzeuge und auf Komponenten zum Ausbau bestehender Tools sowie zum Hinzufügen neuer Tools. Mit dem Remote Debugging Protokoll ist es möglich, eigene Debugging-Clients und -Server zu entwickeln, um somit Webseiten mit den eigenen Tools zu debuggen.</p>
+
+<dl>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="Remote Debugging Protocol">Remote Debugging Protokoll</a></dt>
+ <dd>Protokoll zur Verbindung der Entwickler-Werkzeuge mit einem Debugging-Ziel, wie zum Beispiel einer Instanz von Firefox oder einem Firefox OS.</dd>
+ <dt><a href="/de/docs/Tools/Editor" title="Source Editor">Source Editor</a></dt>
+ <dd>Ein eingebauter Code-Editor in Firefox, welcher in Ihr Add-on eingebunden werden kann.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>Dieser Bereich stellt einige Ressourcen bereit, die nicht vom Mozilla Developer Tools Team zur Verfügung gestellt, von Webentwicklern jedoch viel genutzt werden. Es sind nur einige Firefox-Add-ons aufgelistet, eine komplette Liste befindet sich in der Kategorie <a href="https://addons.mozilla.org/de/firefox/extensions/web-development/" title="https://addons.mozilla.org/de/firefox/extensions/web-development/">"Webentwicklung" auf addons.mozilla.org</a>.</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt>
+ <dd>Ein sehr bekanntes und mächtiges Werkzeug für Webentwickler mit einem JavaScript-Debugger, HTML und CSS Inspektor und Editor sowie einer Netzwerkanalyse.</dd>
+ <dt><a href="/de/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></dt>
+ <dd>Untersuchen und bearbeiten des DOM von Webseiten oder XUL-Fenstern.</dd>
+ <dt><a href="https://addons.mozilla.org/de/firefox/addon/web-developer/" title="Web-Developer">Web Developer</a></dt>
+ <dd>Fügt ein Menü und eine Symbolleiste mit verschiedenen Entwickler-Werkzeugen zum Browser hinzu.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://webmaker.org/de/tools/" title="https://webmaker.org/de/tools/">Webmaker Tools</a></dt>
+ <dd>Eine Reihe von Tools für Anfänger im Bereich der Webentwicklung.</dd>
+ <dt><a href="http://www.w3.org/Status.html" title="W3C">W3C Validators</a></dt>
+ <dd>Das W3C stellt einige Tools zur Überprüfung des Webseitencodes bereit. Zum Beispiel Gültigkeitsprüfungen für <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> und <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
+ <dt><a href="http://www.jshint.com/" title="JSHint">JSHint</a></dt>
+ <dd>Analysiert JavaScript-Code.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/de/tools/index/index.html b/files/de/tools/index/index.html
new file mode 100644
index 0000000000..7505b123b1
--- /dev/null
+++ b/files/de/tools/index/index.html
@@ -0,0 +1,9 @@
+---
+title: Index
+slug: Tools/Index
+tags:
+ - Index
+ - Tools
+translation_of: Tools/Index
+---
+<div>{{ToolsSidebar}}</div><p>{{Index("/de/docs/Tools")}}</p>
diff --git a/files/de/tools/json_viewer/index.html b/files/de/tools/json_viewer/index.html
new file mode 100644
index 0000000000..ed3cda58c2
--- /dev/null
+++ b/files/de/tools/json_viewer/index.html
@@ -0,0 +1,26 @@
+---
+title: JSON Viewer
+slug: Tools/JSON_viewer
+tags:
+ - Tools
+translation_of: Tools/JSON_viewer
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">
+<p>Der JSON-Viewer is neu in Firefox 44.</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Vor Firefox 53 ist der JSON-Viewer standardmäßig nur in der Firefox Developer Edition und Firefox Nightly aktiviert.</span> <span title="">Um diese Funktion in anderen Release-Kanälen zu aktivieren, setzen Sie die Einstellung </span></span> <code>devtools.jsonview.enabled</code> <span class="tlid-translation translation" lang="de"><span title=""> auf <code>true</code>.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Ab Firefox 53 ist der JSON-Viewer auch in der Beta und der normalen Release-Version von Firefox standardmäßig aktiviert.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Firefox enthält einen JSON-Viewer.</span></span> Wenn Sie eine JSON-Datei im Browser öffnen, oder eine Remote-URL mit dem Content-Type application/json aufrufen, wird sie analysiert und die Syntax hervorgehoben. Arrays und Objekte können über das Pfeilsymbol erweitert oder reduziert werden.</p>
+
+<p>{{EmbedYouTube("ktFcevMwYXw")}}</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Der JSON-Viewer bietet ein Suchfeld, mit dem Sie den Inhalt der JSON-Ausgabe filtern können.</span></span></p>
+
+<p>Sie können auch die Rohdaten der JSON-Antwort anzeigen lassen und diese einheitlich formatieren.</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn das Dokument das Ergebnis einer Netzwerkanforderung war, zeigt der Viewer außerdem die Anforderungs- und Antwortheader an.</span></span></p>
diff --git a/files/de/tools/keyboard_shortcuts/index.html b/files/de/tools/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..fb9fd61b10
--- /dev/null
+++ b/files/de/tools/keyboard_shortcuts/index.html
@@ -0,0 +1,847 @@
+---
+title: Tastaturkürzel
+slug: Tools/Keyboard_shortcuts
+tags:
+ - Tools
+translation_of: Tools/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Auf dieser Seite sind alle Tastaturkürzel der in Firefox integrierten Entwicklerwerkzeuge aufgeführt.</p>
+
+<p>Im ersten Abschnitt befinden sich die Tastaturkürzel, mit denen die einzelnen Werkzeuge geöffnet werden. Im zweiten Abschnitt befinden sich die Tastaturkützel, die im Werkzeugkasten Verwendung finden. Anschließend folgt je ein Abschnitt pro Werkzeug, der die Tastaturkürzel auflistet, die im jeweiligen Werkzeug verwendet werden können.</p>
+
+<p>Da Access-Keys von der Sprachversion abhängen, werden sie auf dieser Seite nicht dokumentiert.</p>
+
+<h2 id="Öffnen_und_Schließen_von_Werkzeugen">Öffnen und Schließen von Werkzeugen</h2>
+
+<p>Diese Tastaturkürzel funktionieren im Browser-Hauptfenster und öffnen das entsprechende Werkzeug. Bei Werkzeugen im Werkzeugkasten schließen sie das Werkzeug, wenn es aktiv ist. Bei Werkzeugen wie der Browser-Konsole, die ein neues Fenster öffnen, müssen Sie das Fenster schließen, um das Werkzeug zu schließen.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Werkzeugkasten (öffnet sich mit zuletzt aktiviertem Werkzeug)</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>I</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Web-Konsole<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>K</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Schalte Inspektor ein oder aus</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>C</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Debugger</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>S</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Stilbearbeitung</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F5</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Laufzeitanalyse</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F5</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F5</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Netzwerkanalyse</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Entwickler-Symbolleiste (an- und ausschalten)</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F2</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F2</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F2</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Bildschirmgrößen testen (an- und ausschalten)</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>M</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>M</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>M</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Browser-Konsole<a href="#opening-closing-browser-console-note"><sup>2</sup></a></th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>J</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>J</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>J</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Browser-Werkzeugkasten (neu in Firefox 39)</th>
+ <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Opt</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne JavaScript-Umgebung</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Entwickler-Umgebung (WebIDE)</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F8</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F8</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F8</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Öffne Speicher-Inspektor<a href="#disabled-tools-shortcut"><sup>3</sup></a></th>
+ <td><kbd>Umschalt</kbd> + <kbd>F9</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F9</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F9</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<p><a id="opening-closing-web-console-note" name="opening-closing-web-console-note">1. Im Gegensatz zu den anderen Werkzeugen im Werkzeugkasten, kann dieses Kürzel nicht auch zum Schliessen der Web-Konsole verwendet werden. Das Kürzel fokussiert die Kommandozeile innerhalb der Web-Konsole. Um die Web-Konsole zu schliessen, verwenden Sie das globale Werkzeugkasten-Tastaturkürzel Strg + Umschalt + I (Befehlstaste + Wahltaste + I auf Mac)</a></p>
+
+<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">2. Vor Firefox 38 wird die Browser Konsole von dieser Tasten-Kombination geschlossen, wenn sie von einem Firefox Fenster verdeckt ist. Beginnend mit Firefox 38 wird eine verdeckte Browser Konsole in den Vordergrund gebracht und fokussiert.</a></p>
+
+<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">3. Das Werkzeug ist in der Voreinstellung nicht freigeschaltet. Die Tasten-Kombination funktioniert also erst, sobald es unter Einstellungen angewählt wird.</a></p>
+
+<h2 id="Werkzeugkasten">Werkzeugkasten</h2>
+
+<div id="toolbox-shortcuts">
+<p>Diese Tastaturkürzel funktionieren immer wenn der Werkzeugkasten geöffnet ist, egal welches Werkzeug aktiv ist.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Von links nach rechts durch die Werkzeuge blättern</th>
+ <td><kbd>Strg</kbd> + <kbd>]</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>]</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>]</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Von rechts nach links durch die Werkzeuge blättern</th>
+ <td><kbd>Strg</kbd> + <kbd>[</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>[</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>[</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Einstellungen der Entwicklerwerkzeuge anzeigen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>O</kbd></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="all-toolbox-tools">
+<p>Diese Tastaturkürzel funktionieren bei allen Werkzeugen, die sich im Werkzeugkasten befinden.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Schrift vergrößern</th>
+ <td><kbd>Strg</kbd> + <kbd>+</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>+</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>+</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Schrift verkleinern</th>
+ <td><kbd>Strg</kbd> + <kbd>-</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>-</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>-</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Schriftgröße zurücksetzen</th>
+ <td><kbd>Strg</kbd> + <kbd>0</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>0</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>0</kbd></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Quelltext-Editor">Quelltext-Editor</h2>
+
+<div id="source-editor">
+<p>In dieser Tabelle befinden sich die Standardtastaturkürzel für den Quelltext-Editor.</p>
+
+<p>Ab Firefox 29 können stattdessen Vim- oder Emacs-Tastaturkürzel verwendet werden. Um diese auszuwählen, öffnen Sie <code>about:config</code>, wählen Sie die Einstellung <code>devtools.editor.keymap </code>und weisen Sie ihr den Wert „vim“ oder „emacs“ zu. Wenn Sie dies tun, werden die ausgewählten Tastaturkürzel für alle Entwicklerwerkzeuge verwendet, die den Quelltext-Editor nutzen.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Zu Zeile springen</th>
+ <td><kbd>Strg</kbd> + <kbd>J</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>J</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>J</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">In Datei suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Weitersuchen</th>
+ <td><kbd>Strg</kbd> + <kbd>G</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>G</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>G</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Alle auswählen</th>
+ <td><kbd>Strg</kbd> + <kbd>A</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>A</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>A</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausschneiden</th>
+ <td><kbd>Strg</kbd> + <kbd>X</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>X</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>X</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Kopieren</th>
+ <td><kbd>Strg</kbd> + <kbd>C</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>C</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>C</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Einfügen</th>
+ <td><kbd>Strg</kbd> + <kbd>V</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>V</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>V</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Rückgängig</th>
+ <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Z</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Wiederholen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Befehlstaste</kbd> + <kbd>Y</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Einrücken</th>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Einrücken rückgängig machen</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zeile(n) nach oben verschieben</th>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zeile(n) nach unten verschieben</th>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zeile(n) auskommentieren/nicht mehr auskommenrieren</th>
+ <td><kbd>Strg</kbd> + <kbd>/</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>/</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>/</kbd></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Seiteninspektor">Seiteninspektor</h2>
+
+<div id="page-inspector">
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Inspektor öffnen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>C</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="HTML-Bereich">HTML-Bereich</h3>
+
+<p>Diese Tastaturkürzel funktionieren im <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane" title="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML-Bereich des Inspektors</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Knoten löschen</th>
+ <td><kbd>Löschen</kbd></td>
+ <td><kbd>Löschen</kbd></td>
+ <td><kbd>Löschen</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Löschen eines Knotens rückgängig machen</th>
+ <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Z</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Löschen eines Knotens wiederholen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Befehlstaste</kbd> + <kbd>Y</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zum nächsten Knoten springen (nur aufgeklappte Knoten)</th>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zum vorherigen Knoten springen</th>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Aktuellen Knoten aufklappen</th>
+ <td><kbd>Pfeil rechts</kbd></td>
+ <td><kbd>Pfeil rechts</kbd></td>
+ <td><kbd>Pfeil rechts</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Aktuellen Knoten einklappen</th>
+ <td><kbd>Pfeil links</kbd></td>
+ <td><kbd>Pfeil links</kbd></td>
+ <td><kbd>Pfeil links</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Durch Attribute eines Knotens nach vorne blättern</th>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Durch Attribute eines Knotens nach hinten blättern</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewähltes Attribut bearbeiten</th>
+ <td><kbd>Eingabetaste</kbd></td>
+ <td><kbd>Eingabetaste</kbd></td>
+ <td><kbd>Eingabetaste</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Knoten ein-/ausblenden</th>
+ <td><kbd>H</kbd></td>
+ <td><kbd>H</kbd></td>
+ <td><kbd>H</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Suchleiste im HTML-Bereich auswählen</th>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Als HTML bearbeiten</th>
+ <td><kbd>F2</kbd></td>
+ <td><kbd>F2</kbd></td>
+ <td><kbd>F2</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="CSS-Bereich">CSS-Bereich</h3>
+
+<p>Diese Tastaturkürzel funktionieren im <a href="/en-US/docs/Tools/Page_Inspector#CSS_pane" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">CSS-Bereich des Inspektors</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Durch Eigenschaften und Werte nach vorne blättern</th>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Durch Eigenschaften und Werte nach hinten blättern</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Wert um eins erhöhen</th>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Wert um eins vermindern</th>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Wert um 10 erhöhen</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Wert um 10 vermindern</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Wert um 0,1 erhöhen</th>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Wahltaste</kbd> + <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausgewählten Wert um 0,1 vermindern</th>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Wahltaste</kbd> + <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Debugger">Debugger</h2>
+
+<div id="debugger">
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Debugger öffnen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>S</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> im aktuellen Quelltext suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Im aktuellen Quelltext weitersuchen</th>
+ <td><kbd>Eingabetaste</kbd> / <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Eingabetaste</kbd> / <kbd>Pfeil oben</kbd></td>
+ <td><kbd>Eingabetaste</kbd> / <kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Im aktuellen Quelltext rückwärts suchen</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Enter</kbd> / <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Enter</kbd> / <kbd>Pfeil unten</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Enter</kbd> / <kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> in allen Quelltexten suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Nach Skripten nach Namen suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>P</kbd> / <kbd>Strg</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>P</kbd> / <kbd>Strg</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>P</kbd> / <kbd>Strg</kbd> + <kbd>O</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Nach Funktionsdefinitionen suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>D</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>D</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>D</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Variablen filtern, wenn Ausführung pausiert ist</th>
+ <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>V</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Ausführung nach Erreichen eines Haltepunkts fortsetzen</th>
+ <td><kbd>F8</kbd></td>
+ <td><kbd>F8</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+ <td><kbd>F8</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Schritt darüber</th>
+ <td><kbd>F10</kbd></td>
+ <td><kbd>F10</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+ <td><kbd>F10</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Schritt hinein</th>
+ <td><kbd>F11</kbd></td>
+ <td><kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+ <td><kbd>F11</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Schritt heraus</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F11</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F11</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Haltepunkt an der aktuellen Zeile an-/ausschalten</th>
+ <td><kbd>Strg</kbd> + <kbd>B</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>B</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>B</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Bedingten Haltepunkt an der aktuellen Zeile an-/ausschalten</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>B</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>B</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>B</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Auswahl als zu beobachtenten Ausdruck hinzufügen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> zu Zeile springen</th>
+ <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>L</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. Standardmäßig wird den Funktionstasten auf einigen Macs eine besondere Funktion zugewiesen, beispielsweise die Änderung der Bildschirmhelligkeit. Informationen finden Sie in diesem </a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">Leitfaden zur Verwendung dieser Tasten als Standard-Funktionstasten</a>. Um eine anders zugewiesene Taste als Standard-Funktionstaste zu verwenden, drücken Sie gleichzeitig die <kbd>Fn</kbd>-Taste (um die Laufzeitanalsyse zu öffnen drücken Sie also <kbd>Umschalt</kbd> + <kbd>Fn</kbd> + <kbd>F5</kbd>).</p>
+</div>
+
+<h2 id="Web-Konsole">Web-Konsole</h2>
+
+<div id="web-console">
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Web-Konsole öffnen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>K</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Im Nachrichtenfenster suchen</th>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row"><a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">Bereich „Objektinspektor“</a> leeren</th>
+ <td><kbd>Escape</kbd></td>
+ <td><kbd>Escape</kbd></td>
+ <td><kbd>Escape</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Fokus auf die Kommandozeile setzen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>K</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Kommandozeile">Kommandozeile</h3>
+
+<p>Diese Tastaturkürzel funktionieren in der <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">Kommandozeile</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Rückwärts durch die Ausgabe blättern</th>
+ <td><kbd>Bild Auf</kbd></td>
+ <td><kbd>Bild Auf</kbd></td>
+ <td><kbd>Bild Auf</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Vorwärts durch die Ausgabe blättern</th>
+ <td><kbd>Bild Ab</kbd></td>
+ <td><kbd>Bild Ab</kbd></td>
+ <td><kbd>Bild Ab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Rückwärts durch die <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">bereits ausgeführten Befehle</a> blättern</th>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row" style="width: 40%;">Vorwärts durch die <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">bereits ausgeführten Befehle</a> blättern</th>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zum Zeilenanfang springen</th>
+ <td><kbd>Pos1</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>A</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>A</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zum Zeilenende sprinten</th>
+ <td><kbd>Ende</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>E</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Den aktuellen Ausdruck ausführen</th>
+ <td><kbd>Eingabetaste</kbd></td>
+ <td><kbd>Eingabetaste</kbd></td>
+ <td><kbd>Eingabetaste</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Zeilenumbruch für mehrzeilige Ausdrücke einfügen</th>
+ <td><kbd>Umschalt</kbd> + <kbd>Eingabetaste</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Eingabetaste</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>Eingabetaste</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Autovervollständigung_Anzeige">Autovervollständigung Anzeige</h3>
+
+<p>Diese Tastaturkürzel funktionieren, wenn die <a href="/en-US/docs/Tools/Web_Console#Autocomplete">Autovervollständigung</a> Anzeige geöffnet ist.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Auswählen des aktuellen Vorschlags der Autovervollständigung</th>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ <td><kbd>Tab</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Anzeige der Autovervollständigung schließen</th>
+ <td><kbd>Escape</kbd></td>
+ <td><kbd>Escape</kbd></td>
+ <td><kbd>Escape</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Bei geöffneter Anzeige den vorherigen Vorschlag der Autovervollständigung auswählen</th>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ <td><kbd>Pfeil oben</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Bei geöffneter Anzeige den nächsten Vorschlag der Autovervollständigung auswählen</th>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ <td><kbd>Pfeil unten</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Rückwärts durch die Autovervollständigung-Vorschläge blättern</th>
+ <td><kbd>Bild Auf</kbd></td>
+ <td><kbd>Bild Auf</kbd></td>
+ <td><kbd>Bild Auf</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Vorwärts durch die Autovervollständigung-Vorschläge blättern</th>
+ <td><kbd>Bild Ab</kbd></td>
+ <td><kbd>Bild Ab</kbd></td>
+ <td><kbd>Bild Ab</kbd></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="scratchpad">
+<h2 id="Stilbearbeitung">Stilbearbeitung</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">Stilbearbeitung öffnen</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Anzeige der Autovervollständigung öffnen</th>
+ <td><kbd>Strg</kbd> + <kbd>Leertaste</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Leertaste</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Leertaste</kbd></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="JavaScript-Umgebung">JavaScript-Umgebung</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 40%;">Befehl</th>
+ <th scope="col">Windows</th>
+ <th scope="col">Mac OS X</th>
+ <th scope="col">Linux</th>
+ </tr>
+ <tr>
+ <th scope="row">JavaScript-Umgebung öffnen</th>
+ <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+ <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Quelltext in der JavaScript-Umgebung ausführen</th>
+ <td><kbd>Strg</kbd> + <kbd>R</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>R</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>R</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Quelltext in der JavaScript-Umgebung ausführen und das Ergebnis im <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">Objektinspektor</a> anzeigen</th>
+ <td><kbd>Strg</kbd> + <kbd>I</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>I</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>I</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Quelltext in der JavaScript-Umgebung ausführen und Ergebnis als Kommentar einfügen</th>
+ <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>L</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Aktuelle Funktion neu auswerten</th>
+ <td><kbd>Strg</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>E</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>E</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Aktuelle Seite neu laden, dann den Quelltext in der JavaScript-Umgebung ausführen</th>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>R</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>R</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>R</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Inhalt der JavaScript-Umgebung speichern</th>
+ <td><kbd>Strg</kbd> + <kbd>S</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>S</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>S</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Existierende JavaScript-Umgebung öffnen</th>
+ <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>O</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Neue JavaScript-Umgebung erstellen</th>
+ <td><kbd>Strg</kbd> + <kbd>N</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>N</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>N</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">JavaScript-Umgebung schließen</th>
+ <td><kbd>Strg</kbd> + <kbd>W</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>W</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>W</kbd></td>
+ </tr>
+ <tr>
+ <th scope="row">Quelltext in der JavaScript-Umgebung einheitlich formatieren</th>
+ <td><kbd>Strg</kbd> + <kbd>P</kbd></td>
+ <td><kbd>Befehlstaste</kbd> + <kbd>P</kbd></td>
+ <td><kbd>Strg</kbd> + <kbd>P</kbd></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/netzwerkanalyse/index.html b/files/de/tools/netzwerkanalyse/index.html
new file mode 100644
index 0000000000..1eed8449f5
--- /dev/null
+++ b/files/de/tools/netzwerkanalyse/index.html
@@ -0,0 +1,126 @@
+---
+title: Netzwerkanalyse
+slug: Tools/netzwerkanalyse
+translation_of: Tools/Network_Monitor
+---
+<div>{{ToolsSidebar}}</div><p>Die Netzwerkanalyse zeigt Ihnen alle Netzwerkanfragen in Firefox  (z. B. wenn er eine Seite lädt oder über <a href="/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), wie lange jede Anfrage gedauert hat und Details dazu. Um die Analyseansicht zu öffnen, wählen Sie „Netzwerkanalyse“ im Menü „Web-Entwickler“ (welches ein Untermenü von „Extras“ unter Mac und Linux ist) oder öffnen Sie die Entwickler-Symbolleiste und wechseln Sie zum Reiter „Netzwerk“.</p>
+
+<p>Die Netzwerkanalyse erscheint am unteren Browserrand. Laden Sie die Seite neu, um die Anfrage zu sehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7405/nm-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Liste_der_Netzwerkanfragen">Liste der Netzwerkanfragen</h2>
+
+<p>Per Voreinstellung zeigt die Netzwerkanalyse eine Liste aller Netzwerkanfragen, die während des Ladens der Seite gemacht wurden. Jede Anfage steht in einer eigenen Zeile:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Felder_der_Netzwerkanfragen">Felder der Netzwerkanfragen</h3>
+
+<p>Jede Zeile zeigt folgendes:</p>
+
+<ul>
+ <li><strong>√</strong>: der zurückgegebene HTTP-Statuscode. Das wird als eingefärbtes Symbol dargestellt: grün steht für Erfolg (Codes mit 2XX), orange steht für Weiterleitung (3XX) und rot steht für Fehler (4XX und 5XX). Ab Firefox 30 wird der exakte Code gleich hinter dem Symbol angezeigt.</li>
+ <li><strong>Methode</strong>: die HTTP-Anfragemethode</li>
+ <li><strong>Datei</strong>: Basisname der angefragten Datei</li>
+ <li><strong>Domain</strong>: Domain des angefragten Pfades</li>
+ <li><strong>Typ</strong>: <code>Content-type</code> der Anfrage</li>
+ <li><strong>Größe</strong>: Größe der Anfrage</li>
+</ul>
+
+<p>Die Symbolleiste oberhalb benennt diese Spalten und das Klicken auf eine Benennung sortiert die Anfragen nach dieser Spalte.</p>
+
+<p>Ab Firefox 30 wird ein Vorschaubild der Grafik angezeigt, wenn es sich bei der Datei und eine Grafik handelt, und beim Drüberfahren mit dem Mauszeiger wird ein Vorschaubild angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Zeitverlauf">Zeitverlauf</h3>
+
+<p>Die Anfrageliste zeigt ebenfalls einen Zeitverlauf für die verschiedenen Teilen jeder Anfrage. Jeder Zeitverlauf erhält eine horizontale Position in seiner Reihe relativ zu den anderen Netzwerkanfragen. Damit können Sie sehen, wie lange die Seite insgesamt zum Laden benötigt hat. </p>
+
+<h3 id="Nach_Content-Typen_filtern">Nach Content-Typen filtern</h3>
+
+<p>Am Ende jeder Seite können Sie über die Schaltflächen Filter für die Anfragen erstellen, abhängig vom Content-Typ der Anfrage:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="geckoVersionNote">
+<p>Das Leeren der Liste der Netzwerkanfragen ist neu seit Firefox 28.</p>
+</div>
+
+<p>Ab Firefox 28 gibt es ganz rechts in der Zeile die Schaltfläche „Leeren“: Wie Sie sicher ahnen, können Sie damit die Liste der Netzwerkanfragen löschen.</p>
+
+<h2 id="Details_zu_den_Netzwerkanfragen">Details zu den Netzwerkanfragen</h2>
+
+<p>Durch einen Klick auf eine Zeile wird eine neue Ansicht im rechten Teil des Netzwerkanalyse-Fensters angezeigt, das Ihnen detaillierte Informationen über die Anfrage bietet.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Mithilfe der Reiter ganz oben in dieser Ansicht können Sie zwischen verschiedenen Seiten wechseln:</p>
+
+<ul>
+ <li><strong>Kopfzeilen</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Parameter</strong></li>
+ <li><strong>Antwort</strong></li>
+ <li><strong>Zeit</strong></li>
+</ul>
+
+<p>Ab Firefox 30 gibt es eine sechste Seite namens <strong>Vorschau</strong>, die nur angezeigt wird, wenn der Content-Typ HTML ist.</p>
+
+<p>Durch Klicken auf das Symbol links von den Reitern schließt diese Ansicht und bringt Sie zurück zur Listenansicht.</p>
+
+<h3 id="Kopfzeilen">Kopfzeilen</h3>
+
+<p>Dieser Reiter listet Basisinformationen über die Anfragen auf und enthält die URL, den Status-Code, die HTTP-Anfrage und die Antwortkopfzeilen, die gesendet wurden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Sie können zu den angezeigten Kopfzeilen Filter setzen:</p>
+
+<h3 id="Cookies"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies</h3>
+
+<p>Dieser Reiter zeigt alle Details zu jedem Cookie, das mit einer Anfrage oder einer Antwort gesendet wurde:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">So wie bei den Kopfzeilen können Sie auch die angezeigten Cookies filtern.</p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Dieser Reiter zeigt die GET-Parameter und POST-Daten einer Anfrage:</p>
+
+<h3 id="Antwort"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Antwort</h3>
+
+<p>Der vollständige Inhalt einer Antwort wird in diesem Reiter angezeigt. Wenn die Antwort HTML, JS oder CSS ist, wird es als Text dargestellt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn die Antwort JSON ist, wird es als untersuchbares Objekt dargestellt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn die Anfrage eine Grafik ist, wird im Reiter eine Vorschau dargestellt:</p>
+
+<h3 id="Zeitverlauf_2"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Zeitverlauf</h3>
+
+<p>Im Reiter Zeitverlauf wird eine detailliertere und kommentierte Ansicht der Zeitverlaufsleiste dieser Anfrage angezeigt und stellt die Gesamtwartezeit in seinen verschiedenen Abschnitten dar:<img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Vorschau">Vorschau</h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu ab Firefox 30.</p>
+</div>
+
+<p>Ab Firefox 30 wird der Reiter „Vorschau“ als sechstes Element angezeigt, wenn der Dateityp HTML ist. Es zeigt den HTML-Inhalt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Netzwerkanalyse_starten">Netzwerkanalyse starten</h2>
+
+<div class="geckoVersionNote">
+<p>Das Werkzeug zum Starten der Netzwerkanalyse ist neu ab Firefox 29.</p>
+</div>
+
+<p>Ab Firefox 29 enthält die Netzwerkanalyse ein Werkzeug zum Starten derselben. Das hilft Ihnen zu zeigen, wie lange der Browser braucht, um die verschiedenen Teile Ihrer Website zu laden.</p>
+
+<p>Klicken Sie zum Starten der Netzwerkanalyse auf das Symbol mit der Stoppuhr in der Symbolleiste am unteren Rand der Anzeige:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(Alternativ dazu und wenn Sie gerade erst die Netzwerkanalyse geöffnet haben und es noch keine Daten enthält, erhalten Sie ein Stoppuhr-Symbol im Hauptfenster.)</p>
+
+<p>Die Website wird dann zweimal geladen: einmal mit einem leeren Browser-Cache und einmal mit einem gefüllten Cache. Dies simuliert den erstmaligen sowie darauffolgende Besuche eines Nutzers auf ihrer Seite.</p>
+
+<p>Die Ergebnisse werden für jeden Testdurchlauf nebeneinander dargestellt – oder vertikal angeordnet, wenn das Fenster schmaler ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">Das Ergebnis jedes Testdurchlaufes wird mittels einer Tabelle und einer Tortengrafik zusammengefasst. Die Tabelle gruppiert die Ressourcen nach ihrem Typ und zeigt die einzelnen Gesamtgrößen und den Gesamtzeitverlauf, den das Laden benötigt, an. Die dazugehörige Tortengrafik zeigt die relativen Größen jeder Ressource an.</p>
+
+<p>Um zur Liste der Netzwerkanfragen zurückzukehreren, klicken Sie auf die Schaltfläche „Zurück“ auf der linken Seite.</p>
+
+<p>Wenn Sie auf einen Ausschnitt in der Tortengrafik klicken, werden Sie zum entsprechenden Testdurchlauf weitergeleitet und Filter wird <a href="/docs/Tools/Network_Monitor#Nach_Content-Typen_filtern">nur dieser Ressoure-Typ</a> dargestellt.</p>
diff --git a/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html
new file mode 100644
index 0000000000..ac8aca1c8a
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html
@@ -0,0 +1,27 @@
+---
+title: Event Listener untersuchen
+slug: Tools/Page_Inspector/How_to/Event_Listener_untersuchen
+tags:
+ - Guide
+ - Inspector
+ - Werkzeuge
+translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners
+---
+<div>{{ToolsSidebar}}</div><p>Seit Firefox 33 wird ein "ev" Symbol im <a href="/de/docs/Tools/Page_Inspector/UI_Tour#HTML_panel">HTML Panel</a> neben Elementen angezeigt, an die Event Listener gebunden sind:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>Wird auf das Symbol geklickt, wird ein Popup angezeigt, das alle Event Listener anzeigt, die an dieses Element gebunden sind:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Jede Zeile beinhaltet:</p>
+
+<ul>
+ <li>einen Pausieren Button: Wird darauf geklickt, gelangt man zum Event Listener innerhalb des <a href="/de/docs/Tools/Debugger">Debuggers</a>, wo ein Haltepunkt für ihn gesetzt werden kann.</li>
+ <li>den Namen des Events.</li>
+ <li>den Namen und die Zeilennummer des Listeners: Wird darauf geklickt, wird die Listenerfunktion im Popup angezeigt.</li>
+ <li>die Information, ob ein Event nach oben steigt (Bubbling) und welche Spezifikation es definiert.</li>
+</ul>
+
+<p>Beachte, dass auch <a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery Events</a> untersucht werden können, nicht nur DOM Events.</p>
+
+<p> </p>
diff --git a/files/de/tools/page_inspector/how_to/index.html b/files/de/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..54b596910d
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: Wie handeln (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>
diff --git a/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html
new file mode 100644
index 0000000000..0318a735a4
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html
@@ -0,0 +1,23 @@
+---
+title: 'CSS Raster Inspektor: Raster-Layout untersuchen'
+slug: Tools/Page_Inspector/How_to/Raster_Layout_untersuchen
+tags:
+ - Anleitung
+ - Inspektor
+ - Raster
+ - Tools
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">Neu in Firefox 52</div>
+
+<p>Seit den Firefox 52 Entwickler-Tools ist es möglich, sich zur Untersuchung eines CSS-Rasters die Spalten und Zeilen eines Rasters anzeigen zu lassen.</p>
+
+<p>Wenn ein Element mit <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> als Raster-Layout definiert wird, wird ein kleines Rastersymbol sichtbar: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Klicke auf das Icon, um die Struktur des Rasters zu visualisieren:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">Die Rasterlinien werden auch dann noch angezeigt, wenn andere Elemente ausgewählt werden. Auswirkung von Änderungen anderer Elemente auf das Raster können so leicht nachverfolgt werden.</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<p>Besuche <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> (Englisch) für viele interessante Raster-Ideen.</p>
diff --git a/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html
new file mode 100644
index 0000000000..0106b4d282
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html
@@ -0,0 +1,231 @@
+---
+title: Schriftarten Bearbeitung
+slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung
+translation_of: Tools/Page_Inspector/How_to/Edit_fonts
+---
+<div>{{ToolsSidebar}}</div>
+
+<div> Dieser Artikel bietet einen Überblick über die in den Firefox DevTools verfügbaren Schriftarten-Tools. Dieses Tool enthält mehrere nützliche Funktionen zum Anzeigen und Bearbeiten von Schriftarten, die auf ein im Browser geladenes Dokument angewendet werden, einschließlich der Überprüfung aller auf die Seite angewendeten Schriftarten und der präzisen Anpassung der Werte variabler Schriftachsen.{</div>
+
+<div>{ToolsSidebar}}</div>
+
+<p class="summary">This article provides a tour of the Font tools available in the Firefox DevTools. This tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The updated Font tools as shown in this article are available in Firefox 63 onwards; if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available).</p>
+</div>
+
+<h2 id="The_Fonts_tab">The Fonts tab</h2>
+
+<p>The Fonts tab is located on the right-hand side of the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> when it is docked to the bottom of the screen. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. To access it:</p>
+
+<ol>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Page Inspector</a>.</li>
+ <li>Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16157/full-fonts-tab-new63.png" style="border: 1px solid black; display: block; height: 663px; margin: 0px auto; width: 500px;"></p>
+
+<p>The Fonts tab has three major sections:</p>
+
+<ul>
+ <li>"Fonts used" by the currently inspected element.</li>
+ <li>The new Fonts Editor. In Firefox 61 and 62, this section does not exist.</li>
+ <li>"All fonts on page" — This section lists all of the fonts in use on the page. In Firefox 61 and 62, this area is labeled "Other fonts in page" and doesn't include the fonts mentioned in the "Fonts used" section.</li>
+</ul>
+
+<h2 id="Fonts_used">Fonts used</h2>
+
+<p>The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16150/fonts-used.png" style="border-style: solid; border-width: 1px; display: block; height: 114px; margin: 0px auto; width: 400px;"></p>
+
+<p>Fonts are considered "used" when there is text content in the inspected element that has the font applied to it. Empty elements will not have any fonts used and will display the message "No fonts were found for the current element."</p>
+
+<p>Fonts will be included in this section for one of the following reasons:</p>
+
+<ul>
+ <li>They are listed in the element's <code>font-family</code> CSS declaration value.</li>
+ <li>They are applied to the element as part of the browser's default styling (Times New Roman for most browsers), and no author-defined font has been supplied.</li>
+ <li>They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied.</li>
+ <li>They are system fallback fonts used when nothing from the <code>font-family</code> CSS declaration has been applied.</li>
+</ul>
+
+<h2 id="Fonts_Editor">Fonts Editor</h2>
+
+<p>Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16159/fonts-editor-closeup-63-cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 134px; margin: 0px auto; width: 500px;"></p>
+
+<p>For standard (static) fonts, you will be able to change the settings listed below</p>
+
+<h3 id="Size">Size</h3>
+
+<p>The {{cssxref("font-size")}} for the inspected element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16160/font-size_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 26px; margin: 0px auto; width: 360px;"></p>
+
+<p>This can be set using <code>em</code>, <code>rem</code>, <code>%</code>, <code>px</code>, <code>vh</code>, or <code>vw</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you want to use a different unit such as <code>pt</code> for <code>font-size</code> or <code>line-height</code>, you can set the property value applied to the currently inspected element to use that unit via the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">rules view</a>, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.</p>
+</div>
+
+<p>Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.</p>
+
+<p>Example: If <code>1rem</code> is equivalent to 10 pixels, when you change the unit of measurement from <code>rem</code> to <code>px</code>, <code>2rem</code> becomes <code>20px</code>.</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The {{cssxref("line-height")}} of the inspected element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16166/line-height_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p>
+
+<p>This can be set using unitless, <code>em</code>, <em>%</em>, or <code>px</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p>
+
+<p>Changing the unit of measure changes the value relative to the <code>font-size</code> setting.</p>
+
+<p>Example: If the font is 20 pixels high and the line-height is <code>1.5em</code>, when you change the unit of measure from <code>em</code> to <code>px</code>, the value will become <code>30px</code>.</p>
+
+<h3 id="Weight">Weight</h3>
+
+<p>The {{cssxref("font-weight")}} for the inspected element.</p>
+
+<p><img alt="Font weight setting" src="https://mdn.mozillademos.org/files/16162/font-weight_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p>
+
+<p>You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">variable fonts</a> (see below) that define a <code>wght</code> variation axis, this range is custom.</p>
+</div>
+
+<h3 id="Italic">Italic</h3>
+
+<p>The {{cssxref("font-style")}} for the inspected element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16163/font-italic_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p>
+
+<p>This setting toggles between <code>italic</code> and <code>normal</code> values for the <code>font-style</code> CSS property.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.</p>
+</div>
+
+<h2 id="All_fonts_on_page">All fonts on page</h2>
+
+<p>The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16158/all-fonts-on-page_new63.png" style="border: 1px solid black; display: block; height: 641px; margin: 0px auto; width: 500px;"></p>
+
+<p>The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.</p>
+
+<p>Each font listed in this section shows you:</p>
+
+<ul>
+ <li>The <code>font-family</code> identifier and full name of the font.</li>
+ <li>The URL to the font file in the case of web fonts not available on your system, or "System" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). You can copy the URL to the font file by clicking on the icon to the right of the URL.</li>
+ <li>The {{cssxref("@font-face")}} descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet.</li>
+ <li>A text sample, to give you an idea of what the font looks like when rendered. The default text for the sample is "Abc" but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. Once entered, all of the sample text will be set to the same custom value.</li>
+</ul>
+
+<h2 id="Variable_font_support_in_Firefox_Developer_Tools">Variable font support in Firefox Developer Tools</h2>
+
+<p>Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.</p>
+
+<h3 id="What_are_variable_fonts">What are variable fonts?</h3>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable Fonts</a>, or <strong>OpenType Font Variations</strong>, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary.</p>
+
+<p>Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by <strong>axes of variation</strong> (see <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Introducing_the_'variation_axis'">Introducing the 'variation axis'</a> for more information). For example, {{cssxref("font-weight")}} can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).</p>
+
+<p>There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer <em>does </em>implement a registered axis, its behavior <em>must</em> follow the defined behavior.</p>
+
+<p>All variable font axes have a four-character axis tag. The CSS <code>{{cssxref("font-variation-settings")}}</code> property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using <code>font-variation-settings</code>, you could do something like this:</p>
+
+<pre class="brush: css notranslate">font-variation-settings: "wght" 350;</pre>
+
+<p>However, you should only use <code>font-variation-settings</code> as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).</p>
+
+<div class="note">
+<p><strong>Note</strong>: font characteristics set using <code>font-variation-settings</code> will always override those set using the corresponding basic font properties, e.g. <code>font-weight</code>, no matter where they appear in the cascade.</p>
+</div>
+
+<p>Here are the registered axes along with their corresponding CSS properties:</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Axis Tag</th>
+ <th scope="col">CSS Property</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>"wght"</td>
+ <td>{{cssxref("font-weight")}}</td>
+ </tr>
+ <tr>
+ <td>"wdth"</td>
+ <td>{{cssxref("font-stretch")}}</td>
+ </tr>
+ <tr>
+ <td>"slnt" (slant)</td>
+ <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
+ </tr>
+ <tr>
+ <td>"ital"</td>
+ <td>{{cssxref("font-style")}}: <code>italic</code></td>
+ </tr>
+ <tr>
+ <td>"opsz"</td>
+ <td>
+ <p>{{cssxref("font-optical-sizing")}}</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.</p>
+</div>
+
+<div class="warning">
+<p><strong>Warning</strong>: In order to use variable fonts, you need to make sure that your operating system is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.</p>
+</div>
+
+<h4 id="Working_with_Variable_fonts_in_the_Font_Editor">Working with Variable fonts in the Font Editor</h4>
+
+<p>If the inspected element uses a variable font, the Fonts tab shows the axes that have been implemented for that particular font, providing control to alter the value of each one. This is very useful for quickly finding out what axes are available in a particular font — they can vary quite dramatically as font designers can implement basically anything they like.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16164/v_fonts_example_cropped.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 350px;"></p>
+
+<p>You can adjust the axes individually or, if the font designer has included defined instances, you can select one from the "Instance" drop-down list and view the updates live on your page.</p>
+
+<p>Here are a couple of examples of fonts with different axes defined:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16167/v_fonts-examples_cropped.png" style="display: block; height: 29px; margin: 0px auto; width: 700px;"></p>
+
+<p>In the following example, you can see that the font "Cheee Variable" includes settings for Yeast and Gravity. These are custom axes defined by the font designer.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16169/change_font_before_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 889px;"></p>
+
+<p>The first image shows the font as it is used on the page with default settings. The second image shows the same font after selecting the "Hi Yeast Hi Gravity" variation.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16168/change_font_after_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 897px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Tips">Tips</h2>
+
+<p>Finally, here are a few tips for making effective use of the Fonts tab:</p>
+
+<ul>
+ <li>When using the Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>, you can view the CSS rules for the inspected element simultaneously alongside the Fonts tab.</li>
+ <li>If you hover over the {{cssxref("font-family")}} property in the Rules view, a tooltip shows a sample of the font:
+ <p><img alt="" src="https://mdn.mozillademos.org/files/16170/fonts_62_tooltip_cropped.png" style="border: 1px solid black; display: block; height: 153px; margin: 0px auto; width: 450px;"></p>
+ </li>
+ <li>You'll also notice in the above screenshot that the font in the <code>font-family</code> font stack that is actually applied to the inspected element is underlined. This makes it easy to see exactly what is being applied where, when font stacks are specified.</li>
+</ul>
diff --git a/files/de/tools/paint_flashing_tool/index.html b/files/de/tools/paint_flashing_tool/index.html
new file mode 100644
index 0000000000..7fca9a3167
--- /dev/null
+++ b/files/de/tools/paint_flashing_tool/index.html
@@ -0,0 +1,94 @@
+---
+title: Paint Flashing Tool
+slug: Tools/Paint_Flashing_Tool
+translation_of: Tools/Paint_Flashing_Tool
+---
+<div>{{ToolsSidebar}}</div><p>The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.</p>
+
+<h2 id="Repaints_and_responsiveness">Repaints and responsiveness</h2>
+
+<p>When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class that changes the element's style.</p>
+
+<p>Repainting can be an expensive operation, so the browser tries to minimise the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.</p>
+
+<p>The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.</p>
+
+<h2 id="Using_the_paint_flashing_tool">Using the paint flashing tool</h2>
+
+<p>There are two ways to switch on paint flashing:</p>
+
+<ul>
+ <li>open the <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Toolbox</a>, then click the icon labeled "Highlight painted area":</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<ul>
+ <li>activate the <a href="/en-US/docs/Tools/GCLI" title="/en-US/docs/Tools/GCLI">Developer Toolbar</a> and type "paintflashing on", then press the Enter key:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5931/paint-flashing-open-from-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">In this example, there are two main sources of repaints:</p>
+
+<ul>
+ <li>moving the mouse over links makes the browser repaint them, because they have a style applied using the <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class</li>
+ <li>scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right</li>
+</ul>
+
+<p>To deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again, or type "paintflashing off" into the Developer Toolbar and press Enter.</p>
+
+<h2 id="Example_CSS_transitions">Example: CSS transitions</h2>
+
+<p>One area where implementation choices can affect repaint efficiency is in <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's <a href="/en-US/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a>, while the second way moves the element using the <a href="/en-US/docs/Web/CSS/transform" title="/en-US/docs/Web/CSS/transform"><code>transform</code></a> property.</p>
+
+<pre class="brush: html">&lt;body&gt;
+ &lt;div id="container"&gt;
+     &lt;div class="moving-box" id="moving-box-left-margin"&gt;Transition using margin-left&lt;/div&gt;
+     &lt;div class="moving-box" id="moving-box-transform"&gt;Transition using transform&lt;/div&gt;
+ &lt;/div&gt;
+&lt;/body&gt;
+
+</pre>
+
+<pre class="brush: css">#container {
+ border: 1px solid;
+}
+
+.moving-box {
+  height: 20%;
+  width:20%;
+  margin: 2%;
+  padding: 2%;
+  background-color: blue;
+  color: white;
+  font-size: 24px;
+}
+
+#moving-box-left-margin {
+  transition: margin-left 4s;
+}
+
+#moving-box-transform {
+  transition: transform 4s;
+}
+
+body:hover #moving-box-left-margin{
+  margin-left: 74%;
+}
+
+body:hover #moving-box-transform {
+  transform: translate(300%);
+}</pre>
+
+<p>To see the transition, move the mouse into the space below:</p>
+
+<p>{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}</p>
+
+<p>Now switch paint flashing on, and try it again. You should see that the <code>margin-left</code> version triggers a series of repaints as the element moves, while the <code>transform</code> version only causes repaints in the start and end positions.</p>
+
+<p>Why? Well, when you use <code>transform</code>, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.</p>
+
+<p>In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.</p>
diff --git a/files/de/tools/performance/index.html b/files/de/tools/performance/index.html
new file mode 100644
index 0000000000..21a61a4805
--- /dev/null
+++ b/files/de/tools/performance/index.html
@@ -0,0 +1,96 @@
+---
+title: Performance
+slug: Tools/Performance
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Mit dem Leistungstool erhalten Sie Einblick in die allgemeine Reaktionsfähigkeit, JavaScript und Layoutleistung Ihrer Website. Mit dem Leistungstool erstellen Sie über einen bestimmten Zeitraum eine Aufnahme oder ein Profil Ihrer Website. Das Tool zeigt Ihnen dann einen <a href="/de/docs/Tools/Performance/UI_Tour#Waterfall_overview">Überblick</a> über die Aktivitäten des Browsers zum Rendern Ihrer Website über das Profil und eine Grafik der <a href="/de/docs/Tools/Performance/Frame_rate">Bildrate</a> über dem Profil.</p>
+
+<p>Sie erhalten vier Unterwerkzeuge, mit denen Sie Aspekte des Profils genauer untersuchen können:</p>
+
+<ul>
+ <li>Der <a href="/de/docs/Tools/Performance/Waterfall">Wasserfall</a> zeigt die verschiedenen Vorgänge, die der Browser ausgeführt hat, z. B. die Ausführung von Layout, JavaScript, Repaints und Garbage Collection</li>
+ <li>Der <a href="/de/docs/Tools/Performance/Call_Tree">Aufrufbaum</a> zeigt die JavaScript-Funktionen, in denen der Browser die meiste Zeit verbracht hat</li>
+ <li>Das <a href="/de/docs/Tools/Performance/Flame_Chart">Flammendiagramm</a> zeigt den JavaScript-Aufrufstack über den Verlauf der Aufzeichnung</li>
+ <li>Die <a href="/de/docs/Tools/Performance/Allocations">Allokationsansicht</a> zeigt die von Ihrem Code im Verlauf der Aufzeichnung vorgenommenen Heap-Zuordnungen an. Diese Ansicht wird nur angezeigt, wenn Sie in den Einstellungen des Leistungstools die Option "Datensatzzuordnungen" aktiviert haben.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Erste_Schritte">Erste Schritte</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>Um sich im Performance-Tool zurechtzufinden, finden Sie hier eine kurze Einführung in die Benutzeroberfläche.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Grundlagen: Öffnen Sie das Tool, erstellen, speichern, laden und konfigurieren Sie Aufnahmen</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Komponenten_des_Performance-Tools">Komponenten des Performance-Tools</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Frame_rate">Bildrate</a></dt>
+ <dd>Understand your site's overall responsiveness.</dd>
+ <dt><a href="/de/docs/Tools/Performance/Call_Tree">Aufruf-Baum</a></dt>
+ <dd>Find bottlenecks in your site's JavaScript.</dd>
+ <dt><a href="/de/docs/Tools/Performance/Allocations">Allokationen</a></dt>
+ <dd>See the allocations made by your code over the course of the recording.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Waterfall">Wasserfall</a></dt>
+ <dd>Understand the work the browser's doing as the user interacts with your site.</dd>
+ <dt><a href="/de/docs/Tools/Performance/Flame_Chart">Flammendiagramm</a></dt>
+ <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Scenarios">Scenarios</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animieren von CSS-Eigenschaften</a></dt>
+ <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensives JavaScript</a></dt>
+ <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html
new file mode 100644
index 0000000000..0b90f7db95
--- /dev/null
+++ b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html
@@ -0,0 +1,38 @@
+---
+title: Debugging Firefox Desktop
+slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop
+translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop
+---
+<p>{{draft}}</p>
+
+<p>{{ToolsSidebar}}</p>
+
+<p>This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the <em>debuggee</em>, and the instance of Firefox doing the debugging is called the <em>debugger</em>.</p>
+
+<h2 id="Enable_remote_debugging">Enable remote debugging</h2>
+
+<p>First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>. If you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, they are checked by default.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>You only need to do this once: the setting values persist across restarts.</p>
+
+<h2 id="Start_the_debugger_server">Start the debugger server</h2>
+
+<p>Next, you need to start the debugger server in the debuggee.</p>
+
+<p>Run the debuggee from the command line, passing it the <code>--start-debugger-server</code> option:</p>
+
+<pre class="notranslate">/path/to/firefox --start-debugger-server</pre>
+
+<p>Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:</p>
+
+<pre class="notranslate">/path/to/firefox --start-debugger-server 1234</pre>
+
+<p>Note: in Windows, the <code>start-debugger-server</code> call will only have one dash:</p>
+
+<pre class="notranslate">firefox.exe -start-debugger-server 1234</pre>
+
+<div class="note">
+<p><strong>Note</strong>: By default, and for security reasons, the <code>devtools.debugger.force-local</code> option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.</p>
+</div>
diff --git a/files/de/tools/remote_debugging/firefox_for_android/index.html b/files/de/tools/remote_debugging/firefox_for_android/index.html
new file mode 100644
index 0000000000..f21c00f2e2
--- /dev/null
+++ b/files/de/tools/remote_debugging/firefox_for_android/index.html
@@ -0,0 +1,136 @@
+---
+title: Externes Debugging mit Firefox for Android
+slug: Tools/Remote_Debugging/Firefox_for_Android
+translation_of: Tools/Remote_Debugging/Firefox_for_Android
+---
+<div>{{ToolsSidebar}}</div><p>Diese Anleitung erklärt, wie man <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">remote debugging</a> verwendet, um Code unter <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> über USB zu inspizieren und zu debuggen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Diese Anleitung ist in zwei Teile aufgeteilt: im ersten Teil, "Voraussetzungen", werden die Voraussetzungen erklärt, welche aber nur einmal durchgeführt werden müssen. Im zweiten Teil, "Verbinden", wird erklärt, wie man zum Gerät verbindet. Dieser zweite Teil muss immer wieder durchgeführt werden.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Um zu beginnen, benötigen Sie folgendes:</p>
+
+<ul>
+ <li>einen Computer oder Laptop mit Firefox</li>
+ <li>ein Android-Mobilgerät mit Firefox for Android installiert </li>
+ <li>ein USB-Kabel, um das Mobilgerät mit dem Computer zu verbinden</li>
+</ul>
+
+<h3 id="ADB_Installation">ADB Installation</h3>
+
+<p>Als nächstes müssen Sie das Mobilgerät und den Computer so einrichten, dass die beiden miteinander kommunizieren können. Dafür wird das <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> Kommandozeilen-Programm verwendet.</p>
+
+<h4 class="note" id="Auf_dem_Android-Mobilgerät">Auf dem Android-Mobilgerät</h4>
+
+<ul>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">USB Debugging aktivieren (nur Schritt 2 von diesem Link)</a>.</li>
+ <li>Schliessen Sie das Mobilgerät über USB an den Computer an</li>
+</ul>
+
+<h4 class="note" id="Auf_dem_ComputerLaptop">Auf dem Computer/Laptop</h4>
+
+<ul>
+ <li>Installieren Sie die passende <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> Version für Ihr Mobilgerät.</li>
+ <li>Installieren die <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a> mit Hilfe des Android SDK.</li>
+ <li>Android Platform Tools installiert adb im "platform-tools" Ordner im Android-SDK-Installationspfad. Stellen Sie sicher, dass der "platform-tools" Ordner in der PATH-Variable eingetragen ist.</li>
+</ul>
+
+<p>Um dies zu testen, können Sie folgenden Befehl in  der Kommandozeile eingeben:</p>
+
+<pre>adb devices</pre>
+
+<p>Nun sehen Sie eine Ausgabe analog zu folgender:</p>
+
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+
+<p>(Die lange Hex-Zeichenkette wird verschieden sein.)</p>
+
+<p>Wenn diese Ausgabe korrekt ist, wurde ADB korrekt installiert und ADB konnte das Mobilgerät korrekt erkennen.</p>
+
+<p>Falls unter OSX die Zeile unterhalb von "List of devices attached" leer sein sollte, könnte es an EasyTether liegen:</p>
+
+<blockquote>
+<p>ADB on Mac OS X stops recognizing the attached device after installing EasyTether driver. Use kextload/kextunload to unload from memory the EasyTetherUSBEthernet.kext kernel extension manually. It is in /System/Library/Extensions/</p>
+
+<p>(Aus der Webseite von EasyTether)</p>
+</blockquote>
+
+<h3 id="Remote_Debugging_aktivieren">Remote Debugging aktivieren</h3>
+
+<p>Als nächstes muss "Remote Debugging" auf dem Mobilgerät und dem Computer aktiviert werden.</p>
+
+<h4 id="Firefox_for_Android_24_und_früher">Firefox for Android 24 und früher</h4>
+
+<p>Um "Remote Debugging" auf dem Mobilgerät zu aktivieren, muss der Wert der <code>devtools.debugger.remote-enabled</code> Einstellung auf <code>true</code> gesetzt werden.</p>
+
+<p>Gehen Sie nach <code>about:config</code> in Firefox for Android, tippen Sie "devtools" ins Suchfeld und drücken Sie auf den Suchen-Button. Nun sehen Sie alle devtools-Einstellungen. Setzen Sie nun die <code>devtools Einstellung debugger.remote-enabled</code> auf <code>true</code>, indem Sie auf "Umschalten" klicken.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 class="note" id="Firefox_for_Android_25_und_später">Firefox for Android 25 und später</h4>
+
+<p>Bei Firefox for Android 24 und später gibt es einen Menü-Eintrag, um "Remote Debugging" zu aktivieren. Öffnen Sie das Menü, wählen Sie "Einstellungen", dann "Entwicklerwerkzeuge" (auf einigen Android-Geräten müssen Sie auf "Mehr" klicken, um den Einstellungen-Eintrag zu sehen). Aktivieren Sie das Kontrollkästchen bei "Remote debugging":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Der Browser zeigt nun eine Notifikation an, dass die Portweiterleitung noch aktiviert werden muss. Dies werden wir später machen.</p>
+
+<h4 id="Auf_dem_Computer">Auf dem Computer</h4>
+
+<p>Auf dem Computer wird "Remote debugging" über die Entwicklerwerkzeuge aktiviert. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Öffnen Sie die Entwicklerwerkzeuge</a>, klicken Sie auf die "Einstellungen" Schaltfläche in der Symbolleiste und aktivieren Sie das Kontrollkästchen neben "Externes Debugging aktivieren":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="Note">Wenn Sie Firefox 26 oder älter verwenden, müssen Sie danach Firefox neu starten. Nach diesem Schritt sehen Sie im "Web-Entwickler" Menü einen neuen Eintrag "Verbinden...":</div>
+
+<div class="Note"> </div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Verbinden">Verbinden</h2>
+
+<p>Da Sie nun alles eingerichtet haben, können Sie den Computer über den "Verbinden..." Menü-Eintrag mit Ihrem Firefox for Android verbinden. Dazu verbinden Sie zuerst Ihr Mobilgerät mit Ihrem Computer, falls Sie dies nicht bereits gemacht haben.</p>
+
+<h4 class="note" id="Auf_dem_Computer_2">Auf dem Computer</h4>
+
+<p>Öffnen Sie ein Kommandozeilen-Fenster und tippen Sie:</p>
+
+<pre>adb forward tcp:6000 tcp:6000</pre>
+
+<p>(Falls Sie den zu verwendeten Port auf dem Android-Mobilgerät geändert haben, müssen Sie hier den geänderten Wert eintragen.)</p>
+
+<p>Für Firefox OS, tippen Sie:</p>
+
+<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+
+<p>Diesen Befehl müssen Sie immer ausführen, wenn das Mobilgerät über USB-Kabel an den Computer angeschlossen wird.</p>
+
+<p>Gehen Sie nun ins "Web-Entwickler" Menü und wählen Sie "Verbinden...". Sie werden folgende Seite sehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Sofern Sie den Android-Port nicht geändert haben, wählen Sie hier 6000 und drücken auf "Verbinden".</p>
+
+<h4 class="note" id="Auf_dem_Android-Mobilgerät_2">Auf dem Android-Mobilgerät</h4>
+
+<p>Nun sehen Sie auf Ihrem Mobilgerät folgende Meldung, da sich nun Firefox mit Ihrem Mobilgerät verbinden möchte.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Drücken Sie auf "OK". Firefox auf Ihrem Computer wartet einige Sekunden, damit Sie genug Zeit haben, auf dem Mobilgerät die Meldung zu quittieren. Wenn die Zeit nicht ausreicht, können Sie nochmals auf "Verbinden" klicken.</p>
+
+<h4 class="note" id="Auf_dem_Computer_3">Auf dem Computer</h4>
+
+<p>Als nächsten sehen Sie auf Ihrem Computer folgende Anzeige:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">Nun werden Sie gefragt, ob Sie den Code in einem Browser Tab oder den Browser selbst debuggen möchten.</p>
+
+<ul>
+ <li>Sie sehen jeweils pro geöffnetem Tab einen Eintrag unter "Verfügbare externe <span class="highlight">Tabs</span>". Sobald Sie auf den gewünschten Tab klicken, wird der Debugger an den Inhalt dieses Tabs angehängt. Wählen Sie diese Option, wenn Sie den Inhalt eines Tabs debuggen möchten.</li>
+ <li>Sie sehen einen Eintrag unter "Verfügbare externe Prozesse": das ist der Browser selbst. Wählen Sie diese Option, wenn Sie den Browser selbst debuggen möchten.</li>
+</ul>
+
+<p>Wir entscheiden uns für das Anfügen des Debuggers an die mozilla.org Webseite. Die Entwicklerwerkzeuge werden in einem eigenen Fenster geöffnet und werden an die Webseite innerhalb von Firefox for Android angehängt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;">Die Entwicklerwerkzeuge unterscheiden nicht zwischen lokalem Inhalt und Inhalt auf anderen Geräten. Sie funktionieren in beiden Fällen identisch.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/de/tools/remote_debugging/index.html b/files/de/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..5253b47cff
--- /dev/null
+++ b/files/de/tools/remote_debugging/index.html
@@ -0,0 +1,44 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+tags:
+ - Debugging
+ - Tools
+translation_of: Tools/Remote_Debugging
+---
+<div>{{ToolsSidebar}}</div><p>Du kannst die <a href="/de/docs/Tools">Firefox Developer Tools</a> dazu nutzen Websites und Webapps zu debuggen, die in anderen Browsern oder Umgebungen laufen. Andere Browser können auf dem selben Gerät sein oder auf einem anderen Gerät, wie zum Beispiel auf einem via USB verbundenen Gerät.</p>
+
+<p>Die detaillierten Verbindungsanleitungen sind umgebungsspezifisch, d.h. je nach Gerät und Umgebung ist eine andere Anleitung verfügbar.</p>
+
+<h2 id="Gecko-basierte_Umgebungen">Gecko-basierte Umgebungen</h2>
+
+<p>In erster Linie kannst du die Developer Tools mit gecko-basierten Umgebungen, wie zum Beispiel Firefox Desktop, Firefox für Android, Firefox OS oder Thunderbird, verbinden.</p>
+
+<ul>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox Desktop</a></li>
+ <li>Firefox für Android
+ <ul>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">über USB</a></li>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">über WiFi</a></li>
+ </ul>
+ </li>
+ <li>Firefox OS
+ <ul>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">über USB</a></li>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">über WiFi</a></li>
+ </ul>
+ </li>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li>
+</ul>
+
+<h2 id="Andere_Umgebungen">Andere Umgebungen</h2>
+
+<p>Das experimentelle <a href="/de/docs/Tools/Valence">Valence</a>-AddOn kann helfen Websites anderer, nicht gecko-basierter, Umgebungen zu verbinden, dazu gehören beispielsweise Google Chrome Desktop, Chrome für Android oder Safari für iOS.</p>
+
+<p>Valence ist standardmäßig in die <a href="/de/Firefox/Developer_Edition">Firefox Developer Edition</a> integriert.</p>
+
+<ul>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Chrome_Desktop">Chrome Desktop</a></li>
+ <li><a href="/de/docs/Tools/Valence">Chrome für Android</a></li>
+ <li><a href="/de/docs/Tools/Valence">Safari für iOS</a></li>
+</ul>
diff --git a/files/de/tools/scratchpad/index.html b/files/de/tools/scratchpad/index.html
new file mode 100644
index 0000000000..c17554d944
--- /dev/null
+++ b/files/de/tools/scratchpad/index.html
@@ -0,0 +1,85 @@
+---
+title: JavaScript-Umgebung
+slug: Tools/Scratchpad
+tags:
+ - Tools
+translation_of: Archive/Tools/Scratchpad
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Das Werkzeug „JavaScript-Umgebung“ bietet eine Umgebung zum Experimentieren mit JavaScript-Quelltext. Sie können Quelltext schreiben und testen, der mit den Inhalten der Webseite interagiert und dann zu Ihren gewohnten Entwicklungwerkzeugen wechseln, wo Sie Ihre Arbeit verfeinern und fertigstellen.</p>
+
+<p>Anders als die <a href="/de/Tools/Web_Console" title="Verwenden der Web-Konsole">Web-Konsole</a>, die nur eine Zeile Quelltext auf einmal interpretieren soll, können Sie mit der JavaScript-Umgebung größere Blöcke JavaScript-Quelltext bearbeiten und diese dann auf vielfältige Weise ausführen, je nachdem, wie Sie das Ergebnis verwenden möchten.</p>
+
+<p>{{EmbedYouTube("lvQf2u3rmkw")}}</p>
+
+<h2 id="Verwenden_der_JavaScript-Umgebung">Verwenden der JavaScript-Umgebung</h2>
+
+<p>Um ein Fenster der JavaScript-Umgebung zu öffnen, drücken Sie Umschalt+F4 oder öffnen Sie das Menü „Web-Entwickler“ (dieses ist unter Mac OS X und Linux ein Untermenü des Menüs „Extras“) und wählen Sie „JavaScript-Umgebung“. Dies öffnet ein Editorfenster der JavaScript-Umgebung mit einem Kommentar, der einige kurze Hinweise zur Verwendung der JavaScript-Umgebung liefert. Von dort aus können Sie direkt JavaScript-Quelltext eingeben und ausprobieren.</p>
+
+<p>Das Fenster der JavaScript-Umgebung sieht ungefähr so aus (unter Mac OS X ist die Menüleiste am oberen Bildschirmrand):</p>
+
+<p><img alt="German Scratchpad screenshot" src="https://mdn.mozillademos.org/files/7351/scratchpad-de.png" style="height: 289px; width: 678px;"></p>
+
+<p>Unter <a href="https://developer.mozilla.org/de/docs/tools/Keyboard_shortcuts#Quelltext-Editor" title="Verwenden des Quelltext-Editors">Verwenden des Quelltext-Editors</a> finden Sie eine Dokumentation zum Editor selbst, einschließlich nützlicher Tastaturkürzel.</p>
+
+<p>Im Datei-Menü finden Sie Optionen zum Speichern und Laden von Ausschnitten von JavaScript-Quelltext, so dass Sie Quelltext bei Gefallen später wiederverwenden können.</p>
+
+<h3 id="Ausführen_Ihres_Quelltexts">Ausführen Ihres Quelltexts</h3>
+
+<p class="note">Sobald Sie Ihren Quelltext geschrieben haben, wählen Sie den Quelltext aus, den Sie ausführen möchten. Wenn Sie nichts auswählen, wird der gesamte Quelltext im Fenster ausgeführt. Klicken Sie dann mit der rechten Maustaste (oder verwenden Sie das Menü „Ausführen“ in der Menüleiste) und wählen Sie, wie Ihr Quelltext ausgewählt werden soll. Es gibt vier Möglichkeiten zur Ausführung.<strong> </strong></p>
+
+<h4 id="Ausführen">Ausführen</h4>
+
+<p>Wenn Sie die Option „Ausführen“ wählen, wird der gewählte Quelltext ausgeführt. Dies können Sie verwenden, wenn Sie eine Funktion oder Quelltext ausführen möchten, der den Inhalt Ihrer Seite verändert, ohne dass Sie das Ergebnis sehen müssen.</p>
+
+<h4 id="Untersuchen">Untersuchen</h4>
+
+<p>Mit der Option „Untersuchen“ wird der Quelltext ebenso ausgeführt wie bei der Option „Ausführen“; anschließend wird allerdings ein Objektinspektor geöffnet, mit dem Sie den Ergebniswert untersuchen können.</p>
+
+<p>Wenn Sie beispielsweise diesen Quelltext eingeben:</p>
+
+<pre>window
+</pre>
+
+<p>und dann „Untersuchen“ wählen, öffnet sich der Objektinspektor und zeigt in etwa folgendes :</p>
+
+<p><img alt="German Scratchpad inspection screenshot" src="https://mdn.mozillademos.org/files/7353/scratchpad-inspect-de.png" style="height: 289px; width: 678px;"></p>
+
+<p> </p>
+
+<h4 id="Anzeigen">Anzeigen</h4>
+
+<p>Die Option „Anzeigen“ führt den gewählen Quelltext aus und fügt das Ergebnis direkt als Kommentar in das Editor-Fenster Ihrer JavaScript-Umgebung ein. Dies ist ein bequemer Weg, um während Ihrer Arbeit ein fortlaufendes Protokoll Ihrer Testergebnisse zu erstellen. Zur Not können Sie dies auch als Taschenrechner verwenden, aber wenn Sie schon keinen Taschenrechnerprogramm haben, haben Sie vielleicht größere Probleme.</p>
+
+<h4 id="Neu_laden_und_ausführen">Neu laden und ausführen</h4>
+
+<p>Die Option „Neu laden und ausführen“ lädt erst die Seite neu und fürt dann den Quelltext aus, wenn das „load“-Ereignis der Seite ausgelöst wird. Dies ist hilfreich, wenn der Quelltext in einer sauberen Umgebung ausgeführt werden soll.</p>
+
+<h2 id="Wann_ist_es_sinnvoll_Scratchpad_zu_benutzen">Wann ist es sinnvoll, Scratchpad zu benutzen?</h2>
+
+<p>Es gibt viele Möglichkeiten, die JavaScript-Umgebung sinnvoll einzusetzen. In diesem Abschnitt finden Sie einige davon.</p>
+
+<h3 id="Testen_von_neuem_Quelltext">Testen von neuem Quelltext</h3>
+
+<p>Die JavaScript-Umgebung ist besonders nützlich, um neuen Quelltext in einer laufenden Browser-Umgebung zu testen; Sie können den Quelltext, den Sie debuggen, in die JavaScript-Umgebung kopieren, ihn ausführen und dann anpassen, bis er funktioniert. Sobald er funktioniert, kopieren Sie ihn wieder in die Hauptdatei Ihres Quelltexts und schon sind Sie fertig. Oftmals können Sie Ihren Quelltext schreiben, debuggen und testen, ohne jemals die Seite laden zu müssen.</p>
+
+<h3 id="Wiederverwendbare_Quelltext-Ausschnitte">Wiederverwendbare Quelltext-Ausschnitte</h3>
+
+<p>Die Menüleiste der JavaScript-Umgebung bietet Befehle zum Speichern und Laden von JavaScript-Quelltext. Dies kann genutzt werden, um Teile von JavaScript-Quelltext aufzubewahren, den Sie häufig verwenden. Wenn Sie beispielsweise an einer Website arbeiten, die Daten mit AJAX-Anfragen lädt, können Sie Ausschnitte aufbewahren, die diese Ladeoperationen ausführen, um die Daten zu testen oder zu verifizieren. Ebenso können Sie hilfreiche allgemeine Debugging-Funktionen aufbewahren, wie solche, die bestimmte Arten von Informationen über das DOM liefern.</p>
+
+<h2 id="Umgebung_der_JavaScript-Umgebung">Umgebung der JavaScript-Umgebung</h2>
+
+<p>Quelltext, den Sie in der JavaScript-Umgebung ausführen, wird in der globalen Umgebung des zum Zeitpunkt der Ausführung gewählten Tabs ausgeführt. Variablen, die Sie außerhalb einer Funktion deklarieren, werden dem globalen Objekt für diesen Tab hinzugefügt.</p>
+
+<h2 id="Verwenden_der_JavaScript-Umgebung_zum_Zugriff_auf_Firefox-interne_Funktionen">Verwenden der JavaScript-Umgebung zum Zugriff auf Firefox-interne Funktionen</h2>
+
+<p>Wenn Sie an Firefox selbst arbeiten oder Add-ons entwickeln, finden Sie es möglicherweise hilfreich, über die JavaScript-Umgebung auf alle internen Funktionen des Browsers zuzugreifen. Um dies zu tun, müssen Sie in <code>about:config</code> die Einstellung <code>devtools.chrome.enabled</code> auf <code>true</code> setzen. Sobald dies geschehen ist, hat das Menü der Umgebung eine Option „Browser“; sobald Sie diese aktiviert haben, ist Ihre Umgebung nicht mehr nur der Inhalt der Seite, sondern der gesamte Browser.</p>
+
+<h2 id="Tastaturkürzel">Tastaturkürzel</h2>
+
+<p>{{ Page ("de/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
+
+<h3 id="Tastaturkürzel_des_Quelltext-Editors">Tastaturkürzel des Quelltext-Editors</h3>
+
+<p>{{ Page ("de/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
diff --git a/files/de/tools/seiten_inspektor/index.html b/files/de/tools/seiten_inspektor/index.html
new file mode 100644
index 0000000000..f44fe105ce
--- /dev/null
+++ b/files/de/tools/seiten_inspektor/index.html
@@ -0,0 +1,109 @@
+---
+title: Seiteninspektor
+slug: Tools/Seiten_Inspektor
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10") }}</p>
+
+<p>Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.</p>
+
+<h2 id="Den_Inspektor_öffnen"><a name="den-inspektor-oeffnen">Den Inspektor öffnen</a></h2>
+
+<p>Es gibt verschiedene Wege, den Inspektor zu öffnen:</p>
+
+<ul>
+ <li>Wählen Sie die "Inspektor"-Option des "Web Entwickler"-Menüs (die beim Mac ein Untermenü von "Tools"/"Werkzeuge" ist),</li>
+ <li>Drücken Sie Strg-Umschalt-C (Cmd-Option-C auf dem Mac OSX und in Linux).</li>
+ <li>Klicken Sie mit der rechten Maustaste auf ein Element in einer Webseite und wählen Sie "Element untersuchen"</li>
+</ul>
+
+<p>Der Inspektor erscheint in der Werkzeuge-Box am unteren Rand des Browser-Fensters.</p>
+
+<p>Wenn Sie den Inspektor durch "Element untersuchen" aufgerufen haben, ist das gewählte Element bereits im Inspektor ausgewählt und er verhält sich, wie im Abschnitt "<a href="#ein-element-auswaehlen">Ein Element auswählen</a>" beschrieben.</p>
+
+<p>Andernfalls wird das Element unter Ihrem Mauszeiger mit einem gestrichelten Rahmen und einer Notiz mit dem Namen des HTML-Elements angezeigt. Wenn Sie die Maus über die Webseite bewegen, ändert sich das hervorgehobene Element. Gleichzeitig wird seine HTML-Defintion im Kontext der Seite linken Bereich des Inspektors angezeigt. Ab Firefox 30 werden ebenfalls Rasterlinien für das Element und sein Box-Modell dargestellt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7571/inspector-opening-de.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 929px;">Wenn Sie auf ein Element klicken, wird es ausgewählt und der Inspektor verhält sich, wie im Abschnitt "<a href="#ein-element-auswaehlen">Ein Element auswählen</a>" beschrieben.</p>
+
+<h2 id="Ein_Element_auswählen"><a name="ein-element-auswaehlen">Ein Element auswählen</a></h2>
+
+<p>Wenn ein Element ausgewählt ist, wird seine HTML-Definition im HTML-Abschntt im linken Teil und die Stil-Information im rechten CSS-Abschnitt des Inspektors angezeigt.<img alt="" src="https://mdn.mozillademos.org/files/7601/inspector-selected-annotated-de.png">Das Verhalten beim Auswählen von Elementen hat sich in Firefox 29 grundlegend geändert. Ab Firefox 30 zeigt der Inspektor das Box-Modell von Elementen in der Webseite.</p>
+
+<h3 id="Vor_Firefox_29">Vor Firefox 29</h3>
+
+<p>Sobald Sie ein Element durch Klicken auf der Webseite auswählen, wird die Anzeige im Inspektor auf dieses Element fest gelegt, das heißt, Sie können die Maus über die Seite bewegen ohne dass der Inspektor zu einem anderen Element wechselt.</p>
+
+<p>In der Notiz des Elements erscheint auf der linken und der rechten Seite eine Schaltfläche. Die Schaltfläche auf der linken Seite hebt die Festlegung auf das Element auf, so dass Sie neue Elemente auswählen können. Die Schaltfläche auf der rechten Seite öffnet ein <a href="#das-element-kontext-menue">Kontextmenü</a> für das Element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7577/inspector-element-annotation-de.png" style="height: 167px; width: 389px;"></p>
+
+<h3 id="Firefox_29">Firefox 29</h3>
+
+<p>In Firefox 29 wird der gestrichelte Rahmen um ein Element in der Seite sowie die Notiz nicht mehr angezeigt, wenn ein Element ausgewählt wird. Der Inspektor ist auch nicht mehr auf das ausgewählte Element festelegt: Wenn Sie die Maus im HTML-Teil des Inspektors bewegen, wird das entsprechende Element auf der Webseite hervorgehoben. Um ein anderes Element auf der Webseite auszuwählen, klicken Sie auf die Schaltfläche "Ein Element der Seite auswählen" in der <a href="/de/docs/Tools/Tools_Toolbox#Toolbar">Werkzeugleiste der Werkzeuge-Box</a>:</p>
+
+<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
+
+<h3 id="Firefox_30_und_neuer">Firefox 30 und neuer</h3>
+
+<p>In Firefox 30 und neueren Version ist das Verhalten identisch zu Firefox 29, zusätzlich zeigt der Inspektor das Box-Modell und Rastlinien für das ausgewählte Element auf der Webseite.</p>
+
+<p>{{EmbedYouTube("X1aGlwmUF94")}}</p>
+
+<h2 id="Das_Element-Kontext-Menü"><a name="das-element-kontext-menue">Das Element-Kontext-Menü</a></h2>
+
+<p>Sie können eine Reihe von üblichen Aufgaben mit Hilfe des Kontext-Menüs erledigen. Um das Kontext-Menü zu öffnen, klicken Sie mit der rechten Maustaste auf ein Element im &lt;HTML-Bereich&gt; des Inspektors.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7579/inspector-popup-de.png" style="height: 308px; width: 540px;"></p>
+
+<p>Das Kontext-Menü bietet Ihnen folgende Möglichkeiten:</p>
+
+<ul>
+ <li><a href="#html-bearbeiten">Editieren der HTML-Struktur</a> des Elements</li>
+ <li>Kopieren des inneren oder äußeren HTML</li>
+ <li>Kopieren des eindeutigen Selektors (id) des Elements</li>
+ <li><a href="#grafik-als-data-uri-kopieren">Kopieren einer Grafik als Data-URI</a></li>
+ <li>Löschen des Elements</li>
+ <li>Setzen der CSS-Pseudo-Klassen <a href="/de/docs/Web/CSS/:hover">:hover</a>, <a href="/de/docs/Web/CSS/:focus">:focus</a> und <a href="/de/docs/Web/CSS/:active">:active</a></li>
+</ul>
+
+<h3 id="Grafik_als_Data-URI_kopieren"><a name="grafik-als-data-uri-kopieren">Grafik als Data-URI kopieren</a></h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu in Firefox 29.</p>
+</div>
+
+<p>In Firefox 29 und neuer enthält das Kontext-Menü einen Eintrag, der das ausgewählte Bild als Data-URI in die Zwischenablage kopiert.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7581/inspector-copyasdatauri-de.png" style="height: 282px; width: 529px;"></p>
+
+<h3 id="HTML_bearbeiten"><a name="html-bearbeiten">HTML bearbeiten</a></h3>
+
+<p>Um das äußere HTML eines Elements zu bearbeiten, klicken Sie im Kontext-Menü auf "HTML bearbeiten". Es erscheint ein Textfeld im HTML-Bereich:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="height: 269px; width: 540px;"></p>
+
+<p>Sie können hier HTML beliebig bearbeiten: Ändern des Element-Elements, Ändern von Element-Eigenschaften oder Hinzufügen von neuen. Sobald sie außerhalb des Textfeldes klicken werden die Änderungen wirksam.</p>
+
+<h2 id="HTML-Bereich"><a name="html-bereich">HTML-Bereich</a></h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7605/inspector-html-toolbar-annotated-de.png" style="height: 422px; width: 913px;"></p>
+
+<p>Der HTML-Bereich zeigt das HTML der Webseite als Baum mit zusammenklappbaren Knoten. Das ausgewählte Element wird durch einen grauen Hintergrund hervorgehoben.</p>
+
+<p>Sie können das HTML – Elemente, Attribute und Inhalt – in diesem Bereich direkt editieren: Klicken Sie doppelt auf das Element, nehmen Sie die gewünschten Änderungen vor und drücken Sie anschließend "Enter", um die Änderungen sofort anzuwenden.</p>
+
+<p>Wenn Sie mit der rechten Maustaste auf ein Element klicken, erscheint das <a href="#das-element-kontext-menue">Element-Kontext-Menü</a>.</p>
+
+<h3 id="HTML-Bereich_Werkzeugleiste">HTML-Bereich Werkzeugleiste</h3>
+
+<p>Über dem HTML-Bereich befindet sich eine Werkzeugleiste, bestehend aus drei Teilen:</p>
+
+<div class="geckoVersionNote">
+<p>In Firefox 29 und neuer wurde die Schaltfläche "Ein Element der Seite auswählen" in die <a href="/de/docs/Tools_Toolbox#Toolbar">Werkzeuge-Box</a> verschoben.</p>
+</div>
+
+<p><em>Ein Element der Seite auswählen</em>: Wenn Sie diese Schaltfläche anklicken können Sie ein Element auf der Webseite auswählen.<br>
+ HTML-Brotkrümelnavigation: Sie zeigt die komplette Hierarchie im aktuellen Zweig des ausgewählten Elements. Klicken und halten Sie auf ein Element in dieser Leiste, um ein Kontextmenü zu öffnen, in dem sie ein Geschwisterelement des ausgewählten Eintrags auswählen können. Klicken sie auf die Pfeile am Anfang und Ende der Leiste, um seitlich zu scrollen, falls sie größer als der zur Verfügung stehende Platz sein sollte.<br>
+ <span class="author-g-29jbfyyo329p4e97">HTML-Element-Suche</span>:</p>
+
+<p> </p>
diff --git a/files/de/tools/seiten_inspektor/tastenkombinationen/index.html b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html
new file mode 100644
index 0000000000..a77ee75e45
--- /dev/null
+++ b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html
@@ -0,0 +1,12 @@
+---
+title: Tastenkombinationen
+slug: Tools/Seiten_Inspektor/Tastenkombinationen
+translation_of: Tools/Page_Inspector/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="Global_shortcuts">Global shortcuts</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/de/tools/shader-editor/index.html b/files/de/tools/shader-editor/index.html
new file mode 100644
index 0000000000..baf56c7597
--- /dev/null
+++ b/files/de/tools/shader-editor/index.html
@@ -0,0 +1,57 @@
+---
+title: Shader Editor
+slug: Tools/Shader-Editor
+translation_of: Tools/Shader_Editor
+---
+<div>{{ToolsSidebar}}</div><p>Der Shader Editor ermöglicht es, Vertex- and Fragment-Shader unter Verwendung von <a href="/en-US/docs/Web/WebGL">WebGL</a> zu editieren.</p>
+
+<p>{{EmbedYouTube("-pEZXNuFFWI")}}</p>
+
+<p>WebGL ist eine JavaScript API um 3D und 2D Grafiken ohne zusätzliche PlugIns im Browser zu rendern. WebGL verfügt 2 Programme ("shader") auf der betreffenden Ebene der <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL rendering pipeline</a> arbeiten:  ein <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, der die Koordinaten für jeden Vertex liefert und den <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a>, der Farbwerte jedes einzelnen pixels liefert, der gezeichnet werden soll.<br>
+ <br>
+ Diese Programme ("Shader") wurden in der OpenGL Shading Language, or <a href="https://www.opengl.org/documentation/glsl/">GLSL</a> geschrieben. WebGL kann auf unterschiedliche Arten in Webseiten eingebunden werden: als hardcodierter Text in einem Java Skript Quellcode , als externe Quelldatei über das &lt;script&gt;-Tag oder als Klartext direkt vom Server abgerufen werden.Der auf der Webseite enthaltene Java Script code wird mittels einer WebGL API direkt auf der GPU des jeweiligen Gerät (Device) ausgeführt.</p>
+
+<p>Mit dem Shader-Editor kann der Quellcode von Vertex- und Fragment-Shadern untersucht und bearbeiten werden.</p>
+
+<p>Hier ein weiterer Screencast, der zeigt wie der Schader-Editor für complexe Applikationen genutzt werden kann (in diesem Fall, der <a href="http://www.unrealengine.com/html5/">Unreal Engine</a> Demo):</p>
+
+<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
+
+<h2 id="Öffnen_des_Shader-Editors">Öffnen des Shader-Editors</h2>
+
+<p>Standartmäßig ist der Shader-Editor deaktiviert. Dieser kann in den <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a> unter "Default Firefox Developer Tools" aktiviert werden.  Der Shader Editor ist nun in der Toolbar verfügbar und kann mittels Mausklick auf Shader-Editor geöffnet werden.<br>
+ <br>
+ Zunächst erscheint ein leeres Fenster mit einem RELOAD-Button um die Seite neu zu laden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Der RELOAD der Seite erzeugt einen WebGL Kontext der das Programm lädt.<br>
+ Der folgende Screenshot zeigt eine Demo der <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>
+
+<p>Das Fenster ist in drei Bereiche unterteilt: links eine Auflistung der GLSL Programme, in der Mitte der Vertex-Shader mit dem aktuell selektierten Programm und der Fragment-Shader des aktuell selektierten Programms im rechten Fenster.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Programme_verwalten">Programme verwalten</h2>
+
+<p>Im linken Fenster werden die aktuellen Programme des WebGL-Kontext aufgelistet. Fährt man mit dem Cursor über einen der Listeneinträge, wird die betreffende Geometrie in rot hervor gehoben:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Mit einen Mausklick auf das Auge-Icon links der Programmeinträge, wird das betreffende Programm deaktiviert. Das ist praktisch bei Fokussierung eines bestimmten Shaders oder zum auffinden überlappender Geometrien:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">Durch Anklicken eines Programmeintrags erscheint dessen Vertex- und Fragment Shader in den beiden angrenzenden Fenstern und kann bearbeitet werden.</p>
+
+<h2 id="Shader_bearbeiten">Shader bearbeiten</h2>
+
+<p>Das mittlere und rechte Fenster zeigen den Vertex- und den Fragment-Shader des aktuell ausgewählten Programms.<br>
+ <br>
+ Sie können die Programme bearbeiten und die Ergebnisse ansehen nachdem der WebGL Kontext neu gezeichnet hat (beispielsweise im nächsten Animations-Frame). Zum Beispiel nach dem modifizieren der Farbwerte:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">Der Editor markiert ("highlighted") Fehler im Quellcode:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn Sie die X-Icons neben den Zeilen mit der Maus überfahren ("hovern") werden Ihnen detailierte Informationen zum jeweiligen Problem angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/tools/storage_inspector/cache_storage/index.html b/files/de/tools/storage_inspector/cache_storage/index.html
new file mode 100644
index 0000000000..b8411a08dd
--- /dev/null
+++ b/files/de/tools/storage_inspector/cache_storage/index.html
@@ -0,0 +1,15 @@
+---
+title: Cache Storage
+slug: Tools/Storage_Inspector/Cache_Storage
+translation_of: Tools/Storage_Inspector/Cache_Storage
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Under the <em>Cache Storage</em> type within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p>
+
+<ul>
+ <li>the URL for the resource.</li>
+ <li>the status code for the request that was made to fetch it.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16810/cache_storage_detail.png" style="border: 1px solid black; display: block; height: 251px; margin-left: auto; margin-right: auto; width: 926px;"></p>
diff --git a/files/de/tools/storage_inspector/cookies/index.html b/files/de/tools/storage_inspector/cookies/index.html
new file mode 100644
index 0000000000..9ed14c7fd6
--- /dev/null
+++ b/files/de/tools/storage_inspector/cookies/index.html
@@ -0,0 +1,43 @@
+---
+title: Cookies
+slug: Tools/Storage_Inspector/Cookies
+translation_of: Tools/Storage_Inspector/Cookies
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>Wenn Sie im Speicherbaum eine Herkunft innerhalb des Cookie-Speichertyps auswählen, werden alle für diese Herkunft vorhandenen Cookies in einer Tabelle aufgelistet. Die Cookie-Tabelle enthält die folgenden Spalten:</p>
+
+<ul>
+ <li><em>Name</em> — Der Name des Cookies.</li>
+ <li><em>Value</em> — Der Wert des Cookies.</li>
+ <li><em>Domain</em> — Die Domain des Cookies.</li>
+ <li><em>Path</em> — Die Pfadeigenschaft des Cookies.</li>
+ <li><em>Expires / Max-Age</em> — Die Zeit, zu der der Cookie abläuft. Wenn es sich bei dem Cookie um ein Sitzungscookie handelt, lautet der Wert dieser Spalte "Sitzung".</li>
+ <li><em>Size</em> — Die Größe des Cookienamens plus Wert in Bytes.</li>
+ <li><em>HttpOnly</em> — Ist dieser Cookie nur HTTP?</li>
+ <li><em>Secure</em> — Ist dieser Cookie ein sicherer Cookie?</li>
+ <li><em>SameSite</em> — Ist dieses Cookie auf derselben Seite? Mit Cookies auf derselben Seite können Server das Risiko von CSRF- und Informationsleckangriffen verringern, indem sie behaupten, dass ein bestimmter Cookie nur mit Anforderung gesendet werden soll, die von derselben registrierbaren Domain initiiert wurden.</li>
+ <li><em>Last accessed</em> — Datum und Uhrzeit des letzten Lesens des Cookies.</li>
+ <li><em>Created</em> — Datum und Uhrzeit der Erstellung des Cookies.</li>
+ <li><em>HostOnly</em> — Ist dieser Cookie ein Domaincookie? Das heißt, der Domain-Wert stimmt genau mit der Domain der aktuellen Website überein.</li>
+</ul>
+
+<div class="note">
+<p>Hinweis: Einige der Spalten werden standardmäßig nicht angezeigt. Um die Spaltenanzeige zu ändern, klicken Sie mit der rechten Maustaste auf die vorhandenen Tabellenüberschriften und verwenden Sie das resultierende Kontextmenü, um die Spalten anzuzeigen / auszublenden.</p>
+</div>
+
+<p>Sie können Cookies bearbeiten, indem Sie auf Zellen im Tabellen-Widget doppelklicken und die darin enthaltenen Werte bearbeiten. Fügen Sie neue Cookies hinzu, indem Sie auf die Schaltfläche "Plus" (+) klicken und dann die resultierende neue Zeile auf den gewünschten Wert bearbeiten.</p>
+
+<h3 id="Kontextmenü">Kontextmenü</h3>
+
+<p>Das Kontextmenü für jeden Cookie beinhaltet die folgenden Befehle:</p>
+
+<ul>
+ <li><em>Add item</em> - füge einen neuen Cookie hinzu.</li>
+ <li><em>Delete &lt;cookie name&gt;.&lt;domain&gt;</em> - löscht den ausgewählten Cookie</li>
+ <li><em>Delete All From &lt;domain&gt;</em> - löscht alle Cookies von der ausgewählten Domain. Dies muss genau übereinstimmer. Zum Beispiel, wenn sie "Delete All From test8.example.com" auswählen, werden nur Cookies von dieser Domain gelöscht. Cookies von "test13.example.com" werden nicht gelöscht.</li>
+ <li><em>Delete All</em> - löscht alle Cookies für den aktuellen Host.</li>
+ <li><em>Delete All Session Cookies</em> - löscht alle Cookies für den aktuellen Host, die beim Schließen des Browsers gelöscht werden sollen.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16811/cookie_table_widget_context.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 924px;"></p>
diff --git a/files/de/tools/storage_inspector/index.html b/files/de/tools/storage_inspector/index.html
new file mode 100644
index 0000000000..475f4c28d2
--- /dev/null
+++ b/files/de/tools/storage_inspector/index.html
@@ -0,0 +1,200 @@
+---
+title: Storage Inspector
+slug: Tools/Storage_Inspector
+tags:
+ - Entwicklerwerkzeug
+ - Sessionspeicher
+ - Speicher
+ - Werkzeuge
+ - lokaler Speicher
+translation_of: Tools/Storage_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Der Web-Speicher-Inspektor ermöglicht dir die Einsicht der verschiedenen Speicher-Typen, welche Websites zur Nutzung zur verfügung stehen. Zur Zeit besteht die Möglichkeit des auslesens folgender Speicher-Typen:</p>
+
+<ul>
+ <li><em>Cache Speicher</em>— sämtliche DOM caches die über die <a href="/en-US/docs/Web/API/Cache">Cache API </a>erzeugt wurden.</li>
+ <li><em>Cookies (Kekse)</em> — Sämtliche <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> welche von der Website selbst, oder von in ihr eigebetteten iFrames erzeugt wurden. Cookies die Bestandteil der Antworten auf Netzwerkanfragen sind, werden dann aufgelistet, wenn sie bei geöffnetem Web-Speicher erzeugt wurden oder darauf zugegriffen wird.</li>
+ <li><em>IndexedDB</em> — Von allen <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> (indizierte Datenbanken) die von der einer Seite oder in ihr eingebetteteten iFrames erzeugt wurden, können die Objekt-Speicher ausgelesen und ihre Inhalte aufgelistet werden</li>
+ <li><em>Local Storage</em> — Alle Einzelpositionen, der von der Web-Seite oder in ihr eigebetteteten Iframes erzeugten <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> (lokalen Speicher) sind einsehbar.</li>
+ <li><em>Session Storage </em> — Alle Inhalte im <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> die von der aktuellen Web-Site und der in ihr eingebetteten iFrames erzeugt wurden oder werden, können betrachtet werden.</li>
+</ul>
+
+<p>Vorerst ermöglicht der Web-Speicher-Inspektor nur Lesezugriff auf die einzelnen Speicher-Typen. Aber wir arbeiten daran in einer zukünftigen Version auch den Schreibzugriff zu ermöglichen, damit es möglich wird, die einzelnen Speicher Inhalte auch zu verändern.</p>
+
+<h2 id="Den_Web-Speicher-Inspektor_öffnen">Den Web-Speicher-Inspektor öffnen</h2>
+
+<p>Du kannst den Web-Speicher-Inspektor durch Auswählen von "Web-Speicher-Inspektor" im Entwickler-Untermenü im Firefox Hauptmenü (oder im Web-Entwickler-Menü, wenn die Menü-Zeile angezeigt wird oder bei Mac OS X) oder durch Drücken von Shift + F9 auf der Tastatur.</p>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">Entwickler-Box</a> wird am Fuß des Browser-Fensters erscheinen, mit dem Web-Speicher-Inspektor aktiviert. In der Box heißt er nur "Web-Speicher".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p>
+
+<h2 id="Web-Speicher-Inspektor_Benutzeroberfläche">Web-Speicher-Inspektor Benutzeroberfläche</h2>
+
+<p>Die Web-Speicher-Inspektor-Benutzeroberfläche ist in drei Hauptkomponenten unterteilt:</p>
+
+<ul>
+ <li><a href="#Speicherbaum">Speicherbaum</a></li>
+ <li><a href="#tabellenuebersicht">Tabellarische Übersicht</a></li>
+ <li><a href="#sidebar">Sidebar</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p>
+
+<h3 id="Speicherbaum_2"><a id="Speicherbaum" name="Speicherbaum">Speicherbaum</a></h3>
+
+<p>Der Speicherbaum zeigt alle Speichertypen, die der Web-Speicher-Inspektor anzeigen kann:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p>
+
+<p>Unter jedem Type werden die Objekte nach ihrer Herkunft organisiert. <span class="tlid-translation translation" lang="de"><span title="">Bei Cookies unterscheidet das Protokoll nicht die Herkunft</span></span>. Für Indexed DB oder lokalen Speicher ist die Herkunft eine Kombination aus Protokoll und Hostnamen. Zum Beisiel sind "http://mozilla.org" und "https://mozilla.org" zwei verschiedene Herkünfte, somit kann lokaler speicher nicht zwischen ihnen ausgetauscht werden.</p>
+
+<p>Unter "Cache-Speicher" sind die Objekte erst nach Herkunft und dann nach Name des Caches gespeichert:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>IndexedDB sind nach Herkunft, dann nach Datenbank-Name und dann nach Objekt-Speicher-Name abgelegt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>Bei Cookies, lokalem Speicher und Sitzungs-Speicher gibt es nur eine Hierarchie-Ebene also sind die Objekte direkt unter der Herkunft aufgelistet:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>Du kannst auf jeden Eintrag klicken, um die Untereinträge auf- oder zuzuklappen.</p>
+
+<p>Klicken auf einen Untereintrag stellt detaillierte Informationen in der tabellarischen Ansicht rechts davon dar.Zum Beispiel führt das Klicken auf einen Eintrag im Cookies-Abschnitt dazu, dass alle Cookies von der ausgewählten Domain gezeigt werden.</p>
+
+<h3 id="Tabellarische_Übersicht"><a id="tabellenuebersicht" name="tabellenuebersicht">Tabellarische Übersicht</a></h3>
+
+<p>Die tabellarische Übersicht ist der Platz, wo alle Einträge entsprechend zu dem gewählten Eintrag aufgelistet werden (egal ob Herkunft oder Datenbank).</p>
+
+<p>Alle Spalten in der tabellarischen Übersicht sind skalierbar. Du kannst Spalten zeigen oder verstecken durch Klicken auf den Tabellenkopf und Auswählen welche Spalten du sehen möchtest:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="Suche">Suche</h3>
+
+<p>Es gibt eine Suchzeile am Kopf der tabellarischen Übersicht:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p>
+
+<p>Diese filtert die Tabelle damit nur noch Einträge die den Suchbegriff enthalten angezeigt werden. Einträge passen zum Suchbegriff, wenn in einem beliebigen Feld (auch den ausgeblendeten) der Begriff enthalten ist.</p>
+
+<p>Ab Firefox 50 aufwärts kann man  <kbd>Strg</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> beim Mac) drücken, um in die Suchbox zu springen.</p>
+
+<h3 id="Hinzufügen_und_aktualisieren_des_Speichers">Hinzufügen und aktualisieren des Speichers</h3>
+
+<p>Bei neueren Versionen des Firefox hast du Knöpfe verfügbar, um die aktuelle Ansicht des betrachteten Speichers zu aktualisieren und wo möglich einen eigenen Eintrag hinzuzufügen (du kannst bei IndexedDB oder Cache keine eigenen Einträge vornehmen):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15812/add-refresh-storage.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3>
+
+<p>Wenn du eine Reihe in der Tabelle auswählst, werden in der Sidebar Details über diese Zeile angezeigt. Wenn ein Cookie ausgewählt wird, werden alle Details dieses Cookies angezeigt.</p>
+
+<p>Die Sidebar kann den Wert eines Cookies, lokalen Speicherobjekts oder eines Indexed DB Eintrags parsen und in einen aussagekräftiges Objekt erzeugen anstatt nur eines Strings. Zum Beispiel:</p>
+
+<ul>
+ <li>Ein stringifizierter JSON wie <code>'{"foo": "bar"}'</code> wird angezeigt wie das Original-JSON: <code>{foo: "bar"}</code>.</li>
+ <li>Ein schlüsselseparierter String, wie <code>"1~2~3~4"</code> oder <code>"1=2=3=4"</code>, wird wie ein Array angezeigt: <code>[1, 2, 3, 4]</code>.</li>
+ <li>Ein String mit Wertpaaren, wie <code>"ID=1234:foo=bar"</code> wird wie JSON angezeigt: <code>{ID:1234, foo: "bar"}</code>.</li>
+</ul>
+
+<p>Die gezeigten Werte können mit Hilfe des Suchfeldes im Kopf der Sidebar gefiltert werden.</p>
+
+<h2 id="Cache_Speicher">Cache Speicher</h2>
+
+<p>Unter dem Eintrag "Cache Storage" kannst du den Inhalt jedes DOM Caches sehen, der unter Verwendung von <a href="/en-US/docs/Web/API/Cache">Cache API</a> erzeugt wurde. Wenn du einen Cache auswählst, siehst du eine Liste der Einträge die er enthält. Für jeden Eintrag siehst du:</p>
+
+<ul>
+ <li>die URL des Eintrags</li>
+ <li>den Status Code für den Aufruf der für den Abruf der Daten gemacht wurde.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h2 id="Cookies_Kekse_-">Cookies (Kekse ;-)</h2>
+
+<p>Wenn du eine Herkunft aus dem "Cookie Storage" Eintrag im Speicherbaum auswählst, werden alle Cookies die für diese Herkunft gespeichert sind im Tabellen-Fenster angezeigt. Die Cookies-Tabelle hat folgende Spalten:</p>
+
+<ul>
+ <li><em>Name</em> — Der Name des Cookies</li>
+ <li><em>Pfad</em>— Der Pfad-Eintrag des Cookies</li>
+ <li><em>Domain</em> — Die Domäne des Cookies</li>
+ <li><em>Läuft ab am</em> — Die Zeit wann der Cookie üngültig wird. Wenn es ein Session-Cookie ist, ist der Inhalt "Session"</li>
+ <li><em>Zuletzt zugegriffen</em> — Wann der Cookie zuletzt gelesen wurde</li>
+ <li>Erstellt — Wann der Cookie erstellt wurde</li>
+ <li><em>Wert</em> — Der Inhalt des Cookies</li>
+ <li><em>HostOnly</em> — Ist dies ein Domain-Cookie: wenn ja, beginnt der Eintrag "domain" mit "."</li>
+ <li><em>Secure </em>— Ist es ein sicherer Cookie</li>
+ <li><em>HttpOnly</em> — Ist dieser Cookie nur für HTTP</li>
+ <li><em>sameSite</em> — Ist es ein Dieselbe-Site-Cookie? "Same-site cookies" erlauben Servern das Risiko von CSRF und Informations-Leck-Attacken zu verringern, wenn Sie sicherstellen, dass bestimmte Cookies nur gesendet werden, wenn die Anfrage von derselben registrierten Domain erfolgt.</li>
+</ul>
+
+<div class="note">
+<p><strong>Bitte beachten</strong>: Einige Spalten werden standardmäßig nicht gezeigt — um die Spaltendarstellung zu ändern, Rechts/<kbd>Ctrl</kbd>-Klick auf den angezeigten Tabellenkopf und das erscheinende Menü benutzen, um die Spalten ein- und auszuschalten.</p>
+</div>
+
+<p>Du kann die Cookies editieren, wenn du in der <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Tabellen-Ansicht</a> doppelklickst und die angezeigten Werte veränderst. Neue Cookies können mit dem "Plus" (+) Knopf und dem Editieren der erscheinenden neuen Zeile erstellt werden.</p>
+
+<p>Du kannst außerdem Cookies löschen, indem du das Menü in jeder Zeile benutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h2 id="Local_storage_Session_storage">Local storage / Session storage</h2>
+
+<p>Wenn ein Eintrag aus dem local Storage oder dem session storage ausgewählt wird, zeigt die Tabelle alle Einträge, die mit der entsprechenden Session und local oder session storage zu tun haben.</p>
+
+<p>Du kannst die Einträge im local und session storage bearbeiten, wenn du in die entsprechende Zelle im <a href="/de/docs/Tools/Storage_Inspector#Tabellarische_%C3%9Cbersicht">Tabellen-Widget</a> doppelklickst und die Werte editierst:</p>
+
+<p>{{EmbedYouTube("UKLgBBUi11c")}}</p>
+
+<p>Außerdem kannst die local und session storage Einträge mit Hilfe des Kontext-Menüs löschen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Schließlich kannst du auch Einträge durch drücken des "Plus" (+) Knopfes hinzufügen und dann die erzeugte Zeile mit Wunschwerten füllen.</p>
+
+<h2 id="IndexedDB">IndexedDB</h2>
+
+<p>Wenn du einen Ursprung innerhalb des Speichertyps IndexedDB in der Speicherstruktur auswählst, werden in der Tabelle die Details aller für diesen Ursprung vorhandenen Datenbanken aufgelistet.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis</strong>: <span class="tlid-translation translation" lang="de"><span title="">Die in einer IndexedDB-Datenbank angezeigten Daten sind eine Momentaufnahme der Daten, wie sie beim Öffnen des Web-Speicher-Werkzeugs vorhanden waren.</span></span></p>
+</div>
+
+<p>Datenbanken haben folgende Details:</p>
+
+<ul>
+ <li><em>Datenbankname</em> — Der Name der Datenbank</li>
+ <li><em>Speicher</em> — Der <a href="/de/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria#Unterschiedliche_Typen_der_Datenspeicherung">Speichertyp</a> spezifiziert für die Datenbank</li>
+ <li><em>Herkunft</em> — Ihre Herkunft</li>
+ <li><em>Version</em> — Die Datenbank-Version</li>
+ <li><em>Speicher-Objekte</em> — Anzahl der gespeicherten Objekte in der Datenbank</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn eine IndexedDB-Datenbank in der Speicherstruktur ausgewählt ist, werden Details zu allen Objektspeichern in der Tabelle aufgelistet.</span> <span title="">Jeder Objektspeicher enthält die folgenden Details:</span></span></p>
+
+<ul>
+ <li><em>Objektspeichername</em> — Der Name des Objektspeichers</li>
+ <li><em>Schlüssel</em> — Der SchlüsselPfad der zum Objektspeicher gehört.</li>
+ <li><em>Auto Increment</em> — Zeigt, ob <em>auto increment</em> aktiviert ist</li>
+ <li><em>Indexes</em> — Liste von Indizes im Objektspeicher wie unten angezeigt</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Wenn ein Objektspeicher in der Speicherstruktur ausgewählt wird, werden alle Einträge in dem Objektspeicher in der Tabelle aufgelistet.</p>
+
+<p>Du kannst eine Indexed DB Datenbank löschen, indem du den Eintrag aus dem Kontextmenü in der Speicherstruktur benutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Wenn eine Datenbank nicht gelöscht werden kann (meistens, weil es noch aktive Verbindungen zur Datenbank gibt), wird eine Warnmeldung im Speicher-Inspektor angezeigt:<img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p>
+
+<p>Du kannst das Kontext-Menü im Tabellen-Editor benutzen, um alle Einträge in einem Objektspeicher zu löschen oder nur einzelne:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p>
diff --git a/files/de/tools/storage_inspector/indexeddb/index.html b/files/de/tools/storage_inspector/indexeddb/index.html
new file mode 100644
index 0000000000..2ede236480
--- /dev/null
+++ b/files/de/tools/storage_inspector/indexeddb/index.html
@@ -0,0 +1,45 @@
+---
+title: IndexedDB
+slug: Tools/Storage_Inspector/IndexedDB
+translation_of: Tools/Storage_Inspector/IndexedDB
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>When you select an origin inside the <em>Indexed DB</em> storage type in the storage tree of the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, a table lists the details of all the databases present for that origin.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.</p>
+</div>
+
+<p>Databases have the following details:</p>
+
+<ul>
+ <li><em>Database Name</em> — The name of the database.</li>
+ <li><em>Storage</em> — The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database.</li>
+ <li><em>Origin</em> — The origin of the database.</li>
+ <li><em>Version</em> — The database version.</li>
+ <li><em>Object Stores</em> — The number of object stores in the database.</li>
+</ul>
+
+<p>When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:</p>
+
+<ul>
+ <li><em>Object Store Name</em> — The name of the object store.</li>
+ <li><em>Key</em> — The {{domxref("IDBIndex.keyPath", "keyPath")}} property of the object store.</li>
+ <li><em>Auto Increment</em> — Is automatic incrementation of the keys enabled?</li>
+ <li><em>Indexes</em> — Array of indexes present in the object store as shown below.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16812/indexed_db_details.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p>
+
+<p>You can delete an IndexedDB database using the context menu in the storage tree:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16813/indexed_db_context_menu.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p>
+
+<p>If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:<img alt="" src="https://mdn.mozillademos.org/files/16815/indexedDB_delete_warning.png" style="border: 1px solid black; display: block; height: 250px; margin: 0px auto; width: 926px;"></p>
+
+<p>You can use the context menu in the table widget to delete all items in an object store, or a particular item:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16814/indexed_db_table_widget_context.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p>
diff --git a/files/de/tools/storage_inspector/local_storage_session_storage/index.html b/files/de/tools/storage_inspector/local_storage_session_storage/index.html
new file mode 100644
index 0000000000..464345892a
--- /dev/null
+++ b/files/de/tools/storage_inspector/local_storage_session_storage/index.html
@@ -0,0 +1,20 @@
+---
+title: Local Storage / Session Storage
+slug: Tools/Storage_Inspector/Local_Storage_Session_Storage
+translation_of: Tools/Storage_Inspector/Local_Storage_Session_Storage
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>When an origin corresponding to local storage or session storage is selected within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, the names and values of all the items corresponding to local storage or session storage will be listed in a table.</p>
+
+<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p>
+
+<p>{{EmbedYouTube("UKLgBBUi11c")}}</p>
+
+<p>You can delete local storage and session storage entries using the context menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16768/delete_storage_menu.png" style="border: 1px solid black; display: block; height: 270px; margin-left: auto; margin-right: auto; width: 914px;"></p>
+
+<p>You can also delete local and session storage entries by selecting an item and pressing the <kbd>Delete</kbd> or <kbd>Backspace</kbd> key.</p>
+
+<p>Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p>
diff --git a/files/de/tools/style_editor/index.html b/files/de/tools/style_editor/index.html
new file mode 100644
index 0000000000..bb39d8f812
--- /dev/null
+++ b/files/de/tools/style_editor/index.html
@@ -0,0 +1,54 @@
+---
+title: Style Editor
+slug: Tools/Style_Editor
+translation_of: Tools/Style_Editor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Die Stilbearbeitung ermöglicht:</p>
+
+<ul>
+ <li>alle Stylesheets einer Seite anzuschauen und zu bearbeiten</li>
+ <li>komplett neue Stylesheets zu erstellen und diese auf eine Seite anzuwenden</li>
+ <li>bestehende Stylesheets zu importieren und auf eine Seite anzuwenden</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+
+
+<p>Um die Stilbearbeitung zu öffnen, wählen Sie die Option "Stilbearbeitung" aus dem Menü "Webentwickler" (ein Untermenü im Menü "Werkzeuge" auf dem Mac). Die <a href="/de/docs/Tools/Tools_Toolbox">Toolbox </a>erscheint am unteren Rand des Browser-Fensters, wobei die Stilbearbeitung aktiviert ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5651/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Links (oder oben, wenn Ihr Fenster sehr schmal ist) befindet sich eine Liste aller vom Dokument verwendeten Stylesheets, und rechts (oder unten, wenn Ihr Fenster sehr schmal ist) ist die Quelle für das Stylesheet, das Sie gerade in diesem Stylesheet-Fenster ausgewählt haben.</p>
+
+<h2 id="Die_Stylesheet-Ansicht">Die Stylesheet-Ansicht</h2>
+
+<p>Die Ansicht der Stylesheets auf der linken Seite listet alle Stylesheets auf, die vom aktuellen Dokument verwendet werden. Sie können die Verwendung eines bestimmten Stylesheets schnell ein- und ausschalten, indem Sie auf das Augesymbol links neben dem Stylsheetnamen klicken. Sie können alle Änderungen, die Sie am Stylesheet vorgenommen haben, auf Ihrem lokalen Computer speichern, indem Sie auf die Schaltfläche "Speichern" in der rechten unteren Ecke jedes Eintrags in der Liste klicken.</p>
+
+<h2 id="Das_Bearbeitungsfenster">Das Bearbeitungsfenster</h2>
+
+<p>Auf der rechten Seite befindet sich das Bearbeitungsfenster. Hier steht Ihnen die Quelle für das ausgewählte Stylesheet zum Lesen und Bearbeiten zur Verfügung. Alle Änderungen, die Sie vornehmen, werden in Echtzeit auf die Seite angewendet. Dadurch ist es wirklich einfach, mit dem Aussehen Ihrer Seite zu experimentieren, sie zu überarbeiten und zu testen. Wenn Sie mit Ihren Änderungen zufrieden sind, können Sie eine Kopie lokal speichern, indem Sie auf die Schaltfläche Speichern am Eintrag des Blattes im Blattfenster klicken.</p>
+
+<p>Der Editor bietet Zeilennummern und Syntaxhervorhebung, um das Lesen Ihres CSS zu erleichtern. Siehe <a href="/en/Tools/Using_the_Source_Editor">Verwendung des Quelltexteditors</a> für die Dokumentation über den Editor selbst, einschließlich nützlicher Tastaturkürzel.</p>
+
+<p>Eine besonders praktische Funktion der Stilbearbeitung: Sie minimiert automatisch die von ihr erkannten Stilvorlagen, ohne das Original zu beeinflussen. Dies erleichtert die Arbeit auf optimierten Seiten erheblich.</p>
+
+<h2 id="Erstellen_und_Importieren_von_Stylesheets">Erstellen und Importieren von Stylesheets</h2>
+
+<p>Sie können ein neues Stylesheet erstellen, indem Sie auf die Schaltfläche Neu in der Symbolleiste klicken. Dann können Sie einfach mit der Eingabe von CSS in den neuen Editor beginnen und beobachten, wie die neuen Stile in Echtzeit angewendet werden, genau wie die Änderungen in den anderen Sheets.</p>
+
+<p>Sie können ein Stylesheet von der Festplatte laden und auf die Seite anwenden, indem Sie auf die Schaltfläche Importieren klicken.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
+ <li><a href="/en/Tools/Page_Inspector/3D_view" title="3D view">3D view</a></li>
+ <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
+ <li><a href="/en/Tools" title="Tools">Tools</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
diff --git a/files/de/tools/web_konsole/hilfe/index.html b/files/de/tools/web_konsole/hilfe/index.html
new file mode 100644
index 0000000000..d8dd2b0241
--- /dev/null
+++ b/files/de/tools/web_konsole/hilfe/index.html
@@ -0,0 +1,65 @@
+---
+title: Konsole Bild
+slug: Tools/Web_Konsole/Hilfe
+tags:
+ - Anfänger
+ - Befehle
+ - Beispiele
+ - Debugging
+ - Deutsch
+ - Firefox
+ - Konsole
+ - Maxi
+ - Übersetzung
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div><h2 id="Die_Befehle">Die Befehle</h2>
+
+<p><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">von der</span> <span class="hps">Web Console</span> <span class="hps">bereitgestellt</span> <span class="hps">JavaScript</span> <span class="hps">Kommandozeile</span> <span class="hps">bietet ein paar</span> <span class="hps">eingebauten</span> <span class="hps">Hilfsfunktionen,</span> <span class="hps">bestimmte Aufgaben</span> <span class="hps">zu erleichtern.</span><br>
+ <br>
+ <strong><span class="hps">$ ()</span></strong><br>
+      <span class="hps">Sucht nach einer</span> <span class="hps">CSS-Selektor</span><span>-String</span><span>, der Rückkehr</span> <span class="hps">auf das erste Element</span><span>, das</span> <span class="hps">passt.</span> <span class="hps">Entspricht</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>document.querySelector</span> <span class="hps">()")</span><span>}}</span> <span class="hps">oder</span> <span class="hps">ruft die</span> <span class="hps">$ -Funktion</span> <span class="hps">in</span> <span class="hps">der Seite</span><span>,</span> <span class="hps">wenn es vorhanden ist</span><span>.</span><br>
+ <strong><span class="atn hps">$$ (</span><span>)</span></strong><br>
+      <span class="hps">Sucht nach einer</span> <span class="hps">CSS-Selektor</span><span>-String</span><span>, der Rückkehr</span> <span class="hps">eine</span> <span class="hps">Liste von DOM</span><span>-Knoten</span> <span class="hps">zusammenpasst.</span> <span class="hps">Dies</span> <span class="hps">ist eine Abkürzung für</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>document.querySelectorAll</span> <span class="hps">()")</span><span>}}</span><span>.</span><br>
+ <strong><span class="hps">$ 0</span></strong><br>
+      <span class="hps">Das aktuell</span> <span class="hps">geprüft</span> <span class="hps">Element in der</span> <span class="hps">Seite</span><span>.</span><br>
+ <strong><span class="hps">$ x</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Wertet</span> <span class="hps">einen XPath-Ausdruck</span> <span class="hps">und</span> <span class="hps">gibt ein Array von</span> <span class="hps">passenden</span> <span class="hps">Knoten.</span><br>
+ <strong><span class="atn hps">keys (</span><span>)</span></strong><br>
+      <span class="hps">Für</span> <span class="hps">ein gegebenes Objekt</span><span> </span><span class="hps">wird eine Liste</span> <span class="hps">der Schlüsseln</span> <span class="hps">(oder</span> <span class="hps">Eigenschaftsnamen</span><span>)</span> <span class="hps">für das Objekt</span><span> angezeigt.</span> <span class="hps">Dies</span> <span class="hps">ist eine Abkürzung für</span> <span class="hps">Object.keys</span><span>.</span><br>
+ <strong><span class="hps">values</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Für</span> <span class="hps">ein gegebenes Objekt</span><span> </span></span>wird<span lang="de"> <span class="hps">eine Liste der</span> <span class="hps">Werte</span> <span class="hps">für das Objekt</span><span> zurückgegeben;</span> <span class="hps">dient als</span> <span class="hps">Ergänzung zu</span> <span class="atn hps">keys (</span><span>)</span><span>.</span><br>
+ <strong><span class="hps">clear ()</span></strong><br>
+      <span class="hps">Löscht den</span> <span class="hps">Ausgabebereich</span><span> der Konsole.</span><br>
+ <strong><span class="hps">inspect</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Da</span> <span class="hps">ein Objekt</span> <span class="hps">öffnet</span> <span class="hps">den Objektinspektor</span> <span class="hps">für das Objekt</span><span>.</span><br>
+ <strong><span class="hps">pprint</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Formatiert</span> <span class="hps">den angegebenen Wert</span> <span class="hps">in lesbarer</span> <span class="hps">Weise</span><span>;</span> <span class="hps">Dies</span> <span class="hps">ist nützlich für die</span> <span class="hps">Dumping</span> <span class="hps">den Inhalt der</span> <span class="hps">Objekte und Arrays</span><span>.</span><br>
+ <strong><span class="hps">help</span><span class="hps">()</span></strong><br>
+      <span class="hps">Zeigt Hilfetext</span> <span class="hps">.</span> <span class="hps">Eigentlich</span> <span class="hps">in einem schönen</span> <span class="hps">Beispiel für</span> <span class="hps">Rekursion</span><span>,</span> <span class="hps">es wird Sie</span> <span class="hps">zu dieser Seite</span> <span class="hps">zu bringen.</span><br>
+ <strong><span class="hps">cd</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Schalten Sie</span> <span class="hps">JavaScript</span> <span class="hps">Auswertung</span> <span class="hps">Kontext</span> <span class="hps">in einen anderen</span> <span class="hps">iframe</span> <span class="hps">auf der Seite</span><span>.</span> <span class="hps">Siehe</span> <span class="hps">Arbeiten mit</span> <span class="hps">eingebetteten Frames anzeigen</span><span>.</span><br>
+ <span class="hps">Bitte beachten Sie die</span> <span class="hps">Konsole</span> <span class="hps">API</span> <span class="hps">für weitere Informationen über</span> <span class="hps">die Anmeldung</span> <span class="hps">von</span> <span class="hps">Inhalten</span><span>.</span><br>
+ <br>
+ <span class="hps">Beispiele</span><br>
+ <span class="hps">Beispiel:</span> <span class="hps">Eine Sicht auf</span> <span class="hps">den Inhalt einer</span> <span class="hps">DOM-Knoten</span><br>
+ <br>
+ <span class="hps">Angenommen, Sie haben</span> <span class="hps">einen</span> <span class="hps">DOM-Knoten</span> <span class="atn hps">mit der ID "</span><span>Titel"</span> <span class="hps">zu haben.</span> <span class="hps">In der Tat,</span> <span class="hps">diese</span> <span class="hps">Seite, die Sie</span> <span class="hps">gerade lesen</span> <span class="hps">muss man</span><span>,</span> <span class="hps">so können Sie</span> <span class="hps">öffnen Sie die</span> <span class="hps">Web-Konsole</span> <span class="hps">und</span> <span class="hps">versuchen Sie diese</span> <span class="hps">jetzt.</span><br>
+ <br>
+ <span class="hps">Werfen wir einen</span> <span class="hps">Blick auf den Inhalt</span> <span class="hps">dieses Knotens</span> <span class="hps">mit der</span> <span class="hps">$ ()</span> <span class="hps">und prüfen</span> <span class="hps">()</span> <span class="hps">Funktionen:</span></span></p>
+
+<pre class="language-html"><code class="language-html">inspect($("#Titel"))</code></pre>
+
+<p><br>
+ <br>
+ <span id="result_box" lang="de"><span class="hps">Es öffnet sich</span> <span class="hps">automatisch das</span> <span class="hps">Objekt-Inspektor</span> <span class="hps">und zeigt Ihnen</span> <span class="hps">den Inhalt des</span> <span class="hps">DOM-Knoten</span><span>, der die</span> <span class="hps">CSS-Selektor</span> <span class="atn hps">"</span><span>#title</span><span>"</span><span>, was natürlich</span> <span class="hps">ist das Element</span> <span class="atn hps">mit der ID "</span><span>Titel"</span> <span class="hps">entspricht.</span><br>
+ <span class="hps">Beispiel</span><span>: Dumping</span> <span class="hps">den Inhalt eines</span> <span class="hps">DOM-Knoten</span><br>
+ <br>
+ <span class="hps">Das ist</span> <span class="hps">schön und gut,</span> <span class="hps">wenn Sie geschehen,</span> <span class="hps">im</span> <span class="hps">Browser</span> <span class="hps">zu sitzen</span> <span class="hps">ein Problem</span> <span class="hps">aufweisen</span><span>, aber</span> <span class="hps">lassen Sie uns sagen</span> <span class="hps">Sie</span> <span class="hps">remote</span> <span class="hps">Debugging</span> <span class="hps">für einen Benutzer</span><span>,</span> <span class="hps">und</span> <span class="hps">müssen</span> <span class="hps">Sie einen Blick auf</span> <span class="hps">den Inhalt</span> <span class="hps">eines Knotens</span><span>.</span> <span class="hps">Sie können Ihre</span> <span class="hps">Benutzer</span> <span class="hps">öffnen Sie die</span> <span class="hps">Web-Konsole</span> <span class="hps">und Dump</span> <span class="hps">den Inhalt der</span> <span class="hps">Knoten</span> <span class="hps">in das Protokoll</span><span>, dann kopieren</span> <span class="hps">und fügen Sie ihn</span> <span class="hps">in eine</span> <span class="hps">E-Mail an</span> <span class="hps">Sie</span><span>,</span> <span class="hps">mit Hilfe der</span> <span class="hps">pprint</span> <span class="hps">() -Funktion</span><span>:</span></span><br>
+  </p>
+
+<pre class="language-html"><code class="language-html">pprint($("#Titel"))</code></pre>
+
+<p> </p>
+
+<p>This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.</p>
diff --git a/files/de/tools/web_konsole/index.html b/files/de/tools/web_konsole/index.html
new file mode 100644
index 0000000000..1616e7c9a7
--- /dev/null
+++ b/files/de/tools/web_konsole/index.html
@@ -0,0 +1,582 @@
+---
+title: Web-Konsole
+slug: Tools/Web_Konsole
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Die Web-Konsole</p>
+
+<ol>
+ <li>zeichnet Informationen auf, die mit einer Webseite verknüpft sind: alle Netzwerkanfragen, JavaScript, CSS und Sicherheitsfehler, sowie Fehler-, Warn- und Informationsmeldungen, die speziell von JavaScript-Code auf einer Seite verursacht werden</li>
+ <li>erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausführen</li>
+</ol>
+
+<p>Es ist ein Ersatz für die alte <a href="/en/Error_Console" title="en/Error Console">Fehlerkonsole</a>, die in Firefox eingebaut war: sie hat Fehler, Warnungen und Nachrichten von allen Internetseiten, vom Browser-Code und Add-ons angezeigt. Das machte es viel schwerer zu sehen, welche Nachrichten zu welcher Internetseite gehören. Die Web-Konsole ist immer mit einer spezifischen Internetseite verknüpft und zeigt Informationen an, die mit dieser Seite zusammenhängen.</p>
+
+<p>Der andere Teil der Fehlerkonsole ist die <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browserkonsole</a>, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.</p>
+
+<p>{{EmbedYouTube("AlYMRAQnkX8")}}</p>
+
+<h2 id="Die_Web-Konsole_öffnen">Die Web-Konsole öffnen</h2>
+
+<p>Um die Web-Konsole zu öffnen, wählen Sie "Web-Konsole" vom Web-Entwickler Untermenü im Firefox-Menü (oder Extras-Menü, wenn Sie die Menüleiste aktiviert haben oder Mac OS X benutzen) aus, oder halten Sie die Tasten Steuerung-Umschalt-K (Befehl-Wahl-K auf einem Mac) gedrückt.</p>
+
+<p>https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit</p>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Browser-Werkzeuge</a> werden zusammen mit der Web-Konsole (sie wird in der <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Werkzeugleiste</a> nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7529/web-console-de.png" style="display: block; height: 1053px; margin-left: auto; margin-right: auto; width: 945px;"></p>
+
+<p>Unter der <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">Symbolleiste der Entwicklerwerkzeuge</a> ist die Oberfläche der Web-Konsole in drei Abschnitte eingeteilt:</p>
+
+<ul>
+ <li><a href="#filtering-and-searching" title="#filtering-and-searching">Symbolleiste</a>: oben ist eine Symbolleiste, die Schaltflächen mit Beschriftungen wie "Netz", "CSS" und "JS" beinhaltet. Diese Symbolleiste wird verwendet, um die Nachrichten zu filtern</li>
+ <li><a href="#command-line" title="#command-line">Kommandozeile</a>: unten ist eine Kommandozeile, in der Sie JavaScript-Befehle eingeben können</li>
+ <li><a href="#message-display-pane" title="#message-display-pane">Meldungsansicht</a>: zwischen der Symbolleiste und der Kommandozeile zeigt die Web-Konsole Meldungen im größten Teil des Fensters an</li>
+</ul>
+
+<h2 id="Meldungsansicht"><a name="meldungsansicht">Meldungsansicht</a></h2>
+
+<p>Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7537/web-console-messages-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;"></p>
+
+<p>Die Meldungsanzeige zeigt folgende Meldungen an:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP-Anfragen</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#JavaScript_errors_and_warnings">JavaScript-Warnungen und -Fehler</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#CSS_errors.2C_warnings.2C_and_reflow_messages">CSS-Warnungen, Fehler und DOM-Neuberechnungen</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Security_warnings_and_errors">Sicherheitswarnungen und -fehler</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#console_API_messages">console API-Aufrufe</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Eingabe/Ausgabe-Meldungen</a>: Befehle und Ergebnisse der Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden.</li>
+</ul>
+
+<p>Jede Nachricht wird in einer neuen Zeile angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7539/web-console-message-annotated-de.png" style="display: block; height: 170px; margin-left: auto; margin-right: auto; width: 929px;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+ <tr>
+ <td><strong>Zeit</strong></td>
+ <td>Die Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardmäßig nicht angezeigt, jedoch können Sie Zeitstempel mit einer <a href="/en-US/docs/Tools_Toolbox#Settings">Einstellung in der Werkzeugleiste</a> anzeigen lassen.</td>
+ </tr>
+ <tr>
+ <td><strong>Kategorie</strong></td>
+ <td>
+ <p><strong>Kategorie</strong>: zeigt an, um welche Art von Meldung es sich handelt:</p>
+
+ <ul style="margin-left: 40px;">
+ <li><strong>Schwarz</strong>: HTTP-Anfrage</li>
+ <li><span style="color: #0099ff;"><strong>Blau</strong></span>: CSS-Warnung/Fehler/Meldung</li>
+ <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript-Warnung/Fehler</li>
+ <li><span style="color: #ff0000;"><strong>Grün</strong></span>: Sicherheitswarnung/-fehler</li>
+ <li><span style="color: #a9a9a9;"><strong>Hellgrau</strong></span>: Meldungen, die explizit durch von der <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a>-API ausgeführtem JavaScript-Code stammen</li>
+ <li><span style="color: #696969;"><strong>Dunkelgrau</strong></span>: Eingaben/Ausgaben von der interaktiven <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">Kommandozeile</a></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><strong>Typ</strong></td>
+ <td>Für alle Meldungen außer HTTP-Anfragen und interaktiven Eingaben/Ausgaben, ein Symbol das anzeigt, ob es sich um ein Fehler(X), eine Warnung(!) oder eine Meldung (i) handelt.</td>
+ </tr>
+ <tr>
+ <td><strong>Meldung</strong></td>
+ <td>Die Meldung an sich.</td>
+ </tr>
+ <tr>
+ <td><strong>Anzahl der Meldungen</strong></td>
+ <td>Wenn eine Zeile, die eine Warnung oder ein Fehler erzeugt, mehrmals ausgeführt wird, wird sie nur einmal aufgezeichnet und der Zähler zeigt die Anzahl an Meldungen an.</td>
+ </tr>
+ <tr>
+ <td><strong>Dateiname und Zeilennummer</strong></td>
+ <td>JavaScript-, CSS- und console API-Meldungen können zu einer spezifischen Codezeile zurückverfolgt werden. Die Konsole gibt den Dateinamen und Zeilennummer des Codeabschnitts an, das die Meldung erzeugt hat.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="HTTP-Anfragen">HTTP-Anfragen</h3>
+
+<p>HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7559/web-console-message-request-annotated-de.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 810px;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+ <tr>
+ <td><strong>Zeit</strong></td>
+ <td>Die Zeit, zu der die Meldung aufgezeichnet wurde.</td>
+ </tr>
+ <tr>
+ <td><strong>Kategorie</strong></td>
+ <td>Zeigt an, dass die Meldung eine HTTP-Anfrage ist.</td>
+ </tr>
+ <tr>
+ <td><strong>Methode</strong></td>
+ <td>Die Methode der HTTP-Anfrage</td>
+ </tr>
+ <tr>
+ <td><strong>URI</strong></td>
+ <td>Die Ziel-URI</td>
+ </tr>
+ <tr>
+ <td><strong>Zusammenfassung</strong></td>
+ <td>Die HTTP-Version, Status-Code und Laufzeit.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen über die Anfrage und Antwort:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7531/detailspanel-de.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 463px;">Durch Herunterscrollen sehen Sie die Antwort-Zeilen. Standardmäßig werden Anfrage- und Antwort-Inhalte nicht aufgezeichnet: um dies zu tun, wählen Sie im Auswahlmenü der Web-Konsole "Anfrage- und Antwort-Inhalte aufzeichnen" aus, laden Sie die Seite neu und öffnen Sie das Fenster "Netzwerk-Request untersuchen".</p>
+
+<p>Nur das erste Megabyte an Daten wird für alle Anfrage- und Antwort-Inhalte aufgezeichnet, weshalb sehr große Anfragen und Antworten gekürzt werden.</p>
+
+<div class="geckoVersionNote">
+<p>Ab Firefox 30 werden Netzwerk-Meldungen standardmäßig nicht angezeigt.</p>
+</div>
+
+<h3 id="JavaScript-Fehler_und_Warnungen">JavaScript-Fehler und Warnungen</h3>
+
+<p>JavaScript-Meldungen sehen folgendermaßen aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7541/js-error-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 810px;"></p>
+
+<div class="geckoVersionNote">
+<p>Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.</p>
+</div>
+
+<h3 id="CSS-Fehler_-Warnungen_und_DOM-Neuberechnungen">CSS-Fehler, -Warnungen und DOM-Neuberechnungen</h3>
+
+<p>CSS-Meldungen sehen folgendermaßen aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7539/web-console-message-annotated-de.png" style="display: block; height: 170px; margin-left: auto; margin-right: auto; width: 929px;"></p>
+
+<p>Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.</p>
+
+<h4 id="DOM-Neuberechnungen">DOM-Neuberechnungen</h4>
+
+<p>Die Web-Konsole zeichnet auch DOM-Neuberechnungen unter der CSS-Kategorie auf. Eine Neuberechnung bezeichnet der Vorgang, bei dem der Browser das Layout von der ganzen Seite oder von Teilen berechnet. Neuberechnungen treten auf, wenn Änderungen auf einer Seite aufgetreten sind, von denen der Browser denkt, dass das Layout der Seite beeinflusst wurde. Viele Ereignisse können Neuberechnungen auslösen, inklusive: Skalieren des Browser-Fensters, Aktivieren von Pseudoklassen wie :hover oder Manipulieren des DOM in JavaScript.</p>
+
+<p>Da Neuberechnungen manchmal Rechenaufwendig sind und die Benutzeroberfläche direkt beeinflussen, können sie einen großen Einfluss auf die responsiveness einer Webseite oder Web-App haben. Indem Neuberechnungen in der Web-Konsole aufgezeichnet werden, können Sie sehen, wann Neuberechnungen erzwungen werden, wie lange es dauert, sie auszuführen, ob die Neuberechnungen <a href="#synchronous-and-asynchronous-reflows">synchrone Neuberechnungen</a> sind und von welchem JavaScript-Code sie erzwungen werden.</p>
+
+<p>Neuberechnungen werden als "Logbuch"-Meldungen angezeigt, im Gegensatz zu CSS-Fehlern oder Warnungen. Standardmäßig sind sie deaktiviert. Sie können sie aktivieren, indem Sie auf die "CSS"-Schaltfläche in der <a href="#filtering-and-searching">Symbolleiste</a> klicken und "Logbuch" auswählen.</p>
+
+<p>Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die für die Neuberechnung gebraucht wurde:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7547/web-console-reflow-asynch-de.png" style="display: block; height: 23px; margin-left: auto; margin-right: auto; width: 636px;">Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7549/web-console-reflow-synch-de.png" style="display: block; height: 23px; margin-left: auto; margin-right: auto; width: 721px;">Klicken Sie auf den Link um die Datei im <a href="/en-US/docs/Tools/Debugger">Debugger</a> zu öffnen.</p>
+
+<h4 id="Synchrone_and_asynchrone_Neuberechnungen"><a name="synchrone-und-asynchrone-neuberechnungen">Synchrone and asynchrone Neuberechnungen</a></h4>
+
+<p>Wenn eine Änderung das aktuelle Layout ungültig macht - zum Beispiel, wenn der Browser-Fenster skaliert wird oder JavaScript-Code das CSS eines Elements ändert - wird das Layout nicht augenblicklich neu berechnet. Stattdessen geschieht die Neuberechnung asynchron, sobald der Browser entscheidet, dass es notwendig ist (üblicherweise, wenn das Aussehen des Browser-Fensters neu gezeichnet wird). So kann der Browser mehrere ungültig machende Änderungen sammeln und alle auf einmal neuberechnen.</p>
+
+<p>Wenn ein JavaScript-Code jedoch CSS ausliest, das geändert wurde, muss der Browser eine synchrone Neuberechnung durchführen um das berechnete Aussehen zurückzugeben. Folgender Code-Beispiel löst beim Aufruf von <code>window.getComputedStyle(thing).height</code> sofort eine synchrone Neuberechnung aus:</p>
+
+<pre class="brush: js">var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;</pre>
+
+<p>Deshalb ist es eine gute Idee, Verschachtelungen von Schreib- und Leseanfragen zu vermeiden, da bei jedem Lesen eines durch eine vorangegangene Schreibanfrage ungültig gemachten Stils eine synchrone Neuberechnung erzwungen wird.</p>
+
+<h3 id="Sicherheitswarnungen_und_-fehler">Sicherheitswarnungen und -fehler</h3>
+
+<p>Sicherheitswarnungen und -fehler sehen folgendermaßen aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7555/sec-error-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 810px;">Die Sicherheitsmeldungen in der Web-Konsole helfen Ihnen dabei, (potentielle) Sicherheitslücken in Ihren Seiten zu finden. Außerdem helfen diese Meldungen Entwickler dabei, zu lernen, da sie mit einem Link "Weitere Informationen" enden, womit Sie zu einer Seite mit Hintergrundinformationen und Hilfestellungen zur Problemlösung geführt werden.</p>
+
+<p>Die folgende Liste führt alle Sicherheitsmeldungen auf:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+ <tr>
+ <th scope="col">Meldung</th>
+ <th scope="col">Details</th>
+ </tr>
+ <tr>
+ <td>Laden von gemischten aktiven Inhalten wurde blockiert.</td>
+ <td>Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+ </tr>
+ <tr>
+ <td>Laden von gemischten Ansichtsinhalten wurde blockiert.</td>
+ <td>Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+ </tr>
+ <tr>
+ <td>Lade gemischte (unsichere) aktive Inhalte auf einer sicheren Seite</td>
+ <td>Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+ </tr>
+ <tr>
+ <td>Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren Seite</td>
+ <td>Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+ </tr>
+ <tr>
+ <td>Diese Website hat Kopfzeilen sowohl mit <span class="highlight">X-Content-Security-Policy/Report-Only</span> als auch <span class="highlight">Content-Security-Policy/Report-Only</span> angegeben. Jene mit <span class="highlight">X-Content-Security-Policy/Report-Only</span> werden ignoriert.</td>
+ <td>Siehe <a href="/en-US/docs/Security/CSP">Content Security Policy</a> für mehr Details.</td>
+ </tr>
+ <tr>
+ <td>Die Kopfzeilen <span class="highlight">X-Content-Security-Policy</span> und <span class="highlight">X-Content-Security-Report-Only</span> werden in Zukunft nicht mehr unterstützt. Verwenden Sie bitte stattdessen die Kopfzeilen <span class="highlight">Content-Security-Policy</span> und <span class="highlight">Content-Security-Report-Only</span> mit <span class="highlight">CSP</span>-Spezifikations-kompatibler <span class="highlight">Syntax</span>.</td>
+ <td>Siehe <a href="/en-US/docs/Security/CSP">Content Security Policy</a> für mehr Details.</td>
+ </tr>
+ <tr>
+ <td>Passwort-Felder sind auf einer unsicheren <span class="highlight">(http://)</span> Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td>
+ <td>Seiten mit Anmeldeformularen müssen über HTTPS, nicht HTTP, bereitgestellt werden.</td>
+ </tr>
+ <tr>
+ <td>Passwort-Felder sind in einem Formular mit einer unsicheren <span class="highlight">(http://)</span> Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td>
+ <td>Formulare mit Passwortfeldern müssen diese über HTTPS, nicht HTTP, absenden.</td>
+ </tr>
+ <tr>
+ <td>Passwort-Felder sind in einem unsicheren <span class="highlight">(http://)</span> Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td>
+ <td>iframes, die Anmeldeformulare beinhalten, müssen über HTTPS, nicht HTTP, bereitgestellt werden.</td>
+ </tr>
+ <tr>
+ <td>Diese Website hat eine ungültige <span class="highlight">Strict-Transport-Security</span>-Kopfzeile angegeben.</td>
+ <td>Siehe <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> für mehr Details.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> ist ein Problembericht um für Sicherheit relevante Meldungen in der Web-Konsole zu sammeln. Wenn Sie mehr Ideen für nützliche Funktionen wie diese haben, oder einfach nur mitmachen wollen, schauen Sie sich den Fehlerbericht und die davon abhängigen an.</p>
+
+<h3 id="console_API-Meldungen">console API-Meldungen</h3>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7557/console-api-message-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 216px;"></p>
+
+<p>Dieser Abschnitt beschreibt die Ausgaben der Web-Konsole für die console API-Aufrufe, die Ausgaben erzeugen. Für mehr oberflächliche Informationen über die console API, siehe folgende <a href="/en-US/docs/Web/API/console">Dokumentationsseite</a>.</p>
+
+<h4 id="Fehlermeldungen">Fehlermeldungen</h4>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">API</th>
+ <th scope="col">Meldungsinhalt</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>error()</code></td>
+ <td>
+ <p>Argument für <code>error()</code>.</p>
+
+ <pre class="brush: js">
+console.error("an error");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ <tr>
+ <td><code>exception()</code></td>
+ <td>Alias für <code>error()</code>.</td>
+ </tr>
+ <tr>
+ <td><code>assert()</code></td>
+ <td>
+ <div class="geckoVersionNote">
+ <p>Neu in Firefox 29.</p>
+ </div>
+
+ <p>Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschlägt, Argument:</p>
+
+ <pre class="brush: js">
+console.assert(false, "My assertion always fails");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ </tbody>
+</table>
+
+<h4 id="Warnmeldungen">Warnmeldungen</h4>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">API</th>
+ <th scope="col">Meldungsinhalt</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>warn()</code></td>
+ <td>
+ <p>Argument für <code>warn()</code>.</p>
+
+ <pre class="brush: js">
+console.warn("a warning");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ </tbody>
+</table>
+
+<h4 id="Informationsmeldungen">Informationsmeldungen</h4>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">API</th>
+ <th scope="col">Meldungsinhalt</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>info()</code></td>
+ <td>
+ <p>Argument für <code>info()</code>.</p>
+
+ <pre class="brush: js">
+console.info("some info");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ </tbody>
+</table>
+
+<h4 id="Meldungen">Meldungen</h4>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">API</th>
+ <th scope="col">Meldungsinhalt</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>count()</code></td>
+ <td>
+ <div class="geckoVersionNote">
+ <p>Diese Meldung ist neu in Firefox 30.</p>
+ </div>
+
+ <p>Diese Beschreibung gibt an, ob und wie oft  <code>count()</code> aufgerufen wurde mit der gegebenen Beschriftung:</p>
+
+ <pre class="brush: js">
+console.count(user.value);</pre>
+
+ <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>log()</code></td>
+ <td>
+ <p>Argument für <code>log()</code>.</p>
+
+ <pre class="brush: js">
+console.log("logged");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ <tr>
+ <td><code>trace()</code></td>
+ <td>
+ <p>Stack-Trace:</p>
+
+ <pre class="brush: js">
+console.trace();</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ <tr>
+ <td><code>dir()</code></td>
+ <td>
+ <p>Auflisten der Objekteigenschaften:</p>
+
+ <pre class="brush: js">
+var user = document.getElementById('user');
+console.dir(user);</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ <tr>
+ <td><code>time()</code></td>
+ <td>
+ <p>Benachrichtigung, dass der spezifische Timer gestartet wurde.</p>
+
+ <pre class="brush: js">
+console.time("t");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7553/api-time-de.png" style="display: block; height: 16px; margin-left: auto; margin-right: auto; width: 586px;"></td>
+ </tr>
+ <tr>
+ <td><code>timeEnd()</code></td>
+ <td>
+ <p>Dauer für den spezifischen Timer.</p>
+
+ <pre class="brush: js">
+console.timeEnd("t");</pre>
+ <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+ </tr>
+ </tbody>
+</table>
+
+<h4 id="Gruppieren_von_Meldungen">Gruppieren von Meldungen</h4>
+
+<p>Sie können <code>console.group()</code> benutzen um eingerückte Gruppen in der Konsolenausgabe zu erstellen. Siehe <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">Gruppen in der Konsole benutzen</a> für mehr Informationen.</p>
+
+<h3 id="Eingabe-Ausgabemeldungen">Eingabe-/Ausgabemeldungen</h3>
+
+<p>Befehle, die dem Browser über die <a href="#command-line" title="#command-line">Kommandozeile der Web-Konsole</a> geschickt wurden und die dazugehörigen Antworten werden mit Zeilen wie diese aufgezeichnet:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">Die dunkelgraue Leiste gibt an, dass es sich um Eingabe-/Ausgabemeldungen handelt, während die Richtung, in die die Pfeile zeigen, zwischen Eingabe und Ausgabe unterscheidet.</p>
+
+<h3 id="Filtern_und_suchen"><a name="filtering-and-searching">Filtern und suchen</a></h3>
+
+<p>Sie können die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7561/web-console-toolbar-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;">Sie können nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.</p>
+
+<p>Zuletzt können Sie diese Symbolleiste benutzen um die Aufzeichnungen zu löschen.</p>
+
+<dl>
+</dl>
+
+<h2 id="Der_Kommandozeileninterpreter"><a name="command-line">Der Kommandozeileninterpreter</a></h2>
+
+<p>Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7563/web-console-commandline-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;"></p>
+
+<h3 id="Ausdrücke_eingeben">Ausdrücke eingeben</h3>
+
+<p>Um Ausdrücke einzugeben, tippen Sie sie in die Kommandozeile ein und drücken Sie die Eingabetaste.</p>
+
+<p>Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Auf_Variablen_zugreifen">Auf Variablen zugreifen</h3>
+
+<p>Sie können auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie <code>window</code> oder Variablen, die von JavaScript-Code erstellt wurden, wie <code>jQuery</code>:</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>
+
+<h3 id="Automatische_Vervollständigung">Automatische Vervollständigung</h3>
+
+<p>Die Kommandozeile hat eine automatische Vervollständigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit möglichen Vervollständigungen erscheint:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7567/commandline-autocomplete-de.png" style="display: block; height: 192px; margin-left: auto; margin-right: auto; width: 720px;">Drücken Sie die Eingabe- oder Tabulatortaste um den Vorschlag zu übernehmen, benutzen Sie die Pfeiltasten um zu einem anderen Vorschlag zu gelangen, oder tippen Sie einfach weiter, wenn Ihnen keines der Vorschläge gefällt.</p>
+
+<p>Die Konsole schlägt Vervollständigungen im Umfang des momentan ausgeführten Stack-Frames vor. Das heißt, wenn Sie ein Haltepunkt erreichen, bekommen Sie Vervollständigungen für für die Funktion lokale Objekte.</p>
+
+<p>Ab Firefox 30 können auch Array-Elemente automatisch vervöllständigt werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Elemente_untersuchen">Elemente untersuchen</h3>
+
+<p>Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7551/commandline-inspecting-de.png" style="display: block; height: 373px; margin-left: auto; margin-right: auto; width: 720px;">Um diese Ansicht zu schließen, drücken Sie die Escape-Taste.</p>
+
+<div class="geckoVersionNote">
+<p>Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie <code><u>[Objekt Funktion]</u></code>.</p>
+</div>
+
+<h3 id="Variablen_festlegen">Variablen festlegen</h3>
+
+<p>Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Knoten_hervorheben_und_untersuchen">Knoten hervorheben und untersuchen</h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu in Firefox 30.</p>
+</div>
+
+<p>Wenn Sie mit dem Mauszeiger über ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7533/commandline-highlightnode-de.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 715px;">In dem oberen Bildschirmfoto können Sie auch ein "Ziel"-Symbol in blau neben dem Knoten in der Konsolenausgabe sehen: klicken Sie darauf um den Knoten zu <a href="/en-US/docs/Tools/Page_Inspector">untersuchen</a>.</p>
+
+<h3 id="Befehlsverlauf">Befehlsverlauf</h3>
+
+<p>Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.</p>
+
+<h3 id="Mit_iframes_arbeiten">Mit iframes arbeiten</h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu in Firefox 30.</p>
+</div>
+
+<p>Wenn eine Seite über eingebettete <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a> verfügt, können Sie den <code>cd()</code>-Befehl benutzen um den Umfang der Konsole auf einen spezifischen iframe zu setzen und Funktionen, die im iframe-Dokument definiert werden, auszuführen. Es gibt drei Wege um ein iframe mit <code>cd()</code> auszuwählen:</p>
+
+<p>Sie können das iframe DOM-Element übergeben:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>Sie können einen CSS-Selektor übergeben, der zum iframe gehört:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Sie können den globalen Fensterobjekt des iframes übergeben:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>Um zum übergeordneten Fenster zu wechseln, rufen Sie <code>cd()</code> ohne Argumente auf:</p>
+
+<pre class="brush: js">cd();</pre>
+
+<p>Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:</p>
+
+<pre class="brush: html">&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>Der iframe definiert eine neue Funktion:</p>
+
+<pre class="brush: html">&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>So können Sie den Umfang zum iframe wechseln:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:</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;">Sie können auch die Funktion, die in dem iframe definiert wird, aufrufen:</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>
+
+<h3 id="Hilfsbefehle">Hilfsbefehle</h3>
+
+<p>{{ page("/en/Using_the_Web_Console/Helpers", "Die Befehle") }}</p>
+
+<h2 id="Die_geteilte_Konsole">Die geteilte Konsole</h2>
+
+<div class="geckoVersionNote">
+<p>Die geteilte Konsole ist neu in Firefox 28.</p>
+</div>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>Ab Firefox 28 können Sie die Konsole zusammen mit anderen Werkzeugen benutzen. Während Sie in einem anderen Werkzeug in der Werkzeugkiste sind, drücken Sie die Escape-Taste oder die Schaltfläche "Erzwingen der Anzeige der Konsole umschalten, gegebenenfalls zusätzlich zum aktuellen Entwicklerwerkzeug" in der <a href="/en-US/docs/Tools_Toolbox#Toolbar">Werkzeugleiste</a>. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem ursprünglichen Werkzeug über der Web-Konsole.</p>
+
+<p>Wie üblich funktioniert <code>$0</code> als Abkürzung für das in der Ansicht "Element unterschen" ausgewählte Element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7535/web-console-split-inspector-de.png" style="display: block; height: 772px; margin-left: auto; margin-right: auto; width: 1006px;">Wenn Sie die geteilte Konsole zusammen mit dem Debugger benutzen, wird der Umfang der Konsole auf den momentan ausgeführten Stack-Frame beschränkt. Wenn Sie einen Haltepunkt einer Funktion erreichen, wird der Umfang auf diese Funktion beschränkt. Sie können in der Funktion definierte Objekte automatisch vervollständigen und spontan ändern:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Tastenkürzel">Tastenkürzel</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}</p>
+
+<h3 id="Allgemeine_Tastenkürzel">Allgemeine Tastenkürzel</h3>
+
+<h3 id="Page_(en-USdocstoolsKeyboard_shortcuts_all-toolbox-tools)">{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</h3>
diff --git a/files/de/tools/webide/index.html b/files/de/tools/webide/index.html
new file mode 100644
index 0000000000..def42cbac3
--- /dev/null
+++ b/files/de/tools/webide/index.html
@@ -0,0 +1,280 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+translation_of: Archive/WebIDE
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>Die WebIDE ist verfügbar in Firexfox 34 und neuer</p>
+
+<p>Du kannst sie aber auch schon in Firefox 33 aktivieren in dem du die Einstellungen veränderst: Besuche <a href="http://kb.mozillazine.org/About:config">about:config</a>, finde die Einstellung <code>devtools.webide.enabled</code> und stelle sie auf <code>true</code> um.</p>
+</div>
+
+<div class="summary">
+<p>Die WebIDE ist der Ersatz des <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Managers</a>. Genauso wie der App Manager, kannst du mit der WebIDE <a href="/en-US/Firefox_OS">Firefox OS</a> Apps ausführen und debuggen mit dem <a href="/de/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> oder einem richtigen Firefox OS Gerät</p>
+
+<p>Darüber hinaus ist sie dir eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps.  WebIDE bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sichern aller Dateien deiner App.  Für den leichten Einstieg helfen dir zwei App Templates.</p>
+</div>
+
+<p>{{EmbedYouTube("2xmj4W8O3E4")}}</p>
+
+<p>Mit der WebIDE, musst du zuerst <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">eine oder mehr Laufzeiten</a> erstellen. Eine Laufzeit ist eine Umgebung, in der du deine App ausführst und debuggst. Eine Laufzeit kann ein Gerät mit Firefox OS sein, welches per USB verbunden ist oder auch der <a href="/de/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a>.</p>
+
+<p>Als Nächstes <a href="/de/docs/Tools/WebIDE#Creating_and_opening_apps">öffnest oder erstellst du eine App</a>. Falls du eine neue App erstellst, beginnst du mit einer Vorlage, die die Verzeichnisstruktur und die minimalen Textbausteine enthält, die du zu Anfang benötigst. Du kannst auch mit einer umfangreicheren Vorlage anfangen, die zeigt, wie du eine privilegierte API benutzt. Die WebIDE zeigt deine App-Dateien in einer Baumansicht und du kannst sie mit dem eingebauten Quelleditor bearbeiten und speichern. Natürlich kannst du deine Apps auch mit deinen bevorzugten Werkzeugen entwickeln und die WebIDE nur zur Fehlersuche benutzen.</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 the 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 the WebIDE if you're targeting Firefox OS 1.2 or later.</p>
+
+<h2 id="Opening_the_WebIDE">Opening the WebIDE</h2>
+
+<p>In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:<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>
+
+<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</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 to the WebIDE using an arbitrary name and port.</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 to debug certified apps, including built-in apps</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</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 the 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="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>
+
+<p>With a custom 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, the 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 the 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.<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>.</p>
+
+<p>Also, 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</a>.</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, the WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_actions">Runtime actions</h3>
+
+<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: information on the current runtime</li>
+ <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
+ <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
+
+<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>The 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>The 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 the WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
+
+<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
+
+<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">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="Debugging_certified_apps">Debugging certified apps</h3>
+
+<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, to debug certified apps on a real device:</p>
+
+<ul>
+ <li>the device must be running a development build of Firefox OS 1.2+</li>
+ <li>you must enable certified app debugging</li>
+</ul>
+
+<p>To enable certified app debugging, connect to the runtime, and then, in the menu, go to <code>Runtime &gt; Runtime Info</code>. From here, if you see <code>"DevTools restricted privileges: yes</code>", that means certified apps can't be debugged. 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 certified apps debugging (Firefox OS will restart).</li>
+ </ul>
+ </li>
+ <li>Simulator
+ <ul>
+ <li>The simulators come with certified 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 certified app debugging.</li>
+ </ul>
+ </li>
+</ul>
+
+<p>Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.</p>
+
+<h2 id="Monitoring_performance">Monitoring performance</h2>
+
+<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p>
+
+<ul>
+ <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li>
+ <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li>
+</ul>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you have any problems working with the WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/tools/webide/problemlösung/index.html b/files/de/tools/webide/problemlösung/index.html
new file mode 100644
index 0000000000..1e15175d33
--- /dev/null
+++ b/files/de/tools/webide/problemlösung/index.html
@@ -0,0 +1,165 @@
+---
+title: WebIDE Problemlösung
+slug: Tools/WebIDE/Problemlösung
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<div>{{ToolsSidebar}}</div><h2 id="Mit_einem_Firefox-OS-Gerät_verbinden">Mit einem Firefox-OS-Gerät verbinden</h2>
+
+<p>Wenn du mit dem WebIDE eine Verbindung zu deinem Firefox-OS-Gerät herstellen möchtest, das Gerät aber nicht angezeigt wird, prüfe folgendes:</p>
+
+<ul>
+ <li>Überprüfe die Firefox OS-Version:<br>
+ Stell sicher, dass auf Deinem Gerät <strong>Firefox OS 1.2/ Boot2Gecko 1.2</strong> oder höher läuft. Um die Version zu prüfen, starte die SettingsApp (Einstellungen) und gehe zu <code>Device Information &gt; Software (Geräteinformationen &gt; Software)</code>. Wenn Deine Version zu alt ist, finde dein Gerät im <a href="/de/Firefox_OS/Developer_phone_guide">Developer Phone Guide</a> und folge den Anweisungen zum Upgraden.</li>
+ <li>Erlaube das Remote Debugging (Externes Debuggen):
+ <ul>
+ <li>Gehe in der SettingsApp (Einstellungen) zu <code>Device Information &gt; More information &gt; Developer &gt; Debugging via USB (Geräteinformation &gt; Weitere Informationen &gt; Entwickler &gt; Debuggen über USB)</code>
+ <ul>
+ <li>in Firefox OS 1.3 und früher: "Remote Debugging" ist eine einfache Checkbox um dieses zu aktivieren.</li>
+ <li>in Firefox OS 1.4 und später: "Remote Debugging" fragt ob nur ADB oder ADB und DevTools erlaubt werden sollen. Wähle hier "ADB und DevTools"</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>Deaktiviere das Abschalten des Bildschirms:<br>
+ Gehe in den Einstellungen auf deines Gerätes (Settings-App) auf "Bildschirm sperren" und entferne das Häkchen. Warum? Wenn der Bildschirm gesperrt wird, verliert das Gerät die Verbindung und steht für das Remote Debugging nicht mehr zur Verfügung.</li>
+ <li>Achte darauf, dass kein anderes Android-Gerät zur selben Zeit mit dem Computer verbunden ist, ausser dem Firefox-OS-Gerät.</li>
+ <li>Überprüfe das USB-Kabel:
+ <ul>
+ <li>Zieh das USB-Kabel heraus und verbinde es erneut.</li>
+ <li>Prüfe das Kabel an einem anderen Rechner und auch an anderen USB-Anschlüssen.</li>
+ <li>Versuche ein anderes USB-Kabel. Die mit dem Gerät mitgelieferten Kabel sind meist von minderer Qualität und fallen oft aus.</li>
+ <li>Versuche ein kürzeres USB-Kabel. Es ist bekannt, dass längere Kabel nicht so gut arbeiten.</li>
+ </ul>
+ </li>
+ <li>Deaktiviere und aktiviere erneut das Remote Debugging auf dem Firefox-OS-Gerät.</li>
+ <li><a href="/de/docs/Tools/WebIDE#Custom_runtimes">Wenn du das "ADB Addon Helper" deaktiviert hast</a>. Kannst du erfolgreich den Befehl <code>adb forward</code> ausführen?</li>
+ <li>Wenn du Linux nutzt:
+ <ul>
+ <li>Stelle sicher, dass du die <code>udev rules</code> so angepasst hast, wie im dritten Schritt der Anleitung <a href="http://developer.android.com/tools/device.html#setting-up">Gerät zum Entwickeln vorbereiten</a>. Die <code>idVendor</code>-Eigenschaft für Geeksphone ist "05c6". Weitere Werte für <code>idVendor</code> findest du auf <a href="http://developer.android.com/tools/device.html#VendorIds">dieser Seite</a>. Starte nun <code>adb devices</code> um sicher zu gehen, dass das Gerät gelistet wird. Wenn du "keine Berechtigung"  hast, starte den adb-Server neu (z.B. <code>adb kill-server;adb start-server</code>).</li>
+ <li>Wenn du das <code>android-tools-adb</code>-Paket von Debian nutzt, kann es sein, dass der ADB Helper verlangt alle existierenden ADB-Server zu schließen. Dieses Paket deaktiviert die TCP-Verbindung, die ADB Helper nutzt.</li>
+ </ul>
+ </li>
+ <li>Wenn du Windows nutzt:
+ <ul>
+ <li>Du musst alle Treiber wie in Schritt 3 der Anleitung <a href="http://developer.android.com/tools/device.html#setting-up">Gerät zum Entwickeln vorbereiten</a> installiert haben. Treiber für Geekphones findest auf der Geeksphone-Website und für Google-Geräte auf der Google-Website.<br>
+ Windows 8-Benutzer: Standardmäßig verweigert Windows 8 das Installieren von nicht-signierten Treibern. Bei Problemen, schau dir dieses Tutorial an: <a href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Wie installiert man unsignierte Treiber in Windows 8"</a>.</li>
+ <li>Wenn das WebIDE dein Gerät nach all diesen Schritten immer noch nicht erkennt, wirst du wohl die <a href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini editieren</a> müssen.</li>
+ </ul>
+ </li>
+ <li>Wenn du Mac OS X nutzt:
+ <ul>
+ <li>Treten Timeout-Fehler beim Verbinden mit einem Simulator und dem realen Gerät auf, kannst du dich vermutlich aufgrund einer fehlenden oder falschen /etc/hosts-Datei nicht mit localhost verbinden. Erstelle die Datei und lösche den DNS-Cache, <a href="https://discussions.apple.com/thread/2729411?tstart=0">wie hier beschrieben</a>.</li>
+ <li>
+ <p>Bist du ein EasyTether-User, musst du EasyTether deaktivieren oder deinstallieren: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></p>
+ </li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="Über_Wi-Fi_mit_Firefox_OS_verbinden">Über Wi-Fi mit Firefox OS verbinden</h2>
+
+<ul>
+ <li>Überprüfe deine Firefox Version: Wi-Fi-Debugging setzt Firefox 39 oder höher voraus, sowie ein Firefox OS-Gerät mit laufendem Firefox OS 3.0 vom 27.03.2015 oder später.</li>
+ <li>Sowohl der Computer als auch das Firefox OS-Gerät müssen mit dem selben Wi-Fi-Netzwerk verbunden werden
+ <ul>
+ <li>Der Computer darf <strong>nicht </strong>über Kabel an den Router angeschlossen sein. Beide Geräte müssen über Wi-Fi verbunden werden.</li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="Über_USB_mit_Firefox_für_Android_verbinden">Über USB mit Firefox für Android verbinden</h2>
+
+<p>Wenn du versucht dich mit einer laufenden Firefox Anwendung auf deinem Android-Gerät zu verbinden und dieses nicht angezeigt wird, versuche folgendes:</p>
+
+<ul>
+ <li>Überprüfe deine Firefox-Version: Firefox für Android muss in Version 36 oder höher vorliegen. Das WebIDE kann ältere Versionen nicht automatisch erkennen, dafür muss Port Forwarding aktiviert werden und mit dem Geräte-Port verbunden werden - folge <a href="/de/docs/Tools/Remote_Debugging/Firefox_for_Android">dieser Anleitung</a>.</li>
+ <li>Überprüfe, ob Externes Debugging aktiviert ist, gehe hierzu in die Einstellungen &gt; Entwicklerwerkzeuge &gt; Externes Debuggen und setzte ein Häkchen.</li>
+ <li>Überprüfe, ob USB Debugging in den Entwickler-Einstellungen deines Gerätes aktiviert ist.</li>
+ <li>Wenn du dein Gerät im WebIDE-Fenster immernoch nicht siehst, versuche Externes Debuggen auf dem Gerät erneut zu aktivieren:
+ <ul>
+ <li>Entferne die Verbindung zwischen deinem Computer und dem Gerät und schalte Externes Debuggen aus.</li>
+ <li>Verbinde das Gerät erneut und schalte Externes Debuggen ein -  das startet die Debugger-Instanz auf dem Gerät neu.</li>
+ <li>Versuche erneut eine WebIDE-Verbindung herzustellen.</li>
+ </ul>
+ </li>
+ <li>Wenn du Linux nutzt:
+ <ul>
+ <li>Stelle sicher, dass du die <code>udev rules</code> so angepasst hast, wie im dritten Schritt der Anleitung <a href="http://developer.android.com/tools/device.html#setting-up">Gerät zum Entwickeln vorbereiten</a>. Die <code>idVendor</code>-Eigenschaft für Geeksphone ist "05c6". Weitere Werte für <code>idVendor </code>findest du auf <a href="http://developer.android.com/tools/device.html#VendorIds">dieser Seite</a>. Starte nun <code>adb devices</code> um sicher zu gehen, dass das Gerät gelistet wird. Wenn du "keine Berechtigung"  hast, starte den adb-Server neu (z.B. <code>adb kill-server;adb start-server</code>).</li>
+ <li>Wenn du das <code>android-tools-adb</code>-Paket von Debian nutzt, kann es sein, dass der ADB Helper verlangt alle existierenden ADB-Server zu schließen. Dieses Paket deaktiviert die TCP-Verbindung, die ADB Helper nutzt.</li>
+ </ul>
+ </li>
+ <li>Wenn du Windows nutzt:
+ <ul>
+ <li>Überprüfe, ob das Gerät richtig verbunden ist und das es den Google USB Treiber benutzt, der im Android SDK enthalten ist.</li>
+ </ul>
+ </li>
+ <li>Wenn du Mac OS X nutzt:
+ <ul>
+ <li>
+ <p>Bist du ein EasyTether-User, musst du EasyTether deaktivieren oder deinstallieren: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></p>
+ </li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="Über_Wi-Fi_mit_Firefox_für_Android_verbinden">Über Wi-Fi mit Firefox für Android verbinden</h2>
+
+<ul>
+ <li>Überprüfe deine Firefox Version: Wi-Fi-Debugging setzt Firefox 42 oder höher voraus, sowie ein Android-Gerät mit installiertem Firefox in Version 42 oder höher.</li>
+ <li>Sowohl der Computer als auch das Firefox OS-Gerät müssen mit dem selben Wi-Fi-Netzwerk verbunden werden
+ <ul>
+ <li>Der Computer darf <strong>nicht </strong>über Kabel an den Router angeschlossen sein. Beide Geräte müssen über Wi-Fi verbunden werden.</li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="Verbindung_zu_anderen_Browsern_herstellen_(Chrome_Safari_iOS)">Verbindung zu anderen Browsern herstellen (Chrome, Safari, iOS)</h2>
+
+<p>WebIDE nutzt <a href="/de/docs/Tools/Valence">Valence (Firefox Tools Adapter)</a>, um sich mit anderen Browsern, wie Chrome, Safari oder iOS, zu verbinden.</p>
+
+<p>Wenn du Probleme bei der Verbindung mit anderen Browsern hast, überprüfe die Installationsschritte und andere Hinweise für diese Browser auf der <a href="/de/docs/Tools/Valence">Valence-Seite</a>.</p>
+
+<h2 id="Manche_Apps_sind_nicht_debuggbar">Manche Apps sind nicht debuggbar</h2>
+
+<p>Wenn du der Meinung bist, dass zertifizierte Apps, eingebaute Apps oder bereits auf einem echten Gerät installierte Apps nicht debuggbar sind, dann kann dies durch die Restricted Privileges Security Policies des WebIDE (dt.: Sicherheitsrichtlinien für beschränkte Berechtigungen) ausgelöst werden. Für mehr Informationen sieh dir <a href="/de/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> (dt.: Unbeschränktes App-Debugging) an.</p>
+
+<h2 id="Die_Projekt-Liste_kann_nicht_geladen_werden">Die Projekt-Liste kann nicht geladen werden</h2>
+
+<p>Wenn du das WebIDE in einer Firefox-Version öffnest und dann zu einer früheren Version von Firefox mit dem selben Profil wechselst, kann es passieren, dass der Fehler "Die Projekt-Liste kann nicht geladen werden" beim Öffnen des WebIDE mit der früheren Version auftritt.</p>
+
+<p>Dieser Fehler tritt auf, da das vom WebIDE genutzte Speicherungssystem in neuere Versionen die Daten verschiebt und restrukturiert. Somit wird die Projekt-Liste unbenutzbar für frühere Versionen</p>
+
+<p>Die Daten gehen dabei nicht verloren, aber du wirst die neueste Version von Firefox nutzen müssen, um deine Projekt-Liste nutzen zu können.</p>
+
+<p>Wenn du wirklich eine ältere Version von Firefox benutzen willst, kannst du versuchen einfach die Projekt-Liste zu löschen, dieser Weg wird jedoch nicht empfohlen und wird nicht unterstützt. Es können Probleme auftreten und Daten verloren gehen.</p>
+
+<p>Anleitung:</p>
+
+<ol>
+ <li>Schließe Firefox.</li>
+ <li>Öffne den Firefox-Profil-Ordner.</li>
+ <li>Öffne den darin enthaltenen <code>storage</code>-Ordner.</li>
+ <li>An manchen Stellen des Dateibaums sollten Dateien oder Ordner mit folgendem Namen beginnen: <code>4268914080AsptpcPerjo</code>  (gehashter Name der Datenbank).
+ <ul>
+ <li>Beispielsweise kann solch eine Datei im Ordner <code>/storage/permanent/indexeddb+++fx-devtools/idb</code> sein.</li>
+ </ul>
+ </li>
+ <li>Lösche alle so aussehenden Dateien und Ordner.</li>
+ <li>Starte Firefox und WebIDE neu.</li>
+</ol>
+
+<h2 id="Logging_aktivieren">Logging aktivieren</h2>
+
+<p>Du kannst auch die ausführliche Protokollierung aktivieren, um eine genauere Diagnose zu erhalten:</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>Öffne <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>.</li>
+ <li>Erstelle eine neue Einstellung, die <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code> heißt. und den String-Inhalt <code>all </code>enthält.</li>
+ <li>Setze den Wert von <code>extensions.adbhelper@mozilla.org.debug</code> auf <code>true</code>.</li>
+ <li>Öffne den <a href="/de/kb/disable-or-remove-add-ons">AddOns-Manager</a>, deaktivere und reaktiviere das ADB Helper-AddOn.</li>
+ <li>Öffne die <a href="/de/docs/Tools/Browser_Console">Browser-Konsole</a>, dort kannst du nun Eintragungen mit dem Präfix <code>adb</code> sehen. Wenn dir diese Eintragungen nichts sagen, dann <a href="#Get_help">frage bitte nach Hilfe</a>.</li>
+</ol>
+
+<h2 id="Hilfe_bekommen">Hilfe bekommen</h2>
+
+<p>Gehe in den <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> und es wird versucht dir zu helfen (Vorwiegend englischer IRChat).</p>
diff --git a/files/de/tools/webide_clone/index.html b/files/de/tools/webide_clone/index.html
new file mode 100644
index 0000000000..c0be23b241
--- /dev/null
+++ b/files/de/tools/webide_clone/index.html
@@ -0,0 +1,279 @@
+---
+title: WebIDE
+slug: Tools/WebIDE_clone
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>Die WebIDE ist in Firexfox 34 und neuer verfügbar</p>
+
+<p>Du kannst sie bereits in Firefox 33 aktivieren. Besuche hierzu <a href="http://kb.mozillazine.org/About:config">about:config</a>, gehe zur Einstellung <code>devtools.webide.enabled</code> und setzte den Wert auf <code>true</code>.</p>
+</div>
+
+<div class="summary">
+<p>Die WebIDE ersetzt den <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Genau wie im App Manager kannst du mit der WebIDE <a href="/en-US/Firefox_OS">Firefox OS</a> Apps mithilfe des <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> oder einem richtigen Firefox OS Gerät ausführen und debuggen.</p>
+
+<p>Darüber hinaus ist es eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps. Sie bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sicherung aller Dateien deiner App. Für die Erleichterung deines Einstiegs helfen dir zwei App Templates.</p>
+</div>
+
+<p>{{EmbedYouTube("2xmj4W8O3E4")}}</p>
+
+<p>In der WebIDE, musst du zuerst <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">ein oder mehrere Laufzeiten</a> erstellen. Eine Laufzeit ist eine Umgebung, in der du deine Apps ausführst und debuggst. Sie ist entweder ein Firefox OS Gerät, welches per USB verbunden ist oder der Firefox OS Simulator.</p>
+
+<p>Als nächstes kannst du eine <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">App erstellen oder öffnen</a>. Wenn du eine neue App öffnest beginnst du mit einem Template, welches bereits das mindeste an Ordnerstrucktur und Code enthält, was du für den Start benötigst. Du kannst auch mit einem umfangreicheren Code Template anfangen, welcher dir Zeigt, wie man mit privilegierte APIs umgeht. Deine App Dateien werden in einer Baumansicht dargestellt und mithilfe des eingebauten Quelleditors kannst du sie jederzeit komfortabel ändern und speichern. Natürlich kannst du auch mit deinem Quelleditor deiner Wahl arbeiten und die WebIDE nur zum debuggen verwenden.</p>
+
+<p>Zum Schluss kannst du deine <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">App in eine der Laufzeiten installieren und ausführen</a>. Ab dann kannst du auch zu den üblichen Entwickler Tools, wie <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> und mehr zurückgreifen, um deine laufende App zu prüfen und modifizieren.</p>
+
+<h2 id="Systemanforderungen">Systemanforderungen</h2>
+
+<p>Alles was du zum Entwickeln und Debugging mit der WebIDE benötigst ist Firefox Version 33 oder höher. Zum Test deiner App auf einem echten Firefox OS Gerät benötigst du ein Gerät mit min. Firefox OS 1.2 und einem USB Kabel.</p>
+
+<p>Du kannst die WebIDE nur nutzen, wenn du dich auf Firefox OS 1.2 oder höher ausrichtest.</p>
+
+<h2 id="Öffnen_der_WebIDE">Öffnen der WebIDE</h2>
+
+<p>Klick hierzu im Web Entwickler Menü auf den WebIDE Eintrag. Die WebIDE sollte sich öffnen. Alternativ kannst du auch die Tastenkombination Shift-F8 nutzen:<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>
+
+<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</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 to the WebIDE using an arbitrary name and port.</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 to debug certified apps, including built-in apps</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</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 the 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="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>
+
+<p>With a custom 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, the 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 the 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.<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>.</p>
+
+<p>Also, 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</a>.</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, the WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_actions">Runtime actions</h3>
+
+<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: information on the current runtime</li>
+ <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
+ <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
+
+<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>The 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>The 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 the WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
+
+<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
+
+<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">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="Debugging_certified_apps">Debugging certified apps</h3>
+
+<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, to debug certified apps on a real device:</p>
+
+<ul>
+ <li>the device must be running a development build of Firefox OS 1.2+</li>
+ <li>you must enable certified app debugging</li>
+</ul>
+
+<p>To enable certified app debugging, connect to the runtime, and then, in the menu, go to <code>Runtime &gt; Runtime Info</code>. From here, if you see <code>"DevTools restricted privileges: yes</code>", that means certified apps can't be debugged. 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 certified apps debugging (Firefox OS will restart).</li>
+ </ul>
+ </li>
+ <li>Simulator
+ <ul>
+ <li>The simulators come with certified 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 certified app debugging.</li>
+ </ul>
+ </li>
+</ul>
+
+<p>Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.</p>
+
+<h2 id="Monitoring_performance">Monitoring performance</h2>
+
+<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p>
+
+<ul>
+ <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li>
+ <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li>
+</ul>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you have any problems working with the WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<p> </p>
+
+<p> </p>