Skip to content

Commit 8b1acfe

Browse files
Update article.md
Modify terms based on the official document. - https://developers.google.com/web/tools/chrome-devtools/
1 parent 39cc399 commit 8b1acfe

File tree

1 file changed

+8
-8
lines changed
  • 1-js/03-code-quality/01-debugging-chrome

1 file changed

+8
-8
lines changed

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ Before writing more complex code, let's talk about debugging.
66

77
We'll be using Chrome here, because it has enough features, most other browsers have a similar process`.
88

9-
## The "Sources" pane
9+
## The "Sources" panel
1010

1111
Your Chrome version may look a little bit different, but it still should be obvious what's there.
1212

1313
- Open the [example page](debugging/index.html) in Chrome.
1414
- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
15-
- Select the `Sources` pane.
15+
- Select the `Sources` panel.
1616

1717
Here's what you should see if you are doing it for the first time:
1818

@@ -56,8 +56,8 @@ A *breakpoint* is a point of code where the debugger will automatically pause th
5656

5757
While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
5858

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).
6161
- Temporarily disable the breakpoint by unchecking it.
6262
- Remove the breakpoint by right-clicking and selecting Remove.
6363
- ...And so on.
@@ -118,7 +118,7 @@ Please open the informational dropdowns to the right (labeled with arrows). They
118118

119119
Now it's time to *trace* the script.
120120

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.
122122

123123
<span class="devtools" style="background-position:-7px -76px"></span> -- continue the execution, hotkey `key:F8`.
124124
: 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.
127127

128128
![](chrome-sources-debugger-trace-1.svg)
129129

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.
131131

132132
<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`.
133133
: 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:
159159
```js run
160160
// open console to see
161161
for (let i = 0; i < 5; i++) {
162-
console.log("значение", i);
162+
console.log("value,", i);
163163
}
164164
```
165165

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.
167167

168168
If we have enough logging in our code, then we can see what's going on from the records, without the debugger.
169169

0 commit comments

Comments
 (0)