From 704482b31a13caaf5664b4fd7f035197830036c2 Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Thu, 16 Jan 2020 21:57:30 +0200 Subject: [PATCH 1/8] Translate first part --- .../01-debugging-chrome/article.md | 34 +++++++++---------- .../chrome-open-sources.svg | 2 +- 1-js/03-code-quality/index.md | 4 +-- images.yml | 12 +++++-- 4 files changed, 29 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 1b0f4e377..77ebdc599 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,36 +1,36 @@ -# Debugging in Chrome +# Налагодження в браузері Chrome -Before writing more complex code, let's talk about debugging. +Перед тим, як приступити до написання складнішого коду, давайте поговоримо про його налагодження. -[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on. +[Налагодження](https://uk.wikipedia.org/wiki/Налагодження_програм) — це процес пошуку і виправлення помилок в скрипті. Усі сучасні браузери і більшість інших середовищ розробки підтримують інструменти налагодження — спеціальний графічний інтерфейс, який значно спрощує налагодження. Він також дозволяє покроково відслідковувати, що саме відбувається в нашому коді. -We'll be using Chrome here, because it has enough features, most other browsers have a similar process`. +Ми будемо використовувати браузер Chrome, тому що в нього достатньо можливостей для налагодження. В більшості інших браузерів процес буде схожим. -## The "Sources" panel +## Вкладка "Sources" ("вихідний код") -Your Chrome version may look a little bit different, but it still should be obvious what's there. +Ваш браузер Chrome може бути іншої версії – він може виглядати інакше, але різниця буде не суттєвою. -- Open the [example page](debugging/index.html) in Chrome. -- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`). -- Select the `Sources` panel. +- В браузері Chrome, відкрийте [тестову сторінку](debugging/index.html). +- Відкрийте інструменти розробника, натиснувши клавішу `key:F12` (або `key:Cmd+Opt+I` на Mac). +- Виберіть вкладку `Sources`. -Here's what you should see if you are doing it for the first time: +У вас буде схоже вікно: ![](chrome-open-sources.svg) -The toggler button opens the tab with files. +Кнопка-перемикач ліворуч відкриває панель з файлами. -Let's click it and select `hello.js` in the tree view. Here's what should show up: +Натисніть на неї і виберіть файл `hello.js`. Ось що з'явиться: ![](chrome-tabs.svg) -Here we can see three zones: +Цей інтерфейс складається з трьох панелей: -1. The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. -2. The **Source zone** shows the source code. -3. The **Information and control zone** is for debugging, we'll explore it soon. +1. В панелі **File Navigator** (Навігатор файлів) показані файли HTML, JavaScript, CSS та інші файли, включно із зображеннями, які використовуються на сторінці. Також тут можуть бути файли від розширень Chrome. +2. Панель **Code Editor** (Редагування коду) показує вихідний код. +3. Панель **JavaScript Debugging** (Налагодження JavaScript) для налагодження, ми вернемося до цього пізніше. -Now you could click the same toggler again to hide the resources list and give the code some space. +Можете знову натиснути на ту саму кнопку , щоб закрити панель і звільнити місце для коду. ## Console diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg index 1f7d21288..7899b53e5 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg @@ -1 +1 @@ -open sources \ No newline at end of file +показати вихідні файли diff --git a/1-js/03-code-quality/index.md b/1-js/03-code-quality/index.md index 2ef64fa69..0e5944d79 100644 --- a/1-js/03-code-quality/index.md +++ b/1-js/03-code-quality/index.md @@ -1,3 +1,3 @@ -# Code quality +# Якість коду -This chapter explains coding practices that we'll use further in the development. +В цьому розділі пояснюються підходи до написання коду, які будемо використовувати в подальшій розробці. diff --git a/images.yml b/images.yml index d0cf4a8b0..f1cd3d6d3 100644 --- a/images.yml +++ b/images.yml @@ -43,9 +43,13 @@ ifelse_task.svg: TheMaster: '' Other: '' +# 1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg +chrome-open-sources.svg: + open sources: 'показати вихідні файли' + chrome-sources-breakpoint.svg: - here's the list: '' - breakpoints: '' + here's the list: 'ось список' + breakpoints: 'точки зупинки' chrome-sources-debugger-pause.svg: '1': '' @@ -53,7 +57,9 @@ chrome-sources-debugger-pause.svg: '3': '' jump to the outer function: '' watch expressions: '' - current variables: '' + "current variables": + text: "поточні змінні" + position: "right" chrome-sources-debugger-trace-1.svg: nested calls: '' From 97dbd285a4cd248e995140a9eb3a0f6dfacfc2ea Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Mon, 20 Jan 2020 21:42:33 +0200 Subject: [PATCH 2/8] Translate 'console' part --- 1-js/03-code-quality/01-debugging-chrome/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 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 77ebdc599..b57191a6c 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -24,21 +24,21 @@ ![](chrome-tabs.svg) -Цей інтерфейс складається з трьох панелей: +Цей інтерфейс складається з трьох частин: -1. В панелі **File Navigator** (Навігатор файлів) показані файли HTML, JavaScript, CSS та інші файли, включно із зображеннями, які використовуються на сторінці. Також тут можуть бути файли від розширень Chrome. +1. На панелі **File Navigator** (Навігатор файлів) показані файли HTML, JavaScript, CSS та інші файли, включно із зображеннями, які використовуються на сторінці. Також тут можуть бути файли від розширень Chrome. 2. Панель **Code Editor** (Редагування коду) показує вихідний код. 3. Панель **JavaScript Debugging** (Налагодження JavaScript) для налагодження, ми вернемося до цього пізніше. Можете знову натиснути на ту саму кнопку , щоб закрити панель і звільнити місце для коду. -## Console +## Консоль -If we press `key:Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute. +Якщо натиснути клавішу `key:Esc`, в нижній частині екрану відкриється консоль. Туди можна вводити команди і виконувати їх, натиснувши клавішу `key:Enter`. -After a statement is executed, its result is shown below. +Нижче показується результат виконання команд. -For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`: +Наприклад, результатом `1+2` буде `3`, а ось інструкція `hello("debugger")` нічого не повертає, тому результат буде `undefined`: ![](chrome-sources-console.svg) From 82a631cc44667172a42cf081c8fe269df3b6f423 Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Sun, 2 Feb 2020 18:01:54 +0200 Subject: [PATCH 3/8] Small corrections to translation --- 1-js/01-getting-started/4-devtools/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 29d9a637f..86adf5041 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -1,6 +1,6 @@ # Інструменти розробника -Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви *точно* будете робити помилки, принаймні, якщо ви людина, а не робот [robot](https://uk.wikipedia.org/wiki/Бендер_(Футурама)). +Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви *точно* будете робити помилки, принаймні, якщо ви людина, а не [робот](https://uk.wikipedia.org/wiki/Бендер_(Футурама)). Зазвичай, користувачі не бачать помилок в браузері. Тому, якщо в скрипті щось трапиться на так, ми не побачимо помилки, і не зможемо її виправити. @@ -12,9 +12,9 @@ ## Google Chrome -Відкрийте сторінку [bug.html](bug.html). +Для прикладів ми будемо використовувати браузер [Google Chrome](https://www.google.com/intl/uk_ua/chrome/). Інструменти розробника в ньому показуються лише англійською мовою, незалежно від налаштувань браузера. -На цій сторінці є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити. +Відкрийте сторінку [bug.html](bug.html). На ній є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити. Натисніть клавішу `key:F12` або, якщо у вас Mac, комбінацію клавіш `key:Cmd+Opt+J`. @@ -24,7 +24,7 @@ ![chrome](chrome.png) -Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим. Ці інструменти показуються лише англійською мовою, незалежно від мови браузера. +Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим. - Тут ми можемо побачити червоне повідомлення. У нашому випадку, скрипт має невизначену команду "lalala". - З правого боку є посилання на джерело `bug.html:12` з номером рядка, де ця помилка виникла. При натисканні на це посилання, інструмент перейде на вкладку "Source", де відкриє файл і перейде на рядок, в якому трапилася помилка. @@ -47,7 +47,7 @@ ## Safari -Safari (браузер в Mac, не підтримується Windows/Linux) дещо особливий. Спочатку нам потрібно увімкнути меню "Розробка". +Safari (стандартний браузер в macOS, не підтримується Windows/Linux) має свої нюанси. Спочатку нам потрібно увімкнути меню "Розробка". Відкрийте Параметри і перейдіть на панель "Експертні". Знизу буде галочка, яку необхідно вибрати: From 5d473b2b12632c1335ae06fa330ec54eb3d7921a Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Sun, 2 Feb 2020 18:02:32 +0200 Subject: [PATCH 4/8] Translate 'Breakpoints', small corrections --- .../01-debugging-chrome/article.md | 50 +++++++++---------- .../chrome-sources-breakpoint.svg | 2 +- .../debugging.view/hello.js | 2 +- .../debugging.view/index.html | 4 +- images.yml | 3 +- 5 files changed, 31 insertions(+), 30 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 b57191a6c..ec84d4cd2 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, тому що в нього достатньо можливостей для налагодження. В більшості інших браузерів процес буде схожим. @@ -20,15 +20,15 @@ Кнопка-перемикач ліворуч відкриває панель з файлами. -Натисніть на неї і виберіть файл `hello.js`. Ось що з'явиться: +Натисніть на неї і виберіть файл `hello.js`. Ось як буде виглядати вкладка Sources: ![](chrome-tabs.svg) Цей інтерфейс складається з трьох частин: -1. На панелі **File Navigator** (Навігатор файлів) показані файли HTML, JavaScript, CSS та інші файли, включно із зображеннями, які використовуються на сторінці. Також тут можуть бути файли від розширень Chrome. -2. Панель **Code Editor** (Редагування коду) показує вихідний код. -3. Панель **JavaScript Debugging** (Налагодження JavaScript) для налагодження, ми вернемося до цього пізніше. +1. На панелі **Навігатор файлів** (File Navigator) показані файли HTML, JavaScript, CSS та інші файли, включно із зображеннями, які використовуються на сторінці. Також тут можуть бути файли від розширень Chrome. +2. Панель **Редагування коду** (Code Editor) показує вихідний код. +3. Панель **Налагодження JavaScript** (JavaScript Debugging) використовується для налагодження, ми повернемося до цього пізніше. Можете знову натиснути на ту саму кнопку , щоб закрити панель і звільнити місце для коду. @@ -38,53 +38,53 @@ Нижче показується результат виконання команд. -Наприклад, результатом `1+2` буде `3`, а ось інструкція `hello("debugger")` нічого не повертає, тому результат буде `undefined`: +Наприклад, результатом `1 + 2` буде `3`, а ось інструкція `hello("debugger")` нічого не повертає, тому результат буде `undefined`: ![](chrome-sources-console.svg) -## Breakpoints +## Точки зупинки (breakpoints) -Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. +Давайте розберемося, як працює код на [тестовій сторінці](debugging/index.html). В файлі `hello.js`, натисніть на рядок номер `4`. Так, на саму цифру, не по коді. -Congratulations! You've set a breakpoint. Please also click on the number for line `8`. +Вітаємо! Ви поставили точку зупинки. Поставте також точку зупинки на `8` рядку. -It should look like this (blue is where you should click): +Номери рядків мають стати синього кольору. Ось що в результаті повинно вийти: ![](chrome-sources-breakpoint.svg) -A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. +*Точка зупинки* — це місце в коді, де налагоджувач автоматично призупинить виконання JavaScript. -While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it. +Поки виконання призупинене, ми можемо переглядати поточні значення змінних, виконувати команди в консолі тощо. Інакше кажучи, можемо налагоджувати. -We can always find a list of breakpoints in the right panel. That's useful when we have many breakpoints in various files. It allows us to: -- Quickly jump to the breakpoint in the code (by clicking on it in the right panel). -- Temporarily disable the breakpoint by unchecking it. -- Remove the breakpoint by right-clicking and selecting Remove. -- ...And so on. +В правій частині панелі видно всі точки зупинки. Коли виставлено багато таких точок, та ще й в різних файлах, цей список дозволяє ефективно ними керувати: +- Швидко переміщатися до будь-якої точки зупинки в коді – потрібно клікнути по ній в правій частині панелі. +- Тимчасово вимкнути точку зупинки, знявши виділення. +- Видалити точку – потрібно клікнувши по ній правою кнопкою миші і вибрати «Remove breakpoint» (Видалити точку зупинки). +- ...тощо. -```smart header="Conditional breakpoints" -*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy. +```smart header="Умовні точки зупинки" +Можна задати так звану *умовну* точку зупинки – клікніть правою кнопкою миші по номеру рядка в коді, виберіть пункт «Edit breakpoint...» і пропишіть умову. Коли ця умова буде справджуватися, то виконання коду призупиниться в цій точці зупинки. -That's handy when we need to stop only for a certain variable value or for certain function parameters. +Цей метод використовується, коли потрібно призупинити виконання коду під час специфічних значень змінних або параметрів функції. ``` -## Debugger command +## Команда Debugger -We can also pause the code by using the `debugger` command in it, like this: +Виконання коду також можна призупиняти командою `debugger` прямо всередині коду, ось так: ```js function hello(name) { - let phrase = `Hello, ${name}!`; + let phrase = `Привіт, ${name}!`; *!* - debugger; // <-- the debugger stops here + debugger; // <-- тут зупиниться налагоджувач */!* say(phrase); } ``` -That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint. +Цей спосіб зручний тим, що коли ми працюємо в редакторі коду, нам не потрібно ще додатково переключатися в браузер, і шукати файл, щоб поставити точку зупинки. ## Pause and look around 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 6fb4332f1..65f114c20 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 @@ -here's the listbreakpoints \ No newline at end of file +список всіх точок зупинкиточки зупинки diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js b/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js index 4236740e8..58e16442c 100644 --- a/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js +++ b/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js @@ -1,5 +1,5 @@ function hello(name) { - let phrase = `Hello, ${name}!`; + let phrase = `Привіт, ${name}!`; say(phrase); } diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html index 6c651e854..516e61a5f 100644 --- a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html +++ b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html @@ -4,10 +4,10 @@ - An example for debugging. + Приклад для налагодження. diff --git a/images.yml b/images.yml index f1cd3d6d3..1b432173e 100644 --- a/images.yml +++ b/images.yml @@ -47,8 +47,9 @@ ifelse_task.svg: chrome-open-sources.svg: open sources: 'показати вихідні файли' +# 1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg chrome-sources-breakpoint.svg: - here's the list: 'ось список' + here's the list: 'список всіх точок в цьому файлі' breakpoints: 'точки зупинки' chrome-sources-debugger-pause.svg: From 62cfbd8264a28a80225f4754214d1b7e4dc53d8e Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Mon, 17 Feb 2020 11:41:00 +0200 Subject: [PATCH 5/8] Translate one part of article --- 1-js/03-code-quality/01-debugging-chrome/article.md | 6 +++--- images.yml | 1 + 2 files changed, 4 insertions(+), 3 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 ec84d4cd2..94c00c7f6 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -87,11 +87,11 @@ function hello(name) { Цей спосіб зручний тим, що коли ми працюємо в редакторі коду, нам не потрібно ще додатково переключатися в браузер, і шукати файл, щоб поставити точку зупинки. -## Pause and look around +## Зупиніться і озирніться -In our example, `hello()` is called during the page load, so the easiest way to activate the debugger (after we've set the breakpoints) is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac). +В нашому прикладі, функція `hello()` викликається під час завантаження сторінки, отже, найшвидшим способом активувати налагоджувач (після того як ми поставили точку зупинки) — це перезавантажити сторінку. Тому просто натисніть `key:F5` (Windows, Linux) чи `key:Cmd+R` (на Mac). -As the breakpoint is set, the execution pauses at the 4th line: +Оскільки ми поставили точку зупинки, виконання коду призупиниться на 4-му рядку: ![](chrome-sources-debugger-pause.svg) diff --git a/images.yml b/images.yml index 1b432173e..972c33db2 100644 --- a/images.yml +++ b/images.yml @@ -52,6 +52,7 @@ chrome-sources-breakpoint.svg: here's the list: 'список всіх точок в цьому файлі' breakpoints: 'точки зупинки' +# 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg chrome-sources-debugger-pause.svg: '1': '' '2': '' From 91a12adba06a0710043243160f5ae2d30c6e883b Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Tue, 25 Feb 2020 23:03:21 +0200 Subject: [PATCH 6/8] Translate right blocks of debugging tool --- .../01-debugging-chrome/article.md | 20 +++++----- .../chrome-sources-debugger-pause.svg | 2 +- images.yml | 37 +++++++++++-------- 3 files changed, 32 insertions(+), 27 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 94c00c7f6..a7861a5de 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -95,24 +95,24 @@ function hello(name) { ![](chrome-sources-debugger-pause.svg) -Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state: +Щоб зрозуміти, що відбувається в коді, натисніть на стрілки справа. Можна виділити три основні блоки: -1. **`Watch` -- shows current values for any expressions.** +1. **`Watch` показує поточні значення виразів.** - You can click the plus `+` and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution. + Можете натиснути на `+` і ввести свій вираз, наприклад, `name === 'Іван'`. В процесі виконання, налагоджувач автоматично перераховуватиме і показуватиме його значення. -2. **`Call Stack` -- shows the nested calls chain.** +2. **`Call Stack` показує послідовність викликів функцій.** - At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous"). + В нашому прикладі налагоджувач призупинив виконання коду всередині функції `hello()`, яка була викликана з файлу `index.html` (там немає функції, тому виклик "anonymous" – анонімний). - If you click on a stack item (e.g. "anonymous"), the debugger jumps to the corresponding code, and all its variables can be examined as well. -3. **`Scope` -- current variables.** + Натиснувши на елемент списку (наприклад, на "anonymous"), налагоджувач перейде до відповідного коду, де було здійснено виклик. +3. **`Scope` показує поточні змінні.** - `Local` shows local function variables. You can also see their values highlighted right over the source. + В `Local` показуються локальні змінні функції, а їх значення підсвічуються в вихідному коді. - `Global` has global variables (out of any functions). + В `Global` показуються глобальні змінні (тобто ті, які оголошені поза функціями). - There's also `this` keyword there that we didn't study yet, but we'll do that soon. + Зверніть увагу, що під час зміни викликів функцій (з блоку "Call Stack"), поточні змінні теж міняються. Тут ще є ключове слово `this`, поки що не звертайте на нього уваги — ми вивчемо його пізніше. ## Tracing the execution diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg index 40d9515ab..64d926abe 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg @@ -1 +1 @@ -213see the outer call detailswatch expressionscurrent variables \ No newline at end of file +213перегляд деталей зовнішнього викликуперегляд виразівпоточні змінні diff --git a/images.yml b/images.yml index 972c33db2..4f2ea6ed4 100644 --- a/images.yml +++ b/images.yml @@ -1,21 +1,21 @@ # 1-js/02-first-steps/04-variables/variable.svg variable.svg: - '"Hello!"': - text: '"Привіт!"' + "Hello!": + text: "Привіт!" position: "center" - message: + "message": text: "Повідомлення" position: "center" # 1-js/02-first-steps/04-variables/variable-change.svg variable-change.svg: - '"Hello!"': - text: '"Привіт!"' + "Hello!": + text: "Привіт!" position: "center" - '"World!"': - text: '"Світ!"' + "World!": + text: "Світ!" position: "center" - message: + "message": text: "Повідомлення" position: "center" @@ -45,20 +45,25 @@ ifelse_task.svg: # 1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg chrome-open-sources.svg: - open sources: 'показати вихідні файли' + "open sources": + text: "показати вихідні файли" # 1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg chrome-sources-breakpoint.svg: - here's the list: 'список всіх точок в цьому файлі' - breakpoints: 'точки зупинки' + "here's the list": + text: "список всіх точок в цьому файлі" + position: "right" + "breakpoints": + text: "точки зупинки" # 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg chrome-sources-debugger-pause.svg: - '1': '' - '2': '' - '3': '' - jump to the outer function: '' - watch expressions: '' + "see the outer call details": + text: "перегляд деталей зовнішнього виклику" + position: "right" + "watch expressions": + text: "перегляд виразів" + position: "right" "current variables": text: "поточні змінні" position: "right" From 7cd0d2033b346efc897d81dffa58daa2cc1d7105 Mon Sep 17 00:00:00 2001 From: tarasyyyk Date: Sat, 29 Feb 2020 19:34:59 +0200 Subject: [PATCH 7/8] Small corrections to 'Code style' --- 1-js/03-code-quality/02-coding-style/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index bc01a24a2..15a90a252 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -2,11 +2,11 @@ Наш код повинен бути настільки зрозумілим та читабельним, наскільки це можливо. -Насправді, це є мистецтвом програмування -- брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді. +Насправді, мистецтво програмування — це брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді. ## Синтаксис -Деякі запропоновані правила наведені у наступній шпаргалці (дивитись нижче більш детально): +Деякі запропоновані правила наведені у цій шпаргалці (*нижче розписано більш детально*): ![](code-style.svg) - -- "Resume": continue the execution, hotkey `key:F8`. -: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. + — "Resume": продовжити виконання. Швидка клавіша: `key:F8`. +: Відновлює виконання коду. Якщо більше немає точок зупинок, налагоджувач завершить свою роботу, а код буде виконуватися далі. - Here's what we can see after a click on it: + Ось що ми побачимо, коли натиснемо на цю кнопку: ![](chrome-sources-debugger-trace-1.svg) - The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call Stack" at the right. It has increased by one more call. We're inside `say()` now. + Виконання коду відновилося, дійшло до іншої точки зупинки, всередині `say()` і налагоджувач знову призупинив виконання. Зверніть увагу на вкладку "Call Stack" праворуч: в списку з'явився ще один виклик. Ми тепер всередині функції `say()`. - -- "Step": run the next command, hotkey `key:F9`. -: Run the next statement. If we click it now, `alert` will be shown. + — "Step": виконати наступну команду. Швидка клавіша: `key:F9`. +: Якщо ми натиснемо на неї – виконається функція `alert`. - Clicking this again and again will step through all script statements one by one. + Натискаючи цю кнопку раз за разом, всі вирази будуть виконуватися покроково. - -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`. -: Similar to the previous the "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own. + — виконати наступну команду, *не заходячи в функцію*. Швидка клавіша: `key:F10`. +: Подібна до попередньої команди "Step", проте працює дещо по-іншому, якщо наступний вираз – виклик функції. Ось наприклад, маємо власноруч написану функцію `say()`, яка показує повідомлення. - The "Step" command goes into it and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals. + Команда "Step" зайде в неї і зупиниться на її першому рядку, тоді як "Step over" виконає всі вирази, які є в цій функції (включно з викликами вкладених функцій, такі як `alert()`). - The execution is then paused immediately after that function. + Виконання призупиниться на наступному рядку, коли завершиться функція. - That's good if we're not interested to see what happens inside the function call. + Це зручно, коли ми не хочемо досліджувати, що відбувається всередині функції. - -- "Step into", hotkey `key:F11`. -: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet. + — "Step into": зробити крок. Швидка клавіша: `key:F11`. +: Подібна до "Step", але працює інакше у випадку викликів асинхронних функцій. Якщо ви тільки почали вчити JavaScript, тоді можете проігнорувати цю різницю, тому що ми покищо не вчили асинхронних викликів. - For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details. + На майбутнє просто майте на увазі, що команда "Step" ігнорує асинхронні дії, такі як `setTimeout` (відкладений виклик функції), які виконуються пізніше. Команда "Step into" заходить в їхній код, і очікує на них якщо потрібно. Можете поглянути в [документацію DevTools](https://developers.google.com/web/updates/2018/01/devtools#async), щоб побачити як це відбувається. - -- "Step out": continue the execution till the end of the current function, hotkey `key:Shift+F11`. -: Continue the execution and stop it at the very last line of the current function. That's handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible. + — "Step out": продовжити виконання до завершення поточної функції. Швидка клавіша: `key:Shift+F11`. +: Виконання коду відновиться і призупиниться на останньому рядку поточної функції. Це зручно, коли ми випадково натиснули кнопку , зайшовши у вкладений виклик, і хочемо якнайшвидше завершити його. - -- enable/disable all breakpoints. -: That button does not move the execution. Just a mass on/off for breakpoints. + — активувати/деактивувати всі точки зупинки. +: Ця кнопка не впливає на виконання коду, вона лише дозволяє масово увімкнути/вимкнути точки зупинки. - -- enable/disable automatic pause in case of an error. -: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. + — дозволити/заборонити автоматичне призупинення виконання у випадку помилки. +: Коли ця кнопка активна і відкрито інструменти розробника, тоді скрипт автоматично призупинить виконання, якщо трапиться якась помилка. Ми зможемо проаналізувати змінні і дослідити, що пішло не так. Отже, якщо наш скрипт аварійно завершує роботу, ми можемо відкрити інструменти розробника, активувати цю опцію і перезавантажити сторінку, щоб побачити де і за яких умов скрипт "вмирає". ```smart header="Continue to here" -Right click on a line of code opens the context menu with a great option called "Continue to here". +Коли налагоджувач працює, ми можемо натиснути праву кнопку миші по рядку коду і вибрати опцію «Continue to here» («продовжити звідси»). -That's handy when we want to move multiple steps forward to the line, but we're too lazy to set a breakpoint. +Цей метод сильно стає у нагоді, коли нам потрібно просунутися на кілька кроків вперед до потрібного рядка, але нам лінь ставити точку зупинки. ``` -## Logging +## Логування -To output something to console from our code, there's `console.log` function. +Щоб вивести щось в консоль з нашого коду, існує спеціальна функція `console.log`. -For instance, this outputs values from `0` to `4` to console: +Наприклад, така інструкція виведе в консоль числа від `0` до `4`: ```js run -// open console to see +// відкрийте консоль, щоб побачити for (let i = 0; i < 5; i++) { - console.log("value,", i); + console.log("число,", i); } ``` -Regular users don't see that output, it is in the console. To see it, either open the Console panel of developer tools or press `key:Esc` while in another panel: that opens the console at the bottom. +Звичайні користувачі не бачитимуть цієї інформації — вона в консолі. Щоб побачити її, відкрийте інструменти розробника і перейдіть на вкладку «Console», або натисніть клавішу `key:Esc`, якщо ви на іншій вкладці: це відкриє консоль знизу. -If we have enough logging in our code, then we can see what's going on from the records, without the debugger. +Якщо в нас достатньо логів в нашому коді, ми зможемо побачити що відбувається з нашими записами, без допомоги налагоджувача. -## Summary +## Підсумки -As we can see, there are three main ways to pause a script: -1. A breakpoint. -2. The `debugger` statements. -3. An error (if dev tools are open and the button is "on"). +Як бачимо, є три способи призупинити виконання скрипта: +1. Точка зупинки. +2. Інструкція `debugger`. +3. Помилка (якщо активовано кнопку в інструментах розробника). -When paused, we can debug - examine variables and trace the code to see where the execution goes wrong. +Коли виконання призупинене, ми можемо налагоджувати (інколи кажуть «дебажити») – досліджувати змінні і відслідковувати виконання коду, щоб побачити, що пішло не так. -There are many more options in developer tools than covered here. The full manual is at . +В інструментах розробника набагато більше опцій, ніж ми розглянули тут. Всю інформацію про інструменти розробника браузера Chrome можна прочитати в [їхній офіційній документації](https://developers.google.com/web/tools/chrome-devtools) (англійською). -The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools. +Інформації з цього розділу достатньо, щоб почати налагодження, проте пізніше, особливо якщо ви тісно працюватимете з браузером, не полінуйтеся прочитати про розширені можливості інструментів розробника. -Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click and context menus! +О, і ще ви можете натискати на різні місця в інструментах розробника, і побачити що відбувається. Це, напевно, найшвидший спосіб ознайомитися з функціоналом інструментів розробника. Не забувайте про кліки правою кнопкою миші і контекстні меню! 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 65f114c20..594105eb2 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 @@ -список всіх точок зупинкиточки зупинки +список всіх точокзупинкиточки зупинки diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg index 64d926abe..f00015e0a 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg @@ -1 +1 @@ -213перегляд деталей зовнішнього викликуперегляд виразівпоточні змінні +213перегляд деталей зовнішньоговикликуперегляд виразівпоточні змінні diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg index 0d5bde9c4..e6b370ea0 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg @@ -1 +1 @@ -nested calls \ No newline at end of file +вкладені виклики diff --git a/images.yml b/images.yml index 4f2ea6ed4..14fad54ad 100644 --- a/images.yml +++ b/images.yml @@ -68,8 +68,10 @@ chrome-sources-debugger-pause.svg: text: "поточні змінні" position: "right" +# 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg chrome-sources-debugger-trace-1.svg: - nested calls: '' + "nested calls": + text: "вкладені виклики" toolbarButtonGlyphs.svg: {}