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
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,13 @@
2
2
3
3
Перед тим, як приступити до написання складнішого коду, поговорімо про його налагодження.
4
4
5
-
[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери і більшість інших середовищ розробки підтримують інструменти налагодження — спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відслідковувати, що саме відбувається в коді.
5
+
[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери та більшість інших середовищ розробки підтримують інструменти налагодження — спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відстежувати, що саме відбувається в коді.
6
6
7
7
Ми будемо використовувати браузер Chrome, тому що в нього достатньо можливостей для налагодження. В більшості інших браузерів процес буде схожим.
8
8
9
9
## Вкладка "Sources" ("вихідний код")
10
10
11
-
Ваш браузер Chrome може бути іншої версії – він може виглядати інакше, але різниця буде не суттєвою.
11
+
Ваша версія браузера Chrome може виглядати трохи інакше в залежності від версії, але різниця буде не суттєвою.
12
12
13
13
- В браузері Chrome, відкрийте [тестову сторінку](debugging/index.html).
14
14
- Відкрийте інструменти розробника, натиснувши клавішу `key:F12` (або `key:Cmd+Opt+I` на Mac).
@@ -18,9 +18,9 @@
18
18
19
19

20
20
21
-
Кнопка-перемикач <spanclass="devtools"style="background-position:-172px-98px"></span>ліворуч відкриває панель з файлами.
21
+
Кнопка-перемикач <spanclass="devtools"style="background-position:-172px-98px"></span>ліворуч відкриває панель з файлами.
22
22
23
-
Натисніть на неї і виберіть файл `hello.js`. Ось як буде виглядати вкладка Sources:
23
+
Натисніть на неї та виберіть файл `hello.js`. Ось як буде виглядати вкладка Sources:
24
24
25
25

26
26
@@ -34,7 +34,7 @@
34
34
35
35
## Консоль
36
36
37
-
Якщо натиснути клавішу `key:Esc`, в нижній частині екрану відкриється консоль. Туди можна вводити команди і їх виконувати, натиснувши клавішу `key:Enter`.
37
+
Якщо натиснути клавішу `key:Esc`, в нижній частині екрана відкриється консоль. Туди можна вводити команди і їх виконувати, натиснувши клавішу `key:Enter`.
38
38
39
39
Нижче показується результат виконання команд.
40
40
@@ -44,7 +44,7 @@
44
44
45
45
## Точки зупинки (breakpoints)
46
46
47
-
Давайте розберемося, як працює код на [тестовій сторінці](debugging/index.html). В файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, не по коді.
47
+
Розберімось як працює код на [тестовій сторінці](debugging/index.html). У файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, не по коді.
48
48
49
49
Вітаємо! Ви поставили точку зупинки. Поставте також точку зупинки на `8` рядку.
50
50
@@ -89,7 +89,7 @@ function hello(name) {
89
89
90
90
## Зупиніться й озирніться
91
91
92
-
В нашому прикладі, функція `hello()` викликається під час завантаження сторінки, отже, найшвидшим способом активувати налагоджувач (після того як ми поставили точку зупинки) — це перезавантажити сторінку. Тому просто натисніть `key:F5` (Windows, Linux) чи `key:Cmd+R` (на Mac).
92
+
В нашому прикладі, функція `hello()` викликається під час завантаження сторінки, отже, найшвидшим способом активувати налагоджувач (після того, як ми поставили точку зупинки) — це перезавантажити сторінку. Тому просто натисніть `key:F5` (Windows, Linux) чи `key:Cmd+R` (на Mac).
93
93
94
94
Оскільки ми поставили точку зупинки, виконання коду (тимчасово) зупинитися на 4-му рядку:
95
95
@@ -99,7 +99,7 @@ function hello(name) {
99
99
100
100
1.**`Watch` показує поточні значення виразів.**
101
101
102
-
Можете натиснути на `+` і ввести якійсь вираз. В процесі виконання, налагоджувач автоматично перераховуватиме і показуватиме його значення.
102
+
Можете натиснути на `+` і ввести якийсь вираз. В процесі виконання, налагоджувач автоматично перераховуватиме і показуватиме його значення.
103
103
104
104
2.**`Call Stack` показує послідовність викликів функцій.**
0 commit comments