You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/01-debugging-chrome/article.md
+18-18
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,11 @@ Bevor wir komplexeren Code schreiben, lass uns über Debuggen sprechen.
4
4
5
5
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.
6
6
7
-
Wir werden hier Chrome verwenden, da er wahrscheinlich das Funktionsreichste in diesem Bereich ist.
7
+
Wir werden hier Chrome verwenden, da er wahrscheinlich den Funktionsreichsten in diesem Bereich hat.
8
8
9
9
## Der "sources" Bereich
10
10
11
-
Deine Chrome Version sieht vielleicht etwas anders aus, aber es sollte trotzdem offensichtlich sein, was da ist.
11
+
Deine Chrome Version sieht vielleicht etwas anders aus, aber es sollte trotzdem offensichtlich sein, was es gibt.
12
12
13
13
- Öffne die [Beispielseite](debugging/index.html) in Chrome.
14
14
- Öffne die Entwicklerwerkzeugen mit `key:F12` (Mac: `key:Cmd+Opt+I`).
@@ -20,7 +20,7 @@ Folgendes sollten Sie sehen, wenn Sie dies zum ersten Mal machst:
20
20
21
21
Die Schaltfäche <spanclass="devtools"style="background-position:-168px-76px"></span> öffnet die Registerkarte mit den Dateien.
22
22
23
-
Wir klicken darauf und wählen `index.html` aus und danach `hello.js` in der Baumansicht. Hier ist, was erscheinen sollte:
23
+
Wir klicken darauf und wählen `index.html` aus und danach `hello.js` in der Baumansicht. Danach sollte es etwa so bei Ihnen aussehen:
24
24
25
25

26
26
@@ -30,31 +30,31 @@ Hier können wir 3 Bereiche erkennen:
30
30
2. Der **Source Bereich** zeigt den Source Code.
31
31
3. Der **Information und Kontroll Bereich** ist für das Debuggen, wir werden ihn bald erkunden.
32
32
33
-
Jetzt können Sie auf die selbe Schaltfläche <spanclass="devtools"style="background-position:-200px-76px"></span> erneut klicken um die Ressourcen Liste zu verstecken und dem Code platz zu schaffen.
33
+
Jetzt können Sie auf die selbe Schaltfläche <spanclass="devtools"style="background-position:-200px-76px"></span> erneut klicken um die Ressourcen Liste zu verstecken um dem Code platz zu schaffen.
34
34
35
35
## Console
36
36
37
37
Wenn wir `Esc` drücken, dann öffnet sich darunter eine Console. Wir können dort Befehle eingeben und mit `key:Enter` ausführen.
38
38
39
39
Nachdem eine Anweisung ausgeführt wurde, wird das Ergebnis darunter angezeigt.
40
40
41
-
Als Beispiel, hier `1+2` ergibt `3`, und `hello("debugger")` liefert nichts, sodass das Ergebnis `undefined` ist:
41
+
Als Beispiel, hier `1+2` ergibt `3`, und `hello("debugger")` liefert nichts, daher ist das Ergebnis `undefined`:
42
42
43
43

44
44
45
45
## Haltepunkte
46
46
47
-
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.
47
+
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.
48
48
49
-
Herzlichen Glückwunsch! Sie haben einen Haltepunkt gesetzt. Bitte klicken sie auch auf die Nummer für Zeile `8`.
49
+
Herzlichen Glückwunsch! Sie haben einen Haltepunkt gesetzt. Bitte klicken Sie auch auf die Nummer für Zeile `8`.
50
50
51
-
Es sollte wie folgt aussehen (Blau markiert an welcher stelle sie klicken sollen):
51
+
Es sollte wie folgt aussehen (Blau markiert an welcher stelle Sie klicken sollen):
52
52
53
53

