Налагодження в браузері

Перед тим, як приступити до написання складнішого коду, поговорімо про його налагодження.

Налагодження — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери та більшість інших середовищ розробки підтримують інструменти налагодження — спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відстежувати, що саме відбувається в коді.

Ми будемо використовувати браузер Chrome, тому що в нього достатньо можливостей для налагодження. В більшості інших браузерів процес буде схожим.

Вкладка “Sources” (“вихідний код”)

Ваш браузер Chrome може виглядати трохи інакше в залежності від версії, але різниця буде не суттєвою.

• В браузері Chrome, відкрийте тестову сторінку.
• Відкрийте інструменти розробника, натиснувши клавішу F12 (або Cmd+Opt+I на Mac).
• Виберіть вкладку Sources.

У вас буде схоже вікно:

Кнопка-перемикач ліворуч відкриває панель з файлами.

Натисніть на неї та виберіть файл hello.js. Ось як буде виглядати вкладка Sources:

Цей інтерфейс складається з трьох частин:

1. На панелі Навігатор файлів (File Navigator) показані файли HTML, JavaScript, CSS та інші файли, включно із зображеннями, які використовуються на сторінці. Також тут можуть бути файли від розширень Chrome.
2. Панель Редагування коду (Code Editor) показує вихідний код.
3. Панель Налагодження JavaScript (JavaScript Debugging) використовується для налагодження, ми повернемося до цього пізніше.

Можете знову натиснути на ту саму кнопку , щоб закрити панель і звільнити місце для коду.

Консоль

Якщо натиснути клавішу Esc, в нижній частині екрана відкриється консоль. Туди можна вводити команди і їх виконувати, натиснувши клавішу Enter.

Нижче показується результат виконання команд.

Наприклад, результатом 1 + 2 буде 3, а ось інструкція hello("debugger") нічого не повертає, тому результат буде undefined:

Точки зупинки (breakpoints)

Розберімось як працює код на тестовій сторінці. У файлі hello.js, натисніть на рядок номер 4. Так, на саму цифру, не по коді.

Вітаємо! Ви поставили точку зупинки. Поставте також точку зупинки на 8 рядку.

Номери рядків мають стати синього кольору. Ось що в результаті повинно вийти:

Точка зупинки — це місце в коді, де налагоджувач автоматично (тимчасово) зупинить виконання JavaScript.

Поки виконання (тимчасово) зупинене, ми можемо переглядати поточні значення змінних, виконувати команди в консолі тощо. Інакше кажучи, можемо налагоджувати (розробники інколи кажуть «дебажити», від слова «debug»).

В правій частині панелі видно всі точки зупинки. Коли виставлено багато таких точок, та ще й в різних файлах, цей список дозволяє ефективно ними керувати:

• Швидко переміщатися до будь-якої точки зупинки в коді – потрібно клацнути по ній в правій частині панелі.
• Тимчасово вимкнути точку зупинки, знявши виділення.
• Видалити точку – потрібно клацнувши по ній правою кнопкою миші й вибрати «Remove breakpoint» (Видалити точку зупинки).
• …тощо.

Команда “debugger”

Виконання коду також можна (тимчасово) зупиняти командою debugger прямо всередині коду, ось так:

function hello(name) {
  let phrase = `Привіт, ${name}!`;

  debugger;  // <-- тут зупиниться налагоджувач

  say(phrase);
}

Ця команда працює лише тоді, коли інструменти розробника відкриті, інакше браузер її ігнорує.

Зупиніться й озирніться

В нашому прикладі, функція hello() викликається під час завантаження сторінки, отже, найшвидшим способом активувати налагоджувач (після того, як ми поставили точку зупинки) – це перезавантажити сторінку. Тому просто натисніть F5 (Windows, Linux) чи Cmd+R (на Mac).

Оскільки ми поставили точку зупинки, виконання коду (тимчасово) зупинитися на 4-му рядку:

Щоб зрозуміти, що відбувається в коді, натисніть на стрілки справа. Можна виділити три основні блоки:

1. Watch показує поточні значення виразів.

   Можете натиснути на + і ввести якийсь вираз. В процесі виконання, налагоджувач автоматично перераховуватиме і показуватиме його значення.

2. Call Stack показує послідовність викликів функцій.

   В нашому прикладі налагоджувач (тимчасово) зупинив виконання коду всередині функції hello(), яка була викликана з файлу index.html (там немає функції, тому виклик “anonymous” – анонімний).

   Натиснувши на елемент списку (наприклад, на “anonymous”), налагоджувач перейде до відповідного коду, де було здійснено виклик.

3. Scope показує поточні змінні.

   В Local показуються локальні змінні функції, а їх значення підсвічуються в вихідному коді.

   В Global показуються глобальні змінні (тобто ті, які оголошені поза функціями).

   Зверніть увагу, що під час зміни викликів функцій (з блоку “Call Stack”), поточні змінні теж міняються. Тут ще є ключове слово this, поки що не звертайте на нього уваги — ми вивчимо його пізніше.

