Merge pull request #1 from RenCloud/dev_new_translations

Added Translation of 1-js/03-code-quality/01-debugging-chrome

Author: MartinEls

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -1,183 +1,183 @@
-# Debugging in Chrome
+# Debuggen in Chrome
 
-Before writing more complex code, let's talk about debugging.
+Bevor wir komplexeren Code schreiben, lass uns über Debuggen sprechen.
 
-All modern browsers and most other environments support "debugging" -- a special UI in developer tools that makes finding and fixing errors much easier.
+Alle modernen Browser und die meisten anderen Umgebungen unterstützen "debuggen" -- eine spezielle UI in den Entwicklerwerkzeugen, welches es einfacher macht Fehler zu finden und zu beheben.
 
-We'll be using Chrome here, because it's probably the most feature-rich in this aspect.
+Wir werden hier Chrome verwenden, da er wahrscheinlich den Funktionsreichsten in diesem Bereich hat.
 
-## The "sources" pane
+## Der "sources" Bereich
 
-Your Chrome version may look a little bit different, but it still should be obvious what's there.
+Deine Chrome Version sieht vielleicht etwas anders aus, aber es sollte trotzdem offensichtlich sein, was es gibt.
 
-- Open the [example page](debugging/index.html) in Chrome.
-- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
-- Select the `sources` pane.
+- Öffne die [Beispielseite](debugging/index.html) in Chrome.
+- Öffne die Entwicklerwerkzeugen mit `key:F12` (Mac: `key:Cmd+Opt+I`).
+- Öffne den `sources` Bereich.
 
-Here's what you should see if you are doing it for the first time:
+Folgendes sollten Sie sehen, wenn Sie dies zum ersten Mal machst:
 
 ![](chrome-open-sources.png)
 
-The toggler button <span class="devtools" style="background-position:-168px -76px"></span> opens the tab with files.
+Die Schaltfäche <span class="devtools" style="background-position:-168px -76px"></span> öffnet die Registerkarte mit den Dateien.
 
-Let's click it and select `index.html` and then `hello.js` in the tree view. Here's what should show up:
+Wir klicken darauf und wählen `index.html` aus und danach `hello.js` in der Baumansicht. Danach sollte es etwa so bei Ihnen aussehen:
 
 ![](chrome-tabs.png)
 
-Here we can see three zones:
+Hier können wir 3 Bereiche erkennen:
 
-1. The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
-2. The **Source zone** shows the source code.
-3. The **Information and control zone** is for debugging, we'll explore it soon.
+1. Der **Ressourcen Bereich** listet HTML, JavaScript, CSS und andere Dateien auf, einschließlich Bilder die in der Seite eingebunden.
+2. Der **Source Bereich** zeigt den Source Code.
+3. Der **Information und Kontroll Bereich** ist für das Debuggen, wir werden ihn bald erkunden.
 
-Now you could click the same toggler <span class="devtools" style="background-position:-200px -76px"></span> again to hide the resources list and give the code some space.
+Jetzt können Sie auf die selbe Schaltfläche <span class="devtools" style="background-position:-200px -76px"></span> erneut klicken um die Ressourcen Liste zu verstecken um dem Code platz zu schaffen.
 
 ## Console
 
-If we press `Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute.
+Wenn wir  `Esc` drücken, dann öffnet sich darunter eine Console. Wir können dort Befehle eingeben und mit  `key:Enter` ausführen.
 
-After a statement is executed, its result is shown below.
+Nachdem eine Anweisung ausgeführt wurde, wird das Ergebnis darunter angezeigt.
 
-For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`:
+Als Beispiel, hier `1+2` ergibt  `3`, und `hello("debugger")`  liefert nichts, daher ist das Ergebnis  `undefined`:
 
 ![](chrome-sources-console.png)
 
-## Breakpoints
+## Haltepunkte
 
-Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code.
+ Lassen Sie uns untersuchen, was innerhalb des Codes der [Beispielseite](debugging/index.html) vor sich geht. In `hello.js`, klicke auf die Zeilennummer  `4`. Ja, direkt auf die Zahl `4`, nicht im Code.
 
-Congratulations! You've set a breakpoint. Please also click on the number for line `8`.
+Herzlichen Glückwunsch! Sie haben einen Haltepunkt gesetzt. Bitte klicken Sie auch auf die Nummer für Zeile `8`.
 
-It should look like this (blue is where you should click):
+Es sollte wie folgt aussehen (Blau markiert an welcher stelle Sie klicken sollen):
 
 ![](chrome-sources-breakpoint.png)
 
