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
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,7 +48,7 @@
48
48
49
49
Ура! Вы поставили точку останова. А теперь щёлкните по цифре `8` на восьмой линии.
50
50
51
-
Вот что в итоге должно получиться (синим это те места, по которым вы должны щелкнуть):
51
+
Вот что в итоге должно получиться (синим это те места, по которым вы должны щёлкнуть):
52
52
53
53

54
54
@@ -57,15 +57,15 @@
57
57
Пока исполнение поставлено "на паузу", мы можем просмотреть текущие значения переменных, выполнить команды в консоли, другими словами, выполнить отладку кода.
58
58
59
59
В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:
60
-
- Быстро перейдите к точке останова в коде (нажав на нее на правой панели).
61
-
- Временно отключите точку останова, сняв с нее галочку.
62
-
- Удалите точку останова, щелкнув правой кнопкой мыши и выбрав Remove (Удалить).
60
+
- Быстро перейдите к точке останова в коде (нажав на неё на правой панели).
61
+
- Временно отключите точку останова, сняв с неё галочку.
62
+
- Удалите точку останова, щёлкнув правой кнопкой мыши и выбрав Remove (Удалить).
63
63
- ...и так далее.
64
64
65
65
```smart header="Условные точки останова"
66
66
*Щелчок правой кнопкой мыши* по номеру строки позволяет создать *условную* точку останова. Она сработает только в тот момент, когда вы задали выражение, и если оно истинно, то выполнение кода будет приостановлено.
67
67
68
-
Это удобно, когда нам нужно остановиться только для определенного значения переменной или для определенных параметров функции.
68
+
Это удобно, когда нам нужно остановиться только для определённого значения переменной или для определённых параметров функции.
69
69
```
70
70
71
71
## Команда Debugger
@@ -105,15 +105,15 @@ function hello(name) {
105
105
106
106
В текущий момент отладчик находится внутри вызова `hello()`, вызываемого скриптом в `index.html` (там нет функции, поэтому она называется “анонимной”).
107
107
108
-
Если вы нажмете на элемент стека (например, "anonymous"), отладчик перейдет к соответствующему коду, и нам представляется возможность его проанализировать.
108
+
Если вы нажмёте на элемент стека (например, "anonymous"), отладчик перейдёт к соответствующему коду, и нам представляется возможность его проанализировать.
109
109
110
110
3.**`Scope` показывает текущие переменные.**
111
111
112
112
`Local` показывает локальные переменные функций, а их значения подсвечены прямо в исходном коде.
113
113
114
114
В `Global` перечисляются глобальные переменные (то есть вне каких-либо функций).
115
115
116
-
Там также есть ключевое слово `this`, которое мы еще не изучали, но скоро сделаем это.
116
+
Там также есть ключевое слово `this`, которое мы ещё не изучали, но скоро сделаем это.
117
117
118
118
## Пошаговое выполнение скрипта
119
119
@@ -131,21 +131,21 @@ function hello(name) {
131
131
Выполнение кода возобновилось, дошло до другой точки останова внутри `say()`, и отладчик снова приостановил выполнение. Обратите внимание на пункт "Call stack" справа: в списке появился ещё один вызов. Сейчас мы внутри `say()`.
: Выполняет следующую инструкцию. Если мы нажмем на нее сейчас, появится `alert`.
134
+
: Выполняет следующую инструкцию. Если мы нажмём на неё сейчас, появится `alert`.
135
135
136
-
Нажатие на эту кнопку снова и снова приведет к пошаговому выполнению всех инструкций скрипта одного за другим.
136
+
Нажатие на эту кнопку снова и снова приведёт к пошаговому выполнению всех инструкций скрипта одного за другим.
137
137
138
138
<spanclass="devtools"style="background-position:-137px-76px"></span> – "Step over": выполнить следующую команду, но *не заходя в функцию*, быстрая клавиша `key:F10`.
139
-
: Подобно предыдущей команде "Step", но ведет себя по-другому, если следующая инкструкция является вызовом функции. То есть имеется ввиду: не встроенная, как `alert`, а наша собственная функция.
139
+
: Подобно предыдущей команде "Step", но ведёт себя по-другому, если следующая инкструкция является вызовом функции. То есть имеется ввиду: не встроенная, как `alert`, а наша собственная функция.
140
140
141
141
Команда "Step" переходит в неё и приостанавливает выполнение в первой строке, в то время как "Step over" незаметно выполняет вызов вложенной функции, пропуская внутренности функции.
142
142
143
143
Затем выполнение приостанавливается сразу после этой функции.
144
144
145
-
Это хорошо, если у нас нет цели видеть, что происходит внутри вызова функции.
145
+
Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.
: Это похоже на "Step", но ведет себя по-другому в случае асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, то можете не обращать внимания на разницу, так как у нас еще нет асинхронных вызовов.
148
+
: Это похоже на "Step", но ведёт себя по-другому в случае асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, то можете не обращать внимания на разницу, так как у нас ещё нет асинхронных вызовов.
149
149
150
150
На будущее просто помните, что команда "Step" игнорирует асинхронные действия, такие как `setTimeout` (вызов функции по расписанию), которые выполняются позже. "Step into" входит в их код, ожидая их, если это необходимо. См. [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) для получения более подробной информации.
151
151
@@ -161,7 +161,7 @@ function hello(name) {
161
161
```smart header="Continue to here"
162
162
Щелчок правой кнопкой мыши по строке кода открывает контекстное меню с отличной опцией под названием "Continue to here" ("продолжить до этого места").
163
163
164
-
Это удобно, когда мы хотим перейти на несколько шагов вперед к строке, но нам слишком лень устанавливать точку останова(breakpoint).
164
+
Это удобно, когда мы хотим перейти на несколько шагов вперёд к строке, но нам слишком лень устанавливать точку останова(breakpoint).
0 commit comments