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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
Перед тим, як приступити до написання складнішого коду, поговорімо про його налагодження.
[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери та більшість інших середовищ розробки підтримують інструменти налагодження — спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відстежувати, що саме відбувається в коді.
[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери та більшість інших середовищ розробки підтримують інструменти налагодження, тобто спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відстежувати, що саме відбувається в коді.
Ми будемо використовувати браузер Chrome, тому що в нього достатньо можливостей для налагодження. В більшості інших браузерів процес буде схожим.
Expand DownExpand Up
@@ -44,17 +44,17 @@
## Точки зупинки (breakpoints)
Розберімось як працює код на [тестовій сторінці](debugging/index.html). У файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, непо коді.
Розберімось як працює код на [тестовій сторінці](debugging/index.html). У файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, нена код.
Вітаємо! Ви поставили точку зупинки. Поставте також точку зупинки на `8` рядку.
Номери рядків мають стати синього кольору. Ось що в результаті повинно вийти:
*Точка зупинки* — це місце в коді, де налагоджувач автоматично (тимчасово) зупинить виконання JavaScript.
*Точка зупинки* — це місце в коді, де налагоджувач автоматичнопоставить на паузу(тимчасово призупинить) виконання JavaScript.
Поки виконання(тимчасово) зупинене, ми можемо переглядати поточні значення змінних, виконувати команди в консолі тощо. Інакше кажучи, можемо налагоджувати (розробники інколи кажуть «дебажити», від слова «debug»).
Поки виконаннястоїть на паузі, ми можемо переглядати поточні значення змінних, виконувати команди в консолі тощо. Інакше кажучи, можемо налагоджувати (розробники інколи кажуть «дебажити», від слова «debug»).
В правій частині панелі видно всі точки зупинки. Коли виставлено багато таких точок, та ще й в різних файлах, цей список дозволяє ефективно ними керувати:
- Швидко переміщатися до будь-якої точки зупинки в коді – потрібно клацнути по ній в правій частині панелі.
Expand All
@@ -63,14 +63,14 @@
- ...тощо.
```smart header="Умовні точки зупинки"
Можна задати так звану *умовну* точку зупинки -- клацніть правою кнопкою миші по номеру рядкав коді, виберіть пункт "Edit breakpoint..." і пропишіть умову. Коли ця умова виконається, то виконання коду(тимчасово) зупиниться в цій точці зупинки.
Можна задати так звану *умовну* точку зупинки -- клацніть правою кнопкою миші по номеру рядказліва від коду, виберіть пункт "Edit breakpoint..." і пропишіть умову. Коли ця умова виконається, то виконання кодустане на паузу в цій точці зупинки.
Цей метод використовується, коли потрібно(тимчасово) зупинити виконання коду під час специфічних значень змінних або параметрів функції.
Цей метод використовується, коли потрібнопоставити на паузу виконання коду під час специфічних значень змінних або параметрів функції.
```
## Команда "debugger"
Виконання коду також можна(тимчасово) зупиняти командою `debugger` прямо всередині коду, ось так:
Виконання коду також можнаставити на паузу командою `debugger` прямо всередині коду, ось так:
```js
function hello(name) {
Expand DownExpand Up
@@ -103,7 +103,7 @@ function hello(name) {
2. **`Call Stack` показує послідовність викликів функцій.**
В нашому прикладі налагоджувач(тимчасово) зупинив виконання коду всередині функції `hello()`, яка була викликана з файлу `index.html` (там немає функції, тому виклик "anonymous" – анонімний).
В нашому прикладі налагоджувачпоставив на паузу виконання коду всередині функції `hello()`, яка була викликана з файлу `index.html` (там немає функції, тому виклик "anonymous" – анонімний).
Натиснувши на елемент списку (наприклад, на "anonymous"), налагоджувач перейде до відповідного коду, де було здійснено виклик.
3. **`Scope` показує поточні змінні.**
Expand All
@@ -120,41 +120,42 @@ function hello(name) {
Для цього є декілька кнопок, які знаходяться на панелі зверху праворуч. Давайте їх розглянемо.
: Відновлює виконання коду. Якщо більше немає точок зупинок, налагоджувач завершить свою роботу, а код буде виконуватися далі.
Ось що ми побачимо, коли натиснемо на цю кнопку:
Виконання коду відновилося, дійшло до іншої точки зупинки, всередині `say()` і налагоджувач знову(тимчасово) зупиниввиконання. Зверніть увагу на вкладку "Call Stack" праворуч: в списку з’явився ще один виклик. Ми тепер всередині функції `say()`.
Виконання коду відновилося, дійшло до іншої точки зупинки, всередині `say()` і налагоджувач зновупоставиввиконання на паузу. Зверніть увагу на вкладку "Call Stack" праворуч: в списку з’явився ще один виклик. Ми тепер всередині функції `say()`.
: Подібна до попередньої команди "Step",проте працює дещо по-іншому, якщо наступний вираз–- виклик функції (невбудована, як `alert`, анаша власна функція).
: Подібна до попередньої команди "Step",але поводиться трохи поіншому якщо наступний виразє викликом функції (невбудованої, якот`alert`, анашої власної функції).
Команда "Step" зайде в функцію і зупиниться на її першому рядку, тоді як "Step over" виконає всі вирази, які є в цій функції (включно з викликами вкладених функцій, такі як `alert()`).
Виконання(тимчасово) зупинитьсянанаступному рядку, коли завершиться функція.
Виконаннястаненапаузу одразу ж після закінчення тієї функції.
Це зручно, коли ми не хочемо досліджувати, що відбувається всередині функції.
Це зручно, коли ми не хочемо досліджувати, що відбувається всерединітієїфункції.
<span class="devtools" style="background-position:-4px -194px"></span> — "Step into": зробити крок.Швидка клавіша: `key:F11`.
: Подібна до "Step", але працює інакшеу випадку викликівасинхронних функцій. Якщо ви тільки почали вчити JavaScript, тоді можете проігнорувати цю різницю, тому що ми покищо не вчили асинхронних викликів.
<span class="devtools" style="background-position:-4px -194px"></span> — "Step into": зробити крок.Гаряча клавіша: `key:F11`.
: Подібна до "Step", але працює інакшепри викликахасинхронних функцій. Якщо ви тільки почали вчити JavaScript, тоді можете проігнорувати цю різницю, тому що ми поки-що не вчили асинхронних викликів.
На майбутнє просто майте на увазі, що команда "Step" ігнорує асинхронні дії, такі як `setTimeout` (відкладений виклик функції), які виконуються пізніше. Команда "Step into" заходить в їхній код, і очікує на них якщо потрібно. Можете поглянути в [документацію DevTools](https://developers.google.com/web/updates/2018/01/devtools#async), щоб побачити як це відбувається.
<span class="devtools" style="background-position:-32px -194px"></span> — "Step out": продовжити виконання до завершення поточної функції.Швидка клавіша: `key:Shift+F11`.
:Виконаннякодувідновиться і (тимчасово) зупинитися на останньому рядку поточної функції. Це зручно, коли ми випадковонатиснули кнопку<span class="devtools" style="background-position:-200px -190px"></span>,зайшовши у вкладений виклик, і хочемо якнайшвидше завершити його.
<span class="devtools" style="background-position:-32px -194px"></span> — "Step out": продовжити виконання до завершення поточної функції.Гаряча клавіша: `key:Shift+F11`.
:Продовжити виконаннякодуі поставити паузу на останньому рядку поточної функції. Це зручно, коли ми випадковозайшли у вкладений виклик натиснувши<span class="devtools" style="background-position:-200px -190px"></span>,але він нас не цікавить і хочемо якнайшвидше завершити його.
<span class="devtools" style="background-position:-61px -74px"></span> — активувати/деактивувати всі точки зупинки.
: Ця кнопка невпливає на виконання коду, вона лише дозволяє масово увімкнути/вимкнути точки зупинки.
: Ця кнопка непросуває нас по виконанню коду, вона лише дозволяє масово увімкнути/вимкнути точки зупинки.
: Коли ця кнопка активна і відкрито інструменти розробника, тоді скрипт автоматично (тимчасово) зупинить виконання, якщо трапиться якась помилка. Ми зможемо проаналізувати змінні й дослідити, що пішло не так. Отже, якщо наш скрипт аварійно завершує роботу, ми можемо відкрити інструменти розробника, активувати цю опцію і перезавантажити сторінку, щоб побачити де і за яких умов скрипт "вмирає", і які в цього деталі.
<span class="devtools" style="background-position:-90px -146px"></span> — активувати/деактивувати автоматичну паузу у випадку помилки.
: Коли ця кнопка активна і відкрито інструменти розробника, тоді браузер автоматично поставить виконання на паузу якщо трапиться якась помилка. Ми зможемо проаналізувати змінні й дослідити, що пішло не так. Отже, якщо наш скрипт аварійно завершує роботу, ми можемо відкрити інструменти розробника, активувати цю опцію і перезавантажити сторінку, щоб побачити де і за яких умов скрипт "вмирає", і які в цього деталі.
## Логування
Expand All
@@ -170,7 +171,7 @@ for (let i = 0; i < 5; i++) {
}
```
Звичайні користувачі не бачитимуть цієї інформації — вона в консолі. Щоб побачити її, відкрийте інструменти розробника і перейдіть на вкладку «Console», або натисніть клавішу `key:Esc`, якщо ви наіншій вкладці: це відкриє консоль знизу.
Звичайні користувачі не бачитимуть цієї інформації, бо вона в консолі. Щоб побачити її,абовідкрийте інструменти розробника і перейдіть на вкладку «Console», абожнатисніть клавішу `key:Esc`, якщо вихочете залишатисьнанаявній вкладці: це відкриє консоль знизу.
Якщо в нас достатньо логів в нашому коді, ми зможемо побачити що відбувається з нашими записами, без допомоги налагоджувача.
Коли виконання (тимчасово) зупинене, ми можемо налагоджувати (інколи кажуть "дебажити")–- досліджувати змінні й відстежувати виконання коду, щоб побачити, що пішло не так.
Коли виконання (тимчасово) зупинене, ми можемо налагоджувати (інколи кажуть "дебажити")-- досліджувати змінні й відстежувати виконання коду, щоб побачити, що пішло не так.
В інструментах розробника набагато більше опцій, ніж ми розглянули тут. Всю інформацію про інструменти розробника браузера Chrome можна прочитати в [їхній офіційній документації](https://developers.google.com/web/tools/chrome-devtools) (англійською).
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