-A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution.
+Ein *Haltepunkt* ist ein Punkt im Code an der der Debugger automatisch anhalten wird, während der JavaScript ausführung.
 
-While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
+Währen der Code angehalten ist können wir die aktuellen Variablen untersuchen, Befehle in der Console ausführen etc. In anderen Worten, wir können es debuggen.
 
-We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows to:
-- Quickly jump to the breakpoint in the code (by clicking on it in the right pane).
-- Temporarily disable the breakpoint by unchecking it.
-- Remove the breakpoint by right-clicking and selecting Remove.
-- ...And so on.
+Wir können immer eine Liste von Haltepunkten im rechten Bereich finden. Dies ist nützlich, wenn wir viele Haltepunkte in verschiedenen Dateien haben. Das erlaubt uns:
+- Schnell zu einem Haltepunkt im Code zu springen (durch klicken auf ihn im rechten Bereich).
+- Temporär einen Haltepunkt auszuschalten indem wir in abwählen.
+- Den Haltepunkt zu entfernen durch rechts klicken und entfernen auswählen .
+- ...Und so weiter.
 
 ```smart header="Conditional breakpoints"
-*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy.
+*Rechts-Klick* auf die Zeilennummer erlaubt es uns ein *bedingten* Haltepunkt. Er wird nur ausgelöst wenn der gegebene  Ausdruck wahr ist.
 
-That's handy when we need to stop only for a certain variable value or for certain function parameters.
+Das ist praktisch, wenn wir nur für einen bestimmten Variablenwert oder für bestimmte Funktionsparameter anhalten müssen.
 ```
 
-## Debugger command
+## Debugger Befehl
 
-We can also pause the code by using the `debugger` command, like this:
+Wir können auch den Code anhalten durch das nutzen des `debugger` Befehles,  so wie hier:
 
 ```js
 function hello(name) {
   let phrase = `Hello, ${name}!`;
 
 *!*
-  debugger;  // <-- the debugger stops here
+  debugger;  // <-- der Debugger hält hier an
 */!*
 
   say(phrase);
 }
 ```
 
-That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint.
+Das ist sehr praktisch, wenn wir uns in einem Code-Editor befinden und nicht zum Browser wechseln und das Script in den Entwicklertools nachschlagen wollen, um den Haltepunkt zu setzen.
 
 
-## Pause and look around
+## Pause und umhersehen 
 
-In our example, `hello()` is called during the page load, so the easiest way to activate the debugger is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac).
+In unserem Beispiel, `hello()`  wir währen des Seitenladens aufgerufen, so das der einfachste Weg ist um den Debugger zu aktivieren, das Neuladen der Seite ist. Also lass uns  `key:F5` drücken (Windows, Linux) oder `key:Cmd+R` (Mac).
 
-As the breakpoint is set, the execution pauses at the 4th line:
+Ist der Haltepunkt gesetzt, hält die Ausführung in der 4 Zeile an:
 
 ![](chrome-sources-debugger-pause.png)
 
-Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state:
+Bitte öffne die Dropdown-Listen für Informationen auf der rechten Seite  (markiert mit Pfeilen). Diese erlaubt Ihnen den aktuellen Code-Zustand zu untersuchen:
 
-1. **`Watch` -- shows current values for any expressions.**
+1. **`Watch` -- zeigt aktuelle Werte für beliebige Ausdrücke an.**
 
-    You can click the plus `+` and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution.
+    Sie können das Plus anklicken `+` und einen Ausdruck eingeben. Der Debugger wird den Wert zu jedem Moment anzeigen, er wird automatisch neu berechnet während die Ausführung läuft.
 
-2. **`Call Stack` -- shows the nested calls chain.**
+2. **`Call Stack` -- zeigt die verschachtelte Aufrufkette an.**
 
-    At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous").
+   Im aktuellen Moment ist der Debugger im `hello()` aufruf, aufgerufen durch ein Script in `index.html` (hier ist keine Funktion, daher wird es "anonym" aufgerufen).
 
-    If you click on a stack item, the debugger jumps to the corresponding code, and all its variables can be examined as well.
-3. **`Scope` -- current variables.**
+    Wenn Sie auf ein Stack Item klicken, springt der Debugger zum zugehörigen Code, und alle seine Variablen können ebenfalls untersucht werden.
+3. **`Scope` -- aktuelle Variablen.**
 
