diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md
index 98f1a74cf..62548f8a1 100644
--- a/1-js/03-code-quality/01-debugging-chrome/article.md
+++ b/1-js/03-code-quality/01-debugging-chrome/article.md
@@ -2,7 +2,7 @@
Перед тим, як приступити до написання складнішого коду, поговорімо про його налагодження.
-[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери та більшість інших середовищ розробки підтримують інструменти налагодження — спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відстежувати, що саме відбувається в коді.
+[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери та більшість інших середовищ розробки підтримують інструменти налагодження, тобто спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відстежувати, що саме відбувається в коді.
Ми будемо використовувати браузер Chrome, тому що в нього достатньо можливостей для налагодження. В більшості інших браузерів процес буде схожим.
@@ -44,7 +44,7 @@
## Точки зупинки (breakpoints)
-Розберімось як працює код на [тестовій сторінці](debugging/index.html). У файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, не по коді.
+Розберімось як працює код на [тестовій сторінці](debugging/index.html). У файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, не на код.
Вітаємо! Ви поставили точку зупинки. Поставте також точку зупинки на `8` рядку.
@@ -52,9 +52,9 @@
-*Точка зупинки* — це місце в коді, де налагоджувач автоматично (тимчасово) зупинить виконання JavaScript.
+*Точка зупинки* — це місце в коді, де налагоджувач автоматично поставить на паузу (тимчасово призупинить) виконання JavaScript.
-Поки виконання (тимчасово) зупинене, ми можемо переглядати поточні значення змінних, виконувати команди в консолі тощо. Інакше кажучи, можемо налагоджувати (розробники інколи кажуть «дебажити», від слова «debug»).
+Поки виконання стоїть на паузі, ми можемо переглядати поточні значення змінних, виконувати команди в консолі тощо. Інакше кажучи, можемо налагоджувати (розробники інколи кажуть «дебажити», від слова «debug»).
В правій частині панелі видно всі точки зупинки. Коли виставлено багато таких точок, та ще й в різних файлах, цей список дозволяє ефективно ними керувати:
- Швидко переміщатися до будь-якої точки зупинки в коді – потрібно клацнути по ній в правій частині панелі.
@@ -63,14 +63,14 @@
- ...тощо.
```smart header="Умовні точки зупинки"
-Можна задати так звану *умовну* точку зупинки -- клацніть правою кнопкою миші по номеру рядка в коді, виберіть пункт "Edit breakpoint..." і пропишіть умову. Коли ця умова виконається, то виконання коду (тимчасово) зупиниться в цій точці зупинки.
+Можна задати так звану *умовну* точку зупинки -- клацніть правою кнопкою миші по номеру рядка зліва від коду, виберіть пункт "Edit breakpoint..." і пропишіть умову. Коли ця умова виконається, то виконання коду стане на паузу в цій точці зупинки.
-Цей метод використовується, коли потрібно (тимчасово) зупинити виконання коду під час специфічних значень змінних або параметрів функції.
+Цей метод використовується, коли потрібно поставити на паузу виконання коду під час специфічних значень змінних або параметрів функції.
```
## Команда "debugger"
-Виконання коду також можна (тимчасово) зупиняти командою `debugger` прямо всередині коду, ось так:
+Виконання коду також можна ставити на паузу командою `debugger` прямо всередині коду, ось так:
```js
function hello(name) {
@@ -103,7 +103,7 @@ function hello(name) {
2. **`Call Stack` показує послідовність викликів функцій.**
- В нашому прикладі налагоджувач (тимчасово) зупинив виконання коду всередині функції `hello()`, яка була викликана з файлу `index.html` (там немає функції, тому виклик "anonymous" – анонімний).
+ В нашому прикладі налагоджувач поставив на паузу виконання коду всередині функції `hello()`, яка була викликана з файлу `index.html` (там немає функції, тому виклик "anonymous" – анонімний).
Натиснувши на елемент списку (наприклад, на "anonymous"), налагоджувач перейде до відповідного коду, де було здійснено виклик.
3. **`Scope` показує поточні змінні.**
@@ -120,41 +120,42 @@ function hello(name) {
Для цього є декілька кнопок, які знаходяться на панелі зверху праворуч. Давайте їх розглянемо.
- — "Resume": продовжити виконання. Швидка клавіша: `key:F8`.
+ — "Resume": продовжити виконання. Гаряча клавіша: `key:F8`.
: Відновлює виконання коду. Якщо більше немає точок зупинок, налагоджувач завершить свою роботу, а код буде виконуватися далі.
Ось що ми побачимо, коли натиснемо на цю кнопку:
- Виконання коду відновилося, дійшло до іншої точки зупинки, всередині `say()` і налагоджувач знову (тимчасово) зупинив виконання. Зверніть увагу на вкладку "Call Stack" праворуч: в списку з’явився ще один виклик. Ми тепер всередині функції `say()`.
+ Виконання коду відновилося, дійшло до іншої точки зупинки, всередині `say()` і налагоджувач знову поставив виконання на паузу. Зверніть увагу на вкладку "Call Stack" праворуч: в списку з’явився ще один виклик. Ми тепер всередині функції `say()`.
- — "Step": виконати наступну команду. Швидка клавіша: `key:F9`.
+ — "Step": виконати наступну команду. Гаряча клавіша: `key:F9`.
: Якщо ми натиснемо на неї – виконається функція `alert`.
Натискаючи цю кнопку раз за разом, всі вирази будуть виконуватися покроково.
- -- "Step over": виконати наступну команду, *не заходячи в функцію*. Швидка клавіша: `key:F10`.
-: Подібна до попередньої команди "Step", проте працює дещо по-іншому, якщо наступний вираз –- виклик функції (не вбудована, як `alert`, а наша власна функція).
+ -- "Step over": виконати наступну команду, *не заходячи в функцію*. Гаряча клавіша: `key:F10`.
+: Подібна до попередньої команди "Step", але поводиться трохи по іншому якщо наступний вираз є викликом функції (не вбудованої, як от `alert`, а нашої власної функції).
Команда "Step" зайде в функцію і зупиниться на її першому рядку, тоді як "Step over" виконає всі вирази, які є в цій функції (включно з викликами вкладених функцій, такі як `alert()`).
- Виконання (тимчасово) зупиниться на наступному рядку, коли завершиться функція.
+ Виконання стане на паузу одразу ж після закінчення тієї функції.
- Це зручно, коли ми не хочемо досліджувати, що відбувається всередині функції.
+ Це зручно, коли ми не хочемо досліджувати, що відбувається всередині тієї функції.
- — "Step into": зробити крок. Швидка клавіша: `key:F11`.
-: Подібна до "Step", але працює інакше у випадку викликів асинхронних функцій. Якщо ви тільки почали вчити JavaScript, тоді можете проігнорувати цю різницю, тому що ми поки що не вчили асинхронних викликів.
+ — "Step into": зробити крок. Гаряча клавіша: `key:F11`.
+: Подібна до "Step", але працює інакше при викликах асинхронних функцій. Якщо ви тільки почали вчити JavaScript, тоді можете проігнорувати цю різницю, тому що ми поки-що не вчили асинхронних викликів.
На майбутнє просто майте на увазі, що команда "Step" ігнорує асинхронні дії, такі як `setTimeout` (відкладений виклик функції), які виконуються пізніше. Команда "Step into" заходить в їхній код, і очікує на них якщо потрібно. Можете поглянути в [документацію DevTools](https://developers.google.com/web/updates/2018/01/devtools#async), щоб побачити як це відбувається.
- — "Step out": продовжити виконання до завершення поточної функції. Швидка клавіша: `key:Shift+F11`.
-: Виконання коду відновиться і (тимчасово) зупинитися на останньому рядку поточної функції. Це зручно, коли ми випадково натиснули кнопку , зайшовши у вкладений виклик, і хочемо якнайшвидше завершити його.
+ — "Step out": продовжити виконання до завершення поточної функції. Гаряча клавіша: `key:Shift+F11`.
+: Продовжити виконання коду і поставити паузу на останньому рядку поточної функції. Це зручно, коли ми випадково зайшли у вкладений виклик натиснувши , але він нас не цікавить і хочемо якнайшвидше завершити його.
— активувати/деактивувати всі точки зупинки.
-: Ця кнопка не впливає на виконання коду, вона лише дозволяє масово увімкнути/вимкнути точки зупинки.
+: Ця кнопка не просуває нас по виконанню коду, вона лише дозволяє масово увімкнути/вимкнути точки зупинки.
-: Коли ця кнопка активна і відкрито інструменти розробника, тоді скрипт автоматично (тимчасово) зупинить виконання, якщо трапиться якась помилка. Ми зможемо проаналізувати змінні й дослідити, що пішло не так. Отже, якщо наш скрипт аварійно завершує роботу, ми можемо відкрити інструменти розробника, активувати цю опцію і перезавантажити сторінку, щоб побачити де і за яких умов скрипт "вмирає", і які в цього деталі.
+ — активувати/деактивувати автоматичну паузу у випадку помилки.
+: Коли ця кнопка активна і відкрито інструменти розробника, тоді браузер автоматично поставить виконання на паузу якщо трапиться якась помилка. Ми зможемо проаналізувати змінні й дослідити, що пішло не так. Отже, якщо наш скрипт аварійно завершує роботу, ми можемо відкрити інструменти розробника, активувати цю опцію і перезавантажити сторінку, щоб побачити де і за яких умов скрипт "вмирає", і які в цього деталі.
## Логування
@@ -170,7 +171,7 @@ for (let i = 0; i < 5; i++) {
}
```
-Звичайні користувачі не бачитимуть цієї інформації — вона в консолі. Щоб побачити її, відкрийте інструменти розробника і перейдіть на вкладку «Console», або натисніть клавішу `key:Esc`, якщо ви на іншій вкладці: це відкриє консоль знизу.
+Звичайні користувачі не бачитимуть цієї інформації, бо вона в консолі. Щоб побачити її, або відкрийте інструменти розробника і перейдіть на вкладку «Console», або ж натисніть клавішу `key:Esc`, якщо ви хочете залишатись на наявній вкладці: це відкриє консоль знизу.
Якщо в нас достатньо логів в нашому коді, ми зможемо побачити що відбувається з нашими записами, без допомоги налагоджувача.
@@ -181,7 +182,7 @@ for (let i = 0; i < 5; i++) {
2. Інструкція `debugger`.
3. Помилка (якщо активовано кнопку в інструментах розробника).
-Коли виконання (тимчасово) зупинене, ми можемо налагоджувати (інколи кажуть "дебажити") –- досліджувати змінні й відстежувати виконання коду, щоб побачити, що пішло не так.
+Коли виконання (тимчасово) зупинене, ми можемо налагоджувати (інколи кажуть "дебажити") -- досліджувати змінні й відстежувати виконання коду, щоб побачити, що пішло не так.
В інструментах розробника набагато більше опцій, ніж ми розглянули тут. Всю інформацію про інструменти розробника браузера Chrome можна прочитати в [їхній офіційній документації](https://developers.google.com/web/tools/chrome-devtools) (англійською).
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
index a4548c225..42507b2df 100644
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file