Відстежування виконання коду

Настав час відстежувати (trace) скрипт.

Для цього є декілька кнопок, які знаходяться на панелі зверху праворуч. Давайте їх розглянемо.

 — “Resume”: продовжити виконання. Швидка клавіша: F8.

Відновлює виконання коду. Якщо більше немає точок зупинок, налагоджувач завершить свою роботу, а код буде виконуватися далі.

Ось що ми побачимо, коли натиснемо на цю кнопку:

Виконання коду відновилося, дійшло до іншої точки зупинки, всередині say() і налагоджувач знову (тимчасово) зупинив виконання. Зверніть увагу на вкладку “Call Stack” праворуч: в списку з’явився ще один виклик. Ми тепер всередині функції say().

 — “Step”: виконати наступну команду. Швидка клавіша: F9.

Якщо ми натиснемо на неї – виконається функція alert.

Натискаючи цю кнопку раз за разом, всі вирази будуть виконуватися покроково.

– “Step over”: виконати наступну команду, не заходячи в функцію. Швидка клавіша: F10.

Подібна до попередньої команди “Step”, проте працює дещо по-іншому, якщо наступний вираз –- виклик функції (не вбудована, як alert, а наша власна функція).

Команда “Step” зайде в функцію і зупиниться на її першому рядку, тоді як “Step over” виконає всі вирази, які є в цій функції (включно з викликами вкладених функцій, такі як alert()).

Виконання (тимчасово) зупиниться на наступному рядку, коли завершиться функція.

Це зручно, коли ми не хочемо досліджувати, що відбувається всередині функції.

 — “Step into”: зробити крок. Швидка клавіша: F11.

Подібна до “Step”, але працює інакше у випадку викликів асинхронних функцій. Якщо ви тільки почали вчити JavaScript, тоді можете проігнорувати цю різницю, тому що ми поки що не вчили асинхронних викликів.

На майбутнє просто майте на увазі, що команда “Step” ігнорує асинхронні дії, такі як setTimeout (відкладений виклик функції), які виконуються пізніше. Команда “Step into” заходить в їхній код, і очікує на них якщо потрібно. Можете поглянути в документацію DevTools, щоб побачити як це відбувається.

 — “Step out”: продовжити виконання до завершення поточної функції. Швидка клавіша: Shift+F11.

Виконання коду відновиться і (тимчасово) зупинитися на останньому рядку поточної функції. Це зручно, коли ми випадково натиснули кнопку , зайшовши у вкладений виклик, і хочемо якнайшвидше завершити його.

 — активувати/деактивувати всі точки зупинки.

Ця кнопка не впливає на виконання коду, вона лише дозволяє масово увімкнути/вимкнути точки зупинки.

Коли ця кнопка активна і відкрито інструменти розробника, тоді скрипт автоматично (тимчасово) зупинить виконання, якщо трапиться якась помилка. Ми зможемо проаналізувати змінні й дослідити, що пішло не так. Отже, якщо наш скрипт аварійно завершує роботу, ми можемо відкрити інструменти розробника, активувати цю опцію і перезавантажити сторінку, щоб побачити де і за яких умов скрипт “вмирає”, і які в цього деталі.

Логування

Щоб вивести щось в консоль з нашого коду, існує спеціальна функція console.log.

Наприклад, така інструкція виведе в консоль числа від 0 до 4:

// відкрийте консоль, щоб побачити
for (let i = 0; i < 5; i++) {
  console.log("число,", i);
}

Звичайні користувачі не бачитимуть цієї інформації — вона в консолі. Щоб побачити її, відкрийте інструменти розробника і перейдіть на вкладку «Console», або натисніть клавішу Esc, якщо ви на іншій вкладці: це відкриє консоль знизу.

Якщо в нас достатньо логів в нашому коді, ми зможемо побачити що відбувається з нашими записами, без допомоги налагоджувача.

Підсумки

Як бачимо, є три способи (тимчасово) зупинити виконання скрипту:

1. Точка зупинки.
2. Інструкція debugger.
3. Помилка (якщо активовано кнопку в інструментах розробника).

Коли виконання (тимчасово) зупинене, ми можемо налагоджувати (інколи кажуть “дебажити”) –- досліджувати змінні й відстежувати виконання коду, щоб побачити, що пішло не так.

В інструментах розробника набагато більше опцій, ніж ми розглянули тут. Всю інформацію про інструменти розробника браузера Chrome можна прочитати в їхній офіційній документації (англійською).

Інформації з цього розділу достатньо, щоб почати налагодження, проте пізніше, особливо якщо ви тісно працюватимете з браузером, не полінуйтеся прочитати про розширені можливості інструментів розробника.

О, і ще ви можете натискати на різні місця в інструментах розробника, і побачити що відбувається. Це, напевно, найшвидший спосіб ознайомитися з функціоналом інструментів розробника. Не забувайте про клацання правою кнопкою миші та контекстні меню!