-    `Local` shows local function variables. You can also see their values highlighted right over the source.
+    `Local` zeigt lokale Funktionsvariablen. Sie können ihre Werte auch direkt über dem Code hervorgehoben sehen .
 
-    `Global` has global variables (out of any functions).
+    `Global` hat globale Variablen (außerhalb von allen Funktionen).
 
-    There's also `this` keyword there that we didn't study yet, but we'll do that soon.
+    Dort ist auch das `this` Schlüsselwort, welches wir bisher nicht kennengelernt haben, aber das werden wir bald tun.
 
-## Tracing the execution
+## Verfolgung der Ausführung
 
-Now it's time to *trace* the script.
+Nun ist es an der Zeit, das Skript zu verfolgen.
 
-There are buttons for it at the top of the right pane. Let's engage them.
+Hierfür gibt es Schaltflächen im oberen rechten Bereich. Nehmen wir diese ins Visier.
 
-<span class="devtools" style="background-position:-7px -76px"></span> -- continue the execution, hotkey `key:F8`.
-: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.
+<span class="devtools" style="background-position:-7px -76px"></span> -- die Ausführung weiter fortsetzen,  Kurztaste `key:F8`.
+: Setzt die Ausführung fort. Gibt es keine weiteren Haltepunkte, wird die Ausführung einfach fortgesetzt und der Debugger verliert die Kontrolle.
 
-    Here's what we can see after a click on it:
+Hier ist, was wir nach einem Klick darauf sehen können:
 
-    ![](chrome-sources-debugger-trace-1.png)
+![](chrome-sources-debugger-trace-1.png)
 
-    The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call stack" at the right. It has increased by one more call. We're inside `say()` now.
+    Die Ausführung wurde fortgesetzt, erreicht einen anderen Haltepunkt innerhalb von `say()` und hält dort an. Werfen Sie einen Blick auf den  "Call stack" auf der rechten Seite. Es hat sich um einen weiteren Anruf erhöht. Wir sind nun innerhalb von `say()`.
 
-<span class="devtools" style="background-position:-137px -76px"></span> -- make a step (run the next command), but *don't go into the function*, hotkey `key:F10`.
-: If we click it now, `alert` will be shown. The important thing is that `alert` can be any function, the execution "steps over it", skipping the function internals.
+<span class="devtools" style="background-position:-137px -76px"></span> -- einen Schritt tun (den nächsten Befehl ausführen), aber *nicht in die Funktion hinein gehen*, Kurztaste `key:F10`.
+: Wenn wir es jetzt anklicken, wird ein `alert` angezeigt. Das Wichtige dabei ist `alert` kann jede Funktion sein, die Ausführung "geht darüber hinweg", es überspringt den Funktionsinhalt.
 
-<span class="devtools" style="background-position:-72px -76px"></span> -- make a step, hotkey `key:F11`.
-: The same as the previous one, but "steps into" nested functions. Clicking this will step through all script actions one by one.
+<span class="devtools" style="background-position:-72px -76px"></span> -- einen Schritt tun, Kurztaste `key:F11`.
+: Wie der Vorherige, allerdings "hineingehen" in geschachtelte Funktionen . Wenn Sie darauf klicken, werden alle Skript-Aktionen nacheinander ausgeführt.
 
-<span class="devtools" style="background-position:-104px -76px"></span> -- continue the execution till the end of the current function, hotkey `key:Shift+F11`.
-: The execution would stop at the very last line of the current function. That's handy when we accidentally entered a nested call using <span class="devtools" style="background-position:-72px -76px"></span>, but it does not interest us, and we want to continue to its end as soon as possible.
+<span class="devtools" style="background-position:-104px -76px"></span> -- fortsetzen der Ausführung bis zum Ende der aktuellen Funktion, Kurztaste `key:Shift+F11`.
+: Die Ausführung stoppt an der aller letzten Zeile der aktuellen Funktion. Dies ist nett wenn man ausversehen eine verschachtelte Funktion aufgerufen hat <span class="devtools" style="background-position:-72px -76px"></span>, diese interessiert uns aber nicht, und wir wollen diese so schnell wie möglich wieder verlassen.
 
-<span class="devtools" style="background-position:-7px -28px"></span> -- enable/disable all breakpoints.
-: That button does not move the execution. Just a mass on/off for breakpoints.
+<span class="devtools" style="background-position:-7px -28px"></span> -- aktivieren/deaktivieren aller Haltepunkte.
+: Diese Schaltfläche bewegt die Ausführung nicht. Sie aktiviert/deaktiviert nur alle Haltepunkte.
 
