Skip to content

Commit 4eada16

Browse files
authored
Merge pull request #54 from javascript-tutorial/debugging-in-chrome
Debugging in chrome
2 parents c792b67 + 08e89af commit 4eada16

File tree

11 files changed

+145
-130
lines changed

11 files changed

+145
-130
lines changed

1-js/01-getting-started/4-devtools/article.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Інструменти розробника
22

3-
Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви *точно* будете робити помилки, принаймні, якщо ви людина, а не робот [robot](https://uk.wikipedia.org/wiki/Бендер_(Футурама)).
3+
Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви *точно* будете робити помилки, принаймні, якщо ви людина, а не [робот](https://uk.wikipedia.org/wiki/Бендер_(Футурама)).
44

55
Зазвичай, користувачі не бачать помилок в браузері. Тому, якщо в скрипті щось трапиться на так, ми не побачимо помилки, і не зможемо її виправити.
66

@@ -12,9 +12,9 @@
1212

1313
## Google Chrome
1414

15-
Відкрийте сторінку [bug.html](bug.html).
15+
Для прикладів ми будемо використовувати браузер [Google Chrome](https://www.google.com/intl/uk_ua/chrome/). Інструменти розробника в ньому показуються лише англійською мовою, незалежно від налаштувань браузера.
1616

17-
На цій сторінці є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити.
17+
Відкрийте сторінку [bug.html](bug.html). На ній є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити.
1818

1919
Натисніть клавішу `key:F12` або, якщо у вас Mac, комбінацію клавіш `key:Cmd+Opt+J`.
2020

@@ -24,7 +24,7 @@
2424

2525
![chrome](chrome.png)
2626

27-
Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим. Ці інструменти показуються лише англійською мовою, незалежно від мови браузера.
27+
Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим.
2828

2929
- Тут ми можемо побачити червоне повідомлення. У нашому випадку, скрипт має невизначену команду "lalala".
3030
- З правого боку є посилання на джерело `bug.html:12` з номером рядка, де ця помилка виникла. При натисканні на це посилання, інструмент перейде на вкладку "Source", де відкриє файл і перейде на рядок, в якому трапилася помилка.
@@ -47,7 +47,7 @@
4747

4848
## Safari
4949

50-
Safari (браузер в Mac, не підтримується Windows/Linux) дещо особливий. Спочатку нам потрібно увімкнути меню "Розробка".
50+
Safari (стандартний браузер в macOS, не підтримується Windows/Linux) має свої нюанси. Спочатку нам потрібно увімкнути меню "Розробка".
5151

5252
Відкрийте Параметри і перейдіть на панель "Експертні". Знизу буде галочка, яку необхідно вибрати:
5353

1-js/03-code-quality/01-debugging-chrome/article.md

Lines changed: 95 additions & 95 deletions
Large diffs are not rendered by default.

1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg

Lines changed: 1 addition & 1 deletion
Loading

1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg

Lines changed: 1 addition & 1 deletion
Loading

1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg

Lines changed: 1 addition & 1 deletion
Loading

1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg

Lines changed: 1 addition & 1 deletion
Loading

1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
function hello(name) {
2-
let phrase = `Hello, ${name}!`;
2+
let phrase = `Привіт, ${name}!`;
33

44
say(phrase);
55
}

1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
<script src="hello.js"></script>
66

7-
An example for debugging.
7+
Приклад для налагодження.
88

99
<script>
10-
hello("John");
10+
hello("Олександр");
1111
</script>
1212

1313
</body>

1-js/03-code-quality/02-coding-style/article.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
Наш код повинен бути настільки зрозумілим та читабельним, наскільки це можливо.
44

5-
Насправді, це є мистецтвом програмування -- брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.
5+
Насправді, мистецтво програмування — це брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.
66

77
## Синтаксис
88

9-
Деякі запропоновані правила наведені у наступній шпаргалці (дивитись нижче більш детально):
9+
Деякі запропоновані правила наведені у цій шпаргалці (*нижче розписано більш детально*):
1010

1111
![](code-style.svg)
1212
<!--
@@ -42,7 +42,7 @@ if (n < 0) {
4242

4343
### Фігурні дужки
4444

45-
У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі з відкриваючою дужкою на тому ж рядку, що й відповідне ключове слово -- не на новому рядку. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:
45+
У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі, де відкриваюча дужка знаходиться не на новому рядку, а на тому ж, що й відповідне ключове слово. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:
4646

4747
```js
4848
if (condition) {
@@ -52,7 +52,7 @@ if (condition) {
5252
}
5353
```
5454

55-
Чи потрібно ставити дужки, коли конструкція складається з одного рядка, наприклад `if (condition) doSomething()`?
55+
Чи потрібно ставити дужки, коли конструкція складається лише з одного рядка, наприклад `if (condition) doSomething()`?
5656

5757
Нижче наведені різні варіанти розташування дужок з коментарями, щоб ви змогли самостійно вирішити який варіант є найбільш читабельним.
5858

1-js/03-code-quality/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
# Code quality
1+
# Якість коду
22

3-
This chapter explains coding practices that we'll use further in the development.
3+
В цьому розділі пояснюються підходи до написання коду, які будемо використовувати в подальшій розробці.

0 commit comments

Comments
 (0)