initial commit

3 files changed, 65 insertions, 0 deletions

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>