54
54
55
-
Ein*Haltepunkt* ist ein Punkt im Code an der der Debugger automatisch anhalten wird, während der JavaScript ausführung.
55
+
Ein*Haltepunkt* ist ein Punkt im Code an der der Debugger automatisch anhalten wird, während der JavaScript ausführung.
56
56
57
-
Währen der Code angehalten ist können wir die aktuellen Variablen untersuchen, ausführen Befehle in der Console etc. In anderen Worten, wir können es debuggen.
57
+
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.
58
58
59
59
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:
60
60
- Schnell zu einem Haltepunkt im Code zu springen (durch klicken auf ihn im rechten Bereich).
@@ -99,7 +99,7 @@ Bitte öffne die Dropdown-Listen für Informationen auf der rechten Seite (mark
99
99
100
100
1.**`Watch` -- zeigt aktuelle Werte für beliebige Ausdrücke an.**
101
101
102
-
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.
102
+
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.
103
103
104
104
2.**`Call Stack` -- zeigt die verschachtelte Aufrufkette an.**
105
105
@@ -108,15 +108,15 @@ Bitte öffne die Dropdown-Listen für Informationen auf der rechten Seite (mark
108
108
Wenn Sie auf ein Stack Item klicken, springt der Debugger zum zugehörigen Code, und alle seine Variablen können ebenfalls untersucht werden.
109
109
3.**`Scope` -- aktuelle Variablen.**
110
110
111
-
`Local` zeigt lokale funktions Variablen. Sie können ihre Werte auch direkt über dem Code hervorgehoben sehen .
111
+
`Local` zeigt lokale Funktionsvariablen. Sie können ihre Werte auch direkt über dem Code hervorgehoben sehen .
112
112
113
113
`Global` hat globale Variablen (außerhalb von allen Funktionen).
114
114
115
115
Dort ist auch das `this` Schlüsselwort, welches wir bisher nicht kennengelernt haben, aber das werden wir bald tun.
116
116
117
117
## Verfolgung der Ausführung
118
118
119
-
Nun ist es an der Zeit, das Skript zu verfolgen (*trace*).
119
+
Nun ist es an der Zeit, das Skript zu verfolgen.
120
120
121
121
Hierfür gibt es Schaltflächen im oberen rechten Bereich. Nehmen wir diese ins Visier.
122
122
@@ -130,7 +130,7 @@ Hier ist, was wir nach einem Klick darauf sehen können:
130
130
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()`.
131
131
132
132
<spanclass="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`.
133
-
: Wenn wir es jetzt anklicken, ein `alert` wird angezeigt. Das Wichtige dabei ist `alert` kann jede Funktion sein, die Ausführung "geht darüber hinweg", es überspringt den Funktionsinhalt.
133
+
: 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.
134
134
135
135
<spanclass="devtools"style="background-position:-72px-76px"></span> -- einen Schritt tun, Kurztaste `key:F11`.
136
136
: Wie der Vorherige, allerdings "hineingehen" in geschachtelte Funktionen . Wenn Sie darauf klicken, werden alle Skript-Aktionen nacheinander ausgeführt.
@@ -142,7 +142,7 @@ Hier ist, was wir nach einem Klick darauf sehen können:
142
142
: Diese Schaltfläche bewegt die Ausführung nicht. Sie aktiviert/deaktiviert nur alle Haltepunkte.
143
143
144
144
<spanclass="devtools"style="background-position:-264px-4px"></span> -- aktivieren/deaktivieren der automatischen Pause im Falle eines Fehlers.
145
-
: 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..
145
+
: 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.
146
146
147
147
```smart header="Continue to here"
148
148
Rechtsklick auf die Zeile öffnet das Kontext Menu mit einer großartigen Option mit dem Namen: "Continue to here".
@@ -163,9 +163,9 @@ for (let i = 0; i < 5; i++) {
163
163
}
164
164
```
165
165
166
-
Normalerweise sieht der Nutzer diese Ausgabe nicht, er ist in der Console. Um ihn 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.
166
+
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.
167
167
168
-
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..
168
+
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.
169
169
170
170
## Übersicht
171
171
@@ -174,7 +174,7 @@ Wie wir sehen können, gibt es drei Hauptmöglichkeiten ein Script zu unterbrech
174
174
2. Das `debugger` Statement.
175
175
3. Ein Fehler (wenn die Entwicklerwerkzeuge geöffnet sind und die Schaltfläche <spanclass="devtools"style="background-position:-264px-4px"></span> auf "on" ist)
176
176
177
-
Dann können wir Variablen untersuchen und weitermachen, um zu sehen, wo die Ausführung falsch läuft.
177
+
Dann können wir Variablen untersuchen und weitermachen, um zu sehen, wo die Ausführung falsch läuft.
178
178
179
179
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>.
0 commit comments