From 8eba6666e220f6207f789eb374ee025f95a0b712 Mon Sep 17 00:00:00 2001 From: Andrii Hrushetskyi Date: Sun, 16 Feb 2025 09:31:37 +0100 Subject: [PATCH 1/2] fixed text positioning in illustration In chapter 3-01 debugging-chrome there were illustration when text was difficult to differ. I mean it was difficult to understand to which exactly arrow that text belongs to. I fixed it by making bigger distance. --- .../01-debugging-chrome/chrome-sources-breakpoint.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From e539bc6586e86b39c0cd68fcea0c0e657ecc641f Mon Sep 17 00:00:00 2001 From: Andrii Hrushetskyi Date: Sun, 16 Feb 2025 09:33:44 +0100 Subject: [PATCH 2/2] fixed typos and simplified explanation *In chapter 2-18 javascript-specials* Some of sentences were correct, but they were "unnatural" in Ukrainian and make understanding more difficult. \nAlso there were really rough mistake. Heading of "enable/disable automatic pause in case of an error" was missed. --- .../01-debugging-chrome/article.md | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) 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 @@ ![](chrome-sources-breakpoint.svg) -*Точка зупинки* — це місце в коді, де налагоджувач автоматично (тимчасово) зупинить виконання 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`. : Відновлює виконання коду. Якщо більше немає точок зупинок, налагоджувач завершить свою роботу, а код буде виконуватися далі. Ось що ми побачимо, коли натиснемо на цю кнопку: ![](chrome-sources-debugger-trace-1.svg) - Виконання коду відновилося, дійшло до іншої точки зупинки, всередині `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) (англійською).