-<span class="devtools" style="background-position:-264px -4px"></span> -- enable/disable automatic pause in case of an error.
-: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.
+<span class="devtools" style="background-position:-264px -4px"></span> -- aktivieren/deaktivieren der automatischen Pause im Falle eines Fehlers.
+: Ist dies aktiviert, und die Entwicklerwerkzeuge sind offen, ein Script Fehler führt zu einem automatischen Anhalten der Ausführung. Dann können wir die Variablen analysieren um zu sehen was falsch lief. Das heißt wenn unser Script mit einem Fehler stirbt, können wir den Debugger öffnen, diese Option aktivieren und die Seite neuladen um zu sehen an welcher Stelle es stirbt und was der Kontext an dieser Stelle ist.
 
 ```smart header="Continue to here"
-Right click on a line of code opens the context menu with a great option called "Continue to here".
+Rechtsklick auf die Zeile öffnet das Kontext Menu mit einer großartigen Option mit dem Namen: "Continue to here".
 
-That's handy when we want to move multiple steps forward, but we're too lazy to set a breakpoint.
+Dies ist Nützlich wenn wir mehrere Schritte vorwärts wollen, aber wir zu faul sind um Haltepunkte zu setzten.
 ```
 
 ## Logging
 
-To output something to console, there's `console.log` function.
+Um irgendetwas in der Console anzuzeigen , gibt es die `console.log` Funktion.
 
-For instance, this outputs values from `0` to `4` to console:
+Zum Beispiel gibt dies Werte von `0` bis `4` in der Console aus:
 
 ```js run
-// open console to see
+// öffne die Console um es zu sehen
 for (let i = 0; i < 5; i++) {
   console.log("value", i);
 }
 ```
 
-Regular users don't see that output, it is in the console. To see it, either open the Console tab of developer tools or press `key:Esc` while in another tab: that opens the console at the bottom.
+Normalerweise sieht der Nutzer diese Ausgabe nicht, sie erscheint in der Console. Um sie zu sehen, öffne entweder den Console Bereich in den Entwicklerwerkzeugen oder drücke `key:Esc` während Sie sich in einer anderen Registerkarte befinden: dies öffnet die Console an der Unterseite.
 
-If we have enough logging in our code, then we can see what's going on from the records, without the debugger.
+Wenn wir genügend Logging in unserem Code haben, dann können wir sehen, was in den Datensätzen vor sich geht, ohne den Debugger.
 
-## Summary
+## Übersicht
 
-As we can see, there are three main ways to pause a script:
-1. A breakpoint.
-2. The `debugger` statements.
-3. An error (if dev tools are open and the button <span class="devtools" style="background-position:-264px -4px"></span> is "on")
+Wie wir sehen können, gibt es drei Hauptmöglichkeiten ein Script zu unterbrechen:
+1. Ein Haltepunkt.
+2. Das `debugger` Statement.
+3. Ein Fehler (wenn die Entwicklerwerkzeuge geöffnet sind und die Schaltfläche <span class="devtools" style="background-position:-264px -4px"></span> auf "on" ist)
 
-Then we can examine variables and step on to see where the execution goes wrong.
+Dann können wir Variablen untersuchen und weitermachen, um zu sehen, wo die Ausführung falsch läuft.
 
-There are many more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>.
+Es gibt noch viel mehr Möglichkeiten in den Entwicklerwerkzeugen als hier beschrieben sind. Das vollständige Handbuch finden Sie unter <https://developers.google.com/web/tools/chrome-devtools>.
 
-The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools.
+Die Informationen aus diesem Kapitel reichen aus, um mit dem Debuggen zu beginnen, aber später, besonders wenn Sie viel Browserarbeit leisten, gehen Sie bitte dorthin und schauen Sie sich die erweiterten Funktionen der Entwicklerwerkzeuge an.
 
-Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click as well!
+Oh, und auch Sie können an verschiedenen Stellen der Entwicklungswerkzeuge klicken und einfach sehen, was angezeigt wird. Das ist wahrscheinlich der schnellste Weg, um Entwicklungswerkzeuge zu erlernen. Vergiss auch den Rechtsklick nicht!

README.md

@@ -99,7 +99,7 @@ JavaScript specials
 
 ## Code quality
 
-Debugging in Chrome
+[Debuggen in Chrome](1-js/03-code-quality/01-debugging-chrome/article.md)
 
 Coding style