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
+8-8
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,13 @@ Before writing more complex code, let's talk about debugging.
6
6
7
7
We'll be using Chrome here, because it has enough features, most other browsers have a similar process`.
8
8
9
-
## The "Sources" pane
9
+
## The "Sources" panel
10
10
11
11
Your Chrome version may look a little bit different, but it still should be obvious what's there.
12
12
13
13
- Open the [example page](debugging/index.html) in Chrome.
14
14
- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
15
-
- Select the `Sources`pane.
15
+
- Select the `Sources`panel.
16
16
17
17
Here's what you should see if you are doing it for the first time:
18
18
@@ -56,8 +56,8 @@ A *breakpoint* is a point of code where the debugger will automatically pause th
56
56
57
57
While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
58
58
59
-
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 us to:
60
-
- Quickly jump to the breakpoint in the code (by clicking on it in the right pane).
59
+
We can always find a list of breakpoints in the right panel. That's useful when we have many breakpoints in various files. It allows us to:
60
+
- Quickly jump to the breakpoint in the code (by clicking on it in the right panel).
61
61
- Temporarily disable the breakpoint by unchecking it.
62
62
- Remove the breakpoint by right-clicking and selecting Remove.
63
63
- ...And so on.
@@ -118,7 +118,7 @@ Please open the informational dropdowns to the right (labeled with arrows). They
118
118
119
119
Now it's time to *trace* the script.
120
120
121
-
There are buttons for it at the top of the right pane. Let's engage them.
121
+
There are buttons for it at the top of the right panel. Let's engage them.
122
122
123
123
<spanclass="devtools"style="background-position:-7px-76px"></span> -- continue the execution, hotkey `key:F8`.
124
124
: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.
@@ -127,7 +127,7 @@ There are buttons for it at the top of the right pane. Let's engage them.
127
127
128
128

129
129
130
-
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.
130
+
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.
131
131
132
132
<spanclass="devtools"style="background-position:-137px-76px"></span> -- make a step (run the next command), but *don't go into the function*, hotkey `key:F10`.
133
133
: 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.
@@ -159,11 +159,11 @@ For instance, this outputs values from `0` to `4` to console:
159
159
```js run
160
160
// open console to see
161
161
for (let i =0; i <5; i++) {
162
-
console.log("значение", i);
162
+
console.log("value,", i);
163
163
}
164
164
```
165
165
166
-
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.
166
+
Regular users don't see that output, it is in the console. To see it, either open the Console panel of developer tools or press `key:Esc` while in another tab: that opens the console at the bottom.
167
167
168
168
If we have enough logging in our code, then we can see what's going on from the records, without the debugger.
0 commit comments