Git и GitHub + отладка кода

01 Git: история проекта

Представьте, что вы делаете сайт для чойхоны. Сегодня всё работает, завтра вы «немного поправили» меню, и сайт сломался. Как вернуться? Копировать папку с названиями site-final, site-final-2, site-final-REAL? Так делают новички. Профессионалы используют Git — систему контроля версий. Она записывает каждое сохранённое состояние проекта, показывает, что и кто изменил, и позволяет вернуться к любому моменту.

Три зоны и четыре места

Файл в Git проходит три зоны на вашем компьютере. Четвёртое место — сервер GitHub, куда вы отправляете копию.

Первый репозиторий

Один раз на компьютере нужно представиться — это имя попадёт в каждый коммит:

git config --global user.name "Ваше Имя"
git config --global user.email "you@example.com"

Теперь создадим проект и сделаем первый коммит:

mkdir chaykhona-site
cd chaykhona-site
git init -b main
echo "# Чойхона" > README.md
git status
git add README.md
git commit -m "docs: add readme"
git log --oneline

Что произошло по шагам:

1. git init создал скрытую папку .git — в ней живёт вся история. Удалите её, и проект перестанет быть репозиторием.
2. git status сказал: файл README.md «untracked» — Git его ещё не отслеживает.
3. git add положил файл в индекс («конверт»).
4. git commit -m "…" записал снимок с подписью.
5. git log --oneline показал историю: короткий код коммита и подпись.

Команды, которые вы будете использовать каждый день

Чтобы почувствовать, как устроены зоны, смоделируем их кодом. Это первая задача на странице.

const repo = {
  work: ["index.html", "style.css", "app.js"], // изменённые файлы
  staged: [],                                  // подготовлены: git add
  commits: [],                                 // история: git commit
};

function add(file) {
  // убрать файл из work и положить в staged
}

function commit(message) {
  // сохранить файлы из staged в новый коммит { message, files }
  // и очистить staged
}

add("index.html");
add("style.css");
commit("add page skeleton");
add("app.js");
commit("add order counter");

for (let i = repo.commits.length - 1; i >= 0; i--) {
  const c = repo.commits[i];
  console.log(`${i + 1}. ${c.message} (${c.files.join(", ")})`);
}
console.log(repo.work.length, repo.staged.length);

2. add order counter (app.js)
1. add page skeleton (index.html, style.css)
0 0

const files = [
  { name: "index.html", tracked: true, changed: false, staged: false },
  { name: "app.js", tracked: true, changed: true, staged: false },
  { name: "notes.txt", tracked: false, changed: true, staged: false },
  { name: "style.css", tracked: true, changed: true, staged: true, changedAfterAdd: false },
  { name: "README.md", tracked: true, changed: true, staged: true, changedAfterAdd: true },
];

function statusLine(f) {
  if (!f.tracked) return `untracked: ${f.name}`;
  if (f.staged) return `to be committed: ${f.name}`;
  if (f.changed) return `modified: ${f.name}`;
  return null; // чистый файл в статусе не показывается
}

files.map(statusLine).filter(Boolean).forEach((line) => console.log(line));

modified: app.js
untracked: notes.txt
to be committed: style.css
staged, but changed again: README.md

Читать подробнее: Pro Git — запись изменений в репозиторий.

02 Ветки: работаем, не ломая основное

В репозитории есть главная ветка — обычно main (иногда её называют master). В ней лежит версия, которая «точно работает». Новую функцию делают в отдельной ветке: можно пробовать, ошибаться и коммитить сколько угодно — основная ветка не пострадает. Когда функция готова и проверена, ветку вливают обратно.

Ветка — это не копия папки. Это всего лишь подвижная «закладка» на один из коммитов. Новый коммит двигает закладку вперёд. Благодаря этому ветки в Git создаются мгновенно и стоят почти ничего. Особая закладка HEAD показывает, на какой ветке вы сейчас стоите.

git branch                         # список веток, звёздочка у текущей
git switch -c feature/filters      # создать ветку и перейти на неё
# ...правим файлы, git add, git commit...
git log --oneline --graph --all    # история в виде дерева
git switch main                    # вернуться на main
git merge feature/filters          # влить ветку в main
git branch -d feature/filters      # удалить ветку, она больше не нужна

Как называть ветки

В командах ветку называют по шаблону тип/короткое-описание: feature/order-filters, fix/wrong-total, docs/readme-tajik. Английские слова, строчные буквы, без пробелов, слова через дефис. По имени сразу видно, что в ветке и зачем.

Ветки — это граф коммитов, и мы можем обойти его кодом. Начнём с простого: пройдём цепочку «родитель → родитель», как это делает git log.

const commits = [
  { id: "c1", parent: null, message: "init project" },
  { id: "c2", parent: "c1", message: "add header" },
  { id: "c3", parent: "c2", message: "add footer" },   // конец main
  { id: "f1", parent: "c2", message: "add filters" },  // ветка feature отошла от c2
  { id: "f2", parent: "f1", message: "add sort" },     // конец feature
];
const branches = { main: "c3", feature: "f2" };
const byId = Object.fromEntries(commits.map((c) => [c.id, c]));

function history(branch) {
  // начните с branches[branch] и идите по parent, пока он не станет null
}

console.log(history("main").join(" <- "));
console.log(history("feature").join(" <- "));

add footer <- add header <- init project
add sort <- add filters <- add header <- init project

const commits = [
  { id: "c1", parent: null, message: "init project" },
  { id: "c2", parent: "c1", message: "add header" },
  { id: "c3", parent: "c2", message: "add footer" },   // конец main
  { id: "f1", parent: "c2", message: "add filters" },  // ветка feature отошла от c2
  { id: "f2", parent: "f1", message: "add sort" },     // конец feature
];
const branches = { main: "c3", feature: "f2" };
const byId = Object.fromEntries(commits.map((c) => [c.id, c]));

function history(branch) {
  const result = [];
  let id = branches[branch];
  while (id !== null) {
    result.push(byId[id].message);
    id = byId[id].parent;
  }
  return result;
}

function onlyIn(branch, base) {
  // вернуть массив сообщений
}

console.log(onlyIn("feature", "main").join(", "));
console.log(onlyIn("main", "feature").join(", "));
console.log(onlyIn("main", "main").length);

add sort, add filters
add footer
0

Читать подробнее: Pro Git — о ветвлении в двух словах.

03 GitHub: push, pull request, ревью

Git живёт на вашем компьютере. GitHub — это сайт, где хранится копия репозитория (её называют origin — «удалённый репозиторий»). Именно через GitHub команда обменивается кодом, а работодатель смотрит ваше портфолио.

git remote add origin https://github.com/ВАШ_ЛОГИН/chaykhona-site.git
git push -u origin main            # первая отправка, -u запоминает связь веток
git push                           # дальше достаточно просто push
git clone https://github.com/ВАШ_ЛОГИН/chaykhona-site.git   # скачать чужой репозиторий
git pull                           # забрать новые коммиты с GitHub
git fetch                          # только скачать информацию, ничего не менять

git pull — это fetch (скачать) + merge (влить в вашу ветку). Если на GitHub появились новые коммиты коллег, а у вас нет, перед push сначала делают pull.

Pull request — главная идея командной работы

Pull request (PR) — это просьба: «посмотрите мои изменения в ветке и, если всё хорошо, влейте их в main». PR — не команда Git, а возможность GitHub. Вы пушите ветку, на сайте нажимаете «Compare & pull request», пишете описание, а коллега читает изменения построчно, оставляет комментарии, одобряет или просит правки.

Рабочий цикл в паре

Именно так вы будете работать сегодня на занятии и дальше — в проектах и на работе:

1. Обновите main: git switch main, git pull.
2. Создайте ветку под одну задачу: git switch -c feature/order-filters.
3. Работайте и коммитьте небольшими осмысленными шагами.
4. Отправьте ветку: git push -u origin feature/order-filters. GitHub напечатает ссылку для создания PR.
5. Откройте pull request: заголовок, что сделано, зачем, как проверить. Назначьте напарника ревьюером.
6. Ревью: напарник читает diff, пишет комментарии. Вы отвечаете и правите — новые коммиты в ту же ветку попадут в PR сами.
7. Merge: после одобрения (approve) и успешных проверок PR вливают в main кнопкой Merge pull request на GitHub.
8. Уберите за собой: git switch main, git pull, git branch -d feature/order-filters.

Три способа влить PR

Для начала подойдёт первый вариант. Остальные вы выберете, когда в команде договорятся о стиле истории.

function buildPr(pr) {
  // верните строку; соберите массив строк и вызовите join("\n")
}

const pr = {
  what: ["добавлен фильтр заказов по статусу", "фильтр запоминается в localStorage"],
  why: "Менеджер хочет быстро находить неоплаченные заказы.",
  check: ["Откройте страницу заказов", "Выберите статус «Не оплачен»", "Обновите страницу: фильтр остался"],
};
console.log(buildPr(pr));

## Что сделано
- добавлен фильтр заказов по статусу
- фильтр запоминается в localStorage

## Зачем
Менеджер хочет быстро находить неоплаченные заказы.

## Как проверить
1. Откройте страницу заказов
2. Выберите статус «Не оплачен»
3. Обновите страницу: фильтр остался

function mergeProblems(pr) {
  const problems = [];
  // проверьте четыре условия и добавляйте причины в массив
  return problems;
}

const prs = [
  { title: "add order filters", approvals: 1, checks: "passed", conflicts: false, draft: false },
  { title: "fix cart total", approvals: 0, checks: "passed", conflicts: false, draft: false },
  { title: "wip: new header", approvals: 2, checks: "failed", conflicts: true, draft: true },
];
for (const pr of prs) {
  const p = mergeProblems(pr);
  console.log(`${pr.title}: ${p.length ? p.join("; ") : "можно мержить"}`);
}

add order filters: можно мержить
fix cart total: нет одобрения
wip: new header: проверки не прошли; есть конфликт; это черновик

Читать подробнее: GitHub Docs — о pull request, Pro Git — удалённые репозитории.

04 Конфликты слияния

Git умеет сливать изменения автоматически, если вы и напарник правили разные места. Но если вы оба изменили одну и ту же строку по-разному, Git не знает, чья версия верна, и просит человека решить. Это и есть конфликт. Он не поломка, а обычная часть работы: в любой команде конфликты случаются каждую неделю.

Допустим, вы с напарником правили файл rate.js. Напарник уже влил свою ветку в main, а вы сделали git pull origin main в своей ветке:

git switch feature/rate
git pull origin main
# Auto-merging rate.js
# CONFLICT (content): Merge conflict in rate.js
# Automatic merge failed; fix conflicts and then commit the result.

Git остановился и записал в файл маркеры конфликта:

// курс обмена
<<<<<<< HEAD
const convertUsd = (usd, rate = 10.9) => Math.round(usd * rate);
=======
const toSomoni = (usd) => usd * 11;
>>>>>>> origin/main

<<<<<<< HEAD

Начало конфликта. Ниже — ваша версия (из ветки, на которой вы стоите).

=======

Разделитель. Ниже — версия из другой ветки (здесь origin/main).

>>>>>>> origin/main

Конец конфликта и имя ветки, откуда пришла вторая версия.

Как разрешить конфликт

1. Откройте файл со словом CONFLICT. В VS Code над блоком появятся кнопки: Accept Current (моё), Accept Incoming (чужое), Accept Both (оба) и Compare.
2. Решите по смыслу, что должно остаться. Иногда нужно взять кусочки из обеих версий — и написать итоговый код руками. Договоритесь с автором второй правки.
3. Удалите все три строки маркеров. В файле должен остаться только нормальный код.
4. Запустите проект и убедитесь, что всё работает.
5. Завершите слияние:
   Терминал

   git add rate.js
   git commit -m "merge main into feature/rate"
   git push

Маркеры — это обычный текст, и разобрать их можно кодом. Первую задачу вы решите руками, как в настоящем конфликте. Во второй напишете «автоматическое разрешение», как это делают редакторы.

const conflicted = `// курс обмена
<<<<<<< HEAD
const toSomoni = (usd) => usd * 11;
=======
const convertUsd = (usd, rate = 10.9) => Math.round(usd * rate);
>>>>>>> feature/rate
`;

const resolved = `// курс обмена
`; // допишите итоговую строку кода

console.log("маркеры остались:", /<<<<<<<|=======|>>>>>>>/.test(resolved));
console.log("имя из main:", resolved.includes("const toSomoni ="));
console.log("формула из feature:", resolved.includes("rate = 10.9") && resolved.includes("Math.round(usd * rate)"));
console.log("лишнее убрано:", !resolved.includes("convertUsd") && !resolved.includes("usd * 11"));

маркеры остались: false
имя из main: true
формула из feature: true
лишнее убрано: true

const conflicted = [
  "<h1>MakeFirstStep</h1>",
  "<<<<<<< HEAD",
  "<p>Курсы программирования</p>",
  "=======",
  "<p>Курсы Frontend и ИИ</p>",
  ">>>>>>> feature/text",
  "<footer>Душанбе</footer>",
].join("\n");

function resolveAll(text, side) {
  const out = [];
  let part = "none"; // none | ours | theirs
  for (const line of text.split("\n")) {
    // ваш код
  }
  return out.join("\n");
}

for (const side of ["ours", "theirs", "both"]) {
  console.log(side + ": " + resolveAll(conflicted, side).split("\n").join(" / "));
}

ours: <h1>MakeFirstStep</h1> / <p>Курсы программирования</p> / <footer>Душанбе</footer>
theirs: <h1>MakeFirstStep</h1> / <p>Курсы Frontend и ИИ</p> / <footer>Душанбе</footer>
both: <h1>MakeFirstStep</h1> / <p>Курсы программирования</p> / <p>Курсы Frontend и ИИ</p> / <footer>Душанбе</footer>

Читать подробнее: Pro Git — основы ветвления и слияния (конфликты).

05 .gitignore и сообщения коммитов

.gitignore: что не должно попасть в репозиторий

В папке проекта бывают файлы, которые нельзя или не нужно хранить в Git. Их перечисляют в файле .gitignore в корне проекта: Git не будет их отслеживать и не покажет в git status.

# зависимости: восстанавливаются командой npm install
node_modules/

# готовая сборка: создаётся командой npm run build
dist/

# секреты: пароли, ключи API
.env

# логи и системный мусор
*.log
.DS_Store

имя/

Папка с этим именем, где бы она ни лежала: dist/, node_modules/.

*.расширение

Все файлы с таким окончанием: *.log.

имя

Файл с точно таким именем: .env. Файл .env.example под это правило не попадёт.

!имя

Исключение: вернуть файл под контроль Git. Стоит после общего правила.

# текст

Комментарий.

Настоящий .gitignore поддерживает ещё много синтаксиса (**, пути со слэшем), но этого хватит почти всегда. В задаче ниже вы пользуетесь именно таким упрощённым «движком».

Сообщения коммитов: Conventional Commits

Через полгода вы не вспомните, что значило «update» или «fix». Поэтому в командах договариваются о формате: тип(область): что сделано. Область необязательна.

Чтобы закрепить, посмотрим, как классификация сообщений выглядит в коде. Запустите пример и поменяйте сообщения:

const messages = ["feat: add filters", "fix(cart): sum", "update", "docs: readme"];

for (const m of messages) {
  const match = m.match(/^([a-z]+)(\([^)]*\))?: /);
  console.log(m.padEnd(20), "->", match ? match[1] : "нет типа");
}

function matchRule(rule, path) {
  const parts = path.split("/");
  const name = parts[parts.length - 1];
  if (rule.endsWith("/")) {                          // «папка/»: любой каталог с таким именем
    return parts.slice(0, -1).includes(rule.slice(0, -1));
  }
  if (rule.startsWith("*.")) return name.endsWith(rule.slice(1)); // «*.log»: по расширению
  return name === rule;                              // точное имя файла
}

function isIgnored(path, rules) {
  let ignored = false;
  for (const rule of rules) {                        // правила читаются сверху вниз
    if (rule.startsWith("!")) {                      // «!имя» возвращает файл обратно
      if (matchRule(rule.slice(1), path)) ignored = false;
    } else if (matchRule(rule, path)) {
      ignored = true;
    }
  }
  return ignored;
}

const paths = [
  "node_modules/react/index.js", "dist/app.js", "src/app.js", ".env", ".env.example",
  "debug.log", "logs/server.log", "keep.log", "README.md", ".DS_Store", "src/.DS_Store", "coverage/index.html",
];

const rules = [
  // впишите правила строками
];

console.log("игнорируются:", paths.filter((p) => isIgnored(p, rules)).join(", "));
console.log("остаются:", paths.filter((p) => !isIgnored(p, rules)).join(", "));

игнорируются: node_modules/react/index.js, dist/app.js, .env, debug.log, logs/server.log, .DS_Store, src/.DS_Store, coverage/index.html
остаются: src/app.js, .env.example, keep.log, README.md

const messages = [
  "feat: add order filters",
  "fix: wrong total in cart",
  "docs: update readme",
  "fix(cart): off-by-one in loop",
  "update",
  "feat(ui): dark theme",
  "fix: crash on empty order",
  "Changes",
];

function commitType(msg) {
  // регулярка: слово в начале, необязательная (область), двоеточие и пробел
  return "other";
}

const counts = {};
for (const m of messages) {
  const type = commitType(m);
  counts[type] = (counts[type] || 0) + 1;
}
console.log(JSON.stringify(counts));

{"feat":2,"fix":3,"docs":1,"other":2}

function lintCommit(msg) {
  const problems = [];
  return problems;
}

const list = [
  "feat: add order filters",
  "Fixed bug.",
  "fix(cart): Wrong total.",
  "docs: describe in the readme how to install dependencies and run the project",
];
for (const m of list) {
  const p = lintCommit(m);
  console.log(`${m.slice(0, 24)} -> ${p.length ? p.join("; ") : "ok"}`);
}

feat: add order filters -> ok
Fixed bug. -> нет типа вида feat: …
fix(cart): Wrong total. -> тема с заглавной буквы; точка в конце
docs: describe in the re -> тема длиннее 50 символов

Читать подробнее: Conventional Commits, документация .gitignore.

06 Ошибки: try / catch / finally и throw

Ошибки случаются у всех: пользователь ввёл пустую строку, сервер не ответил, из localStorage пришёл мусор. Если ничего не делать, программа остановится на первой же строке с ошибкой. Задача разработчика — заранее предусмотреть места, где код может упасть, и сделать так, чтобы пользователь увидел понятное сообщение, а не белый экран.

try / catch / finally

function readAge(text) {
  try {
    const age = JSON.parse(text);          // может бросить ошибку
    console.log("прочитали:", age);
    return age;
  } catch (error) {
    console.log("не получилось:", error.name);
    return 0;                              // запасной план
  } finally {
    console.log("— чтение закончено —");   // выполняется всегда
  }
}

console.log(readAge("19"));
console.log(readAge("девятнадцать"));

Ошибка внутри try немедленно прерывает его, и управление уходит в catch. Оставшиеся строки try пропускаются. В catch приходит объект ошибки (его обычно называют error или e).

Что внутри объекта ошибки

name

Тип ошибки: TypeError, ReferenceError, SyntaxError, RangeError…

message

Человеческое описание: «Cannot read properties of null».

stack

Стек вызовов — цепочка функций, которые привели к ошибке. Разберём в разделе 7.

Основные типы ошибок

try {
  const user = null;
  console.log(user.name);
} catch (error) {
  console.log("name:", error.name);
  console.log("message:", error.message);
  console.log("есть stack:", typeof error.stack === "string");
}

throw: бросаем свою ошибку

Иногда ошибку нужно создать самому. Например, функция получила от пользователя отрицательное количество. throw прерывает текущую функцию и «бросает» ошибку вверх — до ближайшего catch. Бросайте объект ошибки (new Error("текст")), а не просто строку: у объекта есть стек.

function setQuantity(qty) {
  if (!Number.isInteger(qty)) throw new TypeError("Количество должно быть целым числом");
  if (qty < 1) throw new RangeError("Количество не может быть меньше 1");
  return qty;
}

for (const value of [3, 0, 2.5]) {
  try {
    console.log("ок:", setQuantity(value));
  } catch (e) {
    console.log(`${e.name}: ${e.message}`);
  }
}

function risky() {
  throw new Error("что-то пошло не так");
}

risky();   // ошибка не поймана: выполнение остановилось
console.log("до этой строки мы уже не дойдём");

Ошибки в асинхронном коде ловят тем же try / catch вокруг await (вы видели это на уроке 13, а на следующих уроках будете так обрабатывать запросы fetch). Отдельный try вокруг setTimeout не сработает: колбэк выполнится позже, когда блок уже завершился.

const log = [];   // сюда код собирает «вывод»
function test() {
  try {
    log.push("1: try");
    return "результат";
  } catch (e) {
    log.push("catch");
  } finally {
    log.push("2: finally");
  }
  log.push("после");
}
log.push("3: " + test());

const prediction = [];   // ваш прогноз: строки по порядку
console.log(log.join("|") === prediction.join("|") ? "Верно!" : "Не угадали, подумайте ещё");

Верно!

function errorName(fn) {
  // try / catch
}

const tests = [
  () => { const user = null; return user.name; },
  () => missingVariable + 1,
  () => JSON.parse("{name: 'Али'}"),
  () => new Array(-5),
  () => 2 + 2,
];
tests.forEach((t, i) => console.log(i + 1, errorName(t)));

1 TypeError
2 ReferenceError
3 SyntaxError
4 RangeError
5 ok

function safeParse(text, fallback) {
  // try / catch
}

console.log(safeParse('{"name":"Фарҳод","age":19}', null).name);
console.log(safeParse("{name: Фарҳод}", "пусто"));
console.log(safeParse("", []).length);

Фарҳод
ошибка чтения: SyntaxError
пусто
ошибка чтения: SyntaxError
0

function withdraw(balance, amount) {
  // две проверки с throw, затем return
}

for (const amount of [200, 0, 5000, -10]) {
  try {
    console.log("остаток:", withdraw(1000, amount));
  } catch (e) {
    console.log(`${e.name}: ${e.message}`);
  } finally {
    console.log("— операция завершена —");
  }
}

остаток: 800
— операция завершена —
RangeError: Сумма должна быть больше нуля
— операция завершена —
Error: Недостаточно сомони
— операция завершена —
RangeError: Сумма должна быть больше нуля
— операция завершена —

function fail(field, message) {
  const e = new Error(message);
  e.name = "ValidationError";
  e.field = field;
  throw e;
}

function validate(order) {
  // две проверки через fail(...)
}

function process(order) {
  try {
    validate(order);
    return "заказ принят";
  } catch (e) {
    if (e.name === "ValidationError") return `поле ${e.field}: ${e.message}`;
    throw e; // чужие ошибки не глотаем
  }
}

console.log(process({ name: "Мадина", qty: 2 }));
console.log(process({ name: "", qty: 2 }));
console.log(process({ name: "Рустам", qty: 0 }));
try {
  process(null);
} catch (e) {
  console.log("неожиданная ошибка:", e.name);
}

заказ принят
поле name: укажите имя
поле qty: минимум 1 штука
неожиданная ошибка: TypeError

Читать подробнее: learn.javascript.ru — обработка ошибок, try…catch, MDN — try...catch.

07 Стек вызовов и DevTools

Как читать красную ошибку

Когда код падает, браузер печатает красную строку и стек вызовов: список функций от места ошибки до самого начала. Читайте его сверху вниз: первая строка — где упало, следующие — кто вызвал эту функцию.

Uncaught TypeError: Cannot read properties of undefined (reading 'price')
    at calcTotal (cart.js:12:23)
    at renderCart (ui.js:48:15)
    at HTMLButtonElement.<anonymous> (main.js:7:3)

1. Тип и сообщение: TypeError — читаем свойство price у undefined. Значит, где-то вместо товара пришёл undefined.
2. Верхняя строка стека: calcTotal (cart.js:12:23) — функция calcTotal, файл cart.js, строка 12, символ 23. Здесь упало.
3. Вторая строка: renderCart вызвала calcTotal. Часто баг не в верхней функции, а в том, что ей передали.
4. Последняя строка: всё началось с клика по кнопке в main.js.

Клик по cart.js:12 в консоли DevTools откроет этот файл на нужной строке.

function inner() {
  throw new Error("сломалось внутри");
}
function outer() {
  inner();
}

try {
  outer();
} catch (e) {
  const first = e.stack.split("\n")[0];   // первая строка стека — «Тип: сообщение»
  console.log(first);
  console.log("в стеке есть outer:", e.stack.includes("outer"));
}

DevTools: инструменты разработчика

Откройте DevTools на любой странице: F12 или Ctrl+Shift+I (на Mac — Cmd+Option+I). Главные вкладки для отладки:

Console — консоль

Показывает ошибки, предупреждения и ваши console.log. Можно набирать JavaScript прямо в консоли и сразу получать результат. Полезные методы:

const price = 20;
const qty = 3;

console.log(price, qty);           // 20 3 — что есть что?
console.log({ price, qty });       // { price: 20, qty: 3 } — понятно сразу
console.log("итого:", price * qty);

Sources — пошаговая отладка и breakpoints

Вместо десятка console.log можно остановить программу на нужной строке и осмотреться. Откройте вкладку Sources, выберите файл и кликните по номеру строки слева: появится синяя метка — breakpoint. Теперь выполните действие на странице (например, нажмите кнопку): выполнение замрёт перед этой строкой.

1. Осмотритесь. Справа в панели Scope видны значения всех переменных на этот момент. В Watch можно добавить любое выражение, например items.length. В Call Stack — тот самый стек вызовов.
2. Идите по шагам. F10 (Step over) — выполнить строку и перейти к следующей. F11 (Step into) — зайти внутрь вызываемой функции. Shift+F11 (Step out) — выйти из функции. F8 — продолжить до следующего breakpoint.
3. Сравните ожидание с реальностью. На какой строке значение стало не таким, как вы думали? Это и есть место бага.

Удобные вариации: условный breakpoint (правый клик по номеру строки → Add conditional breakpoint, например i === 3) и Pause on exceptions (кнопка с паузой): DevTools сам остановится в момент, когда код бросит ошибку.

Оператор debugger

Если не хочется искать нужную строку в DevTools, поставьте в коде оператор debugger;. Когда DevTools открыты, выполнение остановится именно здесь, как на breakpoint. Если DevTools закрыты, оператор ничего не делает.

function calcTotal(items) {
  let sum = 0;
  for (const item of items) {
    debugger;               // здесь программа остановится, если открыт DevTools
    sum += item.price;
  }
  return sum;
}

Network — сеть

Вкладка Network показывает каждый запрос страницы: HTML, картинки, fetch к API. Включите её до действия на странице (или обновите страницу). Для запросов fetch нажмите фильтр Fetch/XHR.

• Status: 200 — успех, 404 — адрес не найден, 500 — сломался сервер. Красная строка — запрос не удался (например, нет интернета).
• Кликните по запросу: Headers (адрес, метод, заголовки), Payload (что отправили), Preview / Response (что ответил сервер), Timing (сколько ждали).
• Типичный вопрос «почему на странице пусто?»: смотрим в Network — пришёл ли ответ, какой статус, нет ли ошибки в теле ответа.

Метод отладки: шесть шагов

1. Воспроизведите баг: что именно нажимать и вводить, чтобы он повторился каждый раз.
2. Сузьте: уберите всё лишнее, пока не останется минимальный код с багом.
3. Прочитайте сообщение об ошибке и стек. Часто ответ уже написан там.
4. Выдвиньте гипотезу: «значение стало undefined здесь, потому что…».
5. Проверьте гипотезу одной проверкой: console.log или breakpoint. Одной, а не пятью сразу.
6. Исправьте и перепроверьте: баг ушёл, остальное не сломалось? Напишите в коммите, что было причиной.

const stack = `TypeError: Cannot read properties of undefined (reading 'price')
    at calcTotal (cart.js:12:23)
    at renderCart (ui.js:48:15)
    at HTMLButtonElement.<anonymous> (main.js:7:3)`;

function parseFrame(line) {
  // регулярка: at (.+?) \((.+?):(\d+):(\d+)\)
  return { fn: "?", file: "?", line: 0 };
}

const frames = stack.split("\n").filter((l) => l.trim().startsWith("at ")).map(parseFrame);
console.log("ошибка в:", frames[0].fn, frames[0].file, frames[0].line);
console.log("глубина стека:", frames.length);
console.log("всё началось в файле:", frames[frames.length - 1].file);

ошибка в: calcTotal cart.js 12
глубина стека: 3
всё началось в файле: main.js

function sumPositive(numbers) {
  let sum = 0;
  for (const n of numbers) {
    if (n > 0) sum += n;
    // сюда добавьте console.log
  }
  return sum;
}

console.log(sumPositive([5, -3, 10, 0, 7]));

n=5, sum=5
n=-3, sum=5
n=10, sum=15
n=0, sum=15
n=7, sum=22
22

Читать подробнее: Chrome DevTools — отладка JavaScript, learn.javascript.ru — отладка в браузере.

08 Найди и почини баг

Большая часть багов — это небольшой набор «классических» ошибок. Если вы знаете, как они выглядят, искать станет в разы быстрее. Вот карта:

Пример разбора

Вот баг и его отладка «на словах». Запустите:

const scores = [70, 85, 90];

function average(list) {
  let sum = 0;
  for (let i = 0; i < list.length; i++) {
    sum += list[i];
  }
  return sum / list.length + 1;
}

console.log(average(scores));

Ожидали около 81.67, получили около 82.67. Гипотеза: что-то прибавляется лишнее. Проверка: console.log(sum / list.length) перед return — это 81.67. Значит, виновата последняя строка: + 1 лишняя. Видите: мы не «правили наугад», а сузили поиск проверкой.

Off-by-one и неверные сравнения

const prices = [120, 80, 45, 200];

function total(list) {
  let sum = 0;
  for (let i = 0; i <= list.length; i++) {
    sum += list[i];
  }
  return sum;
}

console.log(total(prices));

445

const students = ["Алишер", "Бахтиёр", "Дилшод", "Зарина", "Мадина", "Нигина", "Рустам"];

function getPage(list, page, size) {
  const start = page * size;
  return list.slice(start, start + size);
}

console.log(getPage(students, 1, 3).join(", "));
console.log(getPage(students, 2, 3).join(", "));
console.log(getPage(students, 3, 3).join(", "));

Алишер, Бахтиёр, Дилшод
Зарина, Мадина, Нигина
Рустам

function top3(scores) {
  const sorted = [...scores].sort();
  return sorted.reverse().slice(0, 3);
}

console.log(top3([85, 9, 100, 42, 7]).join(", "));

100, 85, 42

function cheaper(a, b) {
  return a < b ? a : b;
}

function label(price) {
  if (price = 0) return "бесплатно";
  return price + " сомони";
}

console.log(cheaper("9", "100"));
console.log(cheaper("45", "5"));
console.log(label(35));
console.log(label(0));

9
5
35 сомони
бесплатно

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function cook(dish) {
  await delay(10);
  return `${dish} готов`;
}

const dishes = ["плов", "самбуса", "лагман"];

async function main() {
  dishes.forEach(async (d) => {
    console.log(await cook(d));
  });
  console.log("Все блюда готовы!");
}

main();

плов готов
самбуса готов
лагман готов
Все блюда готовы!

const getPrice = (id) => new Promise((resolve) => setTimeout(() => resolve(id * 10), 20));

async function showTotal() {
  const a = getPrice(3);
  const b = getPrice(5);
  console.log("Итого:", a + b);
}

showTotal();

Итого: 80

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log("таймер", i), i * 10);
}

таймер 1
таймер 2
таймер 3

const cart = [
  { name: "Чай", price: 15 },
  { name: "Нон", price: 4 },
  { name: "Плов", price: 35 },
];

function cheapest(items) {
  return items.sort((a, b) => a.price - b.price)[0];
}

console.log(cheapest(cart).name);
console.log(cart.map((i) => i.name).join(", "));

Нон
Чай, Нон, Плов

const grid = new Array(3).fill([]);
grid[0].push("A1");
grid[2].push("C1");
console.log(grid.map((row) => row.length).join(","));

const state = { user: "Али", tags: ["js"] };
const copy = { ...state };
copy.tags.push("git");
console.log(state.tags.join(","));

1,0,1
js

Читать подробнее: learn.javascript.ru — сортировка sort(fn), MDN — Array.prototype.sort.

09 ИИ: коммиты, описание PR и вопрос про баг

1. Коммит и описание PR по diff

Скопируйте вывод git diff --staged и попросите ИИ сформулировать сообщение. Без контекста он напишет «update files»:

Что проверить в ответе:

• Тип соответствует правде: feat или fix, а не «на всякий случай».
• В тексте нет того, чего нет в diff (ИИ любит добавлять «улучшил производительность», когда вы её не трогали).
• Сообщение конкретное: пропустите его через проверки из задач 5.3 и 9.2.
• Если в diff две разные мысли, лучше разбить на два коммита, а не просить ИИ «объединить красиво».

2. Баг: вместо «не работает» — минимальный воспроизводимый пример

Минимальный воспроизводимый пример (minimal reproducible example, MRE) — самый короткий код, в котором баг всё ещё виден. Как его получить:

1. Скопируйте проблемное место в отдельный файл или в консоль на этой странице.
2. Удаляйте всё лишнее по кусочку: стили, соседние функции, лишние поля. После каждого шага проверяйте, что баг на месте.
3. Подставьте простые данные вместо запросов к серверу: массив из 2–3 элементов.
4. Запишите ожидаемый и фактический результат, а также текст ошибки дословно.

Бонус: пока вы упрощали код, вы часто сами находите баг. Это нормально и очень ценно. Метод называется «утёнок»: объяснить проблему вслух настолько ясно, что ответ находится сам.

В шпаргалку промптов добавьте две строки этого урока — «Коммиты и pull request» и «Баг вместо „не работает“». Потренируем оба навыка кодом.

function bugPrompt(bug) {
  // верните строку из строк:
  // Баг: ожидаю «…», получаю «…».
  // Минимальный код:
  // <код>
  // Ошибка в консоли: …
  // Дай 3 гипотезы причины по вероятности.
}

console.log(bugPrompt({
  expected: "45",
  actual: "NaN",
  code: "const prices = [20, 25];\nlet sum = 0;\nfor (let i = 0; i <= prices.length; i++) sum += prices[i];\nconsole.log(sum);",
}));
console.log("---");
console.log(bugPrompt({ expected: "Привет, Али", actual: "Привет, undefined", code: "greet({ nam: 'Али' })", error: "ошибки нет" }));

Баг: ожидаю «45», получаю «NaN».
Минимальный код:
const prices = [20, 25];
let sum = 0;
for (let i = 0; i <= prices.length; i++) sum += prices[i];
console.log(sum);
Ошибка в консоли: нет
Дай 3 гипотезы причины по вероятности.
---
Баг: ожидаю «Привет, Али», получаю «Привет, undefined».
Минимальный код:
greet({ nam: 'Али' })
Ошибка в консоли: ошибки нет
Дай 3 гипотезы причины по вероятности.

const generic = ["stuff", "things", "changes", "bug", "bugs", "code", "files"];

function isVague(msg) {
  // 1) уберите тип: msg.replace(/^\w+(\([^)]*\))?:\s*/, "")
  // 2) посчитайте слова и проверьте generic
  return false;
}

const ai = [
  "feat: add order filters",
  "update",
  "fix: bug",
  "chore: bump deps",
  "fix: update stuff",
  "docs: describe setup steps",
];
ai.forEach((m) => console.log(`${m} -> ${isVague(m) ? "vague" : "ok"}`));

feat: add order filters -> ok
update -> vague
fix: bug -> vague
chore: bump deps -> ok
fix: update stuff -> vague
docs: describe setup steps -> ok

10 Практика на уроке: работа в парах

Цель: пройти полный цикл командной работы — ветка → PR → ревью → merge — и найти три подсаженных бага в проекте напарника. Работаем в парах: студент А и студент Б. Ориентир по времени на 90 минут: подготовка 10, цикл с PR 35, конфликт 10, охота за багами 25, разбор 10.

Часть 1. Репозиторий и роли (10 минут)

1. Студент А создаёт на GitHub репозиторий pair-shop (с README) и в настройках Settings → Collaborators приглашает Б. Б принимает приглашение в почте.
2. Оба клонируют репозиторий:
   Терминал

   git clone https://github.com/ЛОГИН_А/pair-shop.git
   cd pair-shop

3. Договоритесь, что вы делаете: А — функцию calcTotal и discount, Б — отображение корзины. Каждый работает в своём файле.

Часть 2. Ветка, коммиты, PR (35 минут)

1. Каждый создаёт свою ветку: А — feature/calc-total, Б — feature/cart-view.
2. Сделайте минимум три коммита в ветке, каждый — одна мысль, сообщения по Conventional Commits:
   Терминал

   git add cart.js
   git commit -m "feat: add calcTotal"
   git add cart.js
   git commit -m "feat: add 10 percent discount"
   git add README.md
   git commit -m "docs: describe cart module"

3. Отправьте ветку и откройте pull request на GitHub. В описании — три раздела: «Что сделано», «Зачем», «Как проверить». Ревьюер — напарник.
   Терминал

   git push -u origin feature/calc-total

4. Ревью: прочитайте PR напарника по чек-листу из раздела 3. Оставьте минимум два комментария к конкретным строкам: один с вопросом, один с предложением. Запустите код ветки.
5. Автор отвечает на комментарии и правит код новыми коммитами в ту же ветку. Ревьюер нажимает Approve.
6. Автор нажимает Merge pull request. Затем оба обновляют main:
   Терминал

   git switch main
   git pull
   git branch -d feature/calc-total

Часть 3. Конфликт нарочно (10 минут)

1. Оба создают новые ветки от свежего main и меняют одну и ту же строку в README (например, заголовок) — по-разному.
2. А вливает свой PR первым. Б делает git pull origin main в своей ветке — появляется конфликт.
3. Б решает конфликт вместе с А (договариваются об итоговом тексте), делает git add, git commit, git push. PR Б обновился и больше не конфликтует.

Часть 4. Три подсаженных бага (25 минут)

Каждый тайком вносит в свой проект три бага разных типов (из карты в разделе 8) и пушит в новую ветку bugs/названия. Напарник чинит их, пользуясь методом из раздела 7: воспроизвести, прочитать ошибку, поставить breakpoint или лог, сделать исправление отдельным коммитом fix: … с причиной. Тренировочная версия такого проекта — задача ниже: прочитайте её как ревью чужого кода.

const products = [
  { id: 1, name: "Курс Frontend", price: 450 },
  { id: 2, name: "Футболка MakeFirstStep", price: 80 },
  { id: 3, name: "Блокнот", price: 20 },
];

function calcTotal(items) {
  let sum = 0;
  for (let i = 1; i < items.length; i++) {
    sum += items[i].price;
  }
  return sum;
}

function priceWithDiscount(items) {
  const total = calcTotal(items);
  return total > 500 ? total * 0.9 : total;
}

function withDelivery(items) {
  items.push({ id: 0, name: "Доставка", price: 15 });
  return items;
}

const cart = [products[0], products[1], products[2]];
const cart500 = [products[0], { id: 9, name: "Стикеры", price: 50 }];

console.log(calcTotal(cart));
console.log(priceWithDiscount(cart));
console.log(priceWithDiscount(cart500));
console.log(calcTotal(withDelivery(cart)));
console.log(cart.length);

550
495
450
565
3

11 Домашнее задание

Оформите репозиторий так, чтобы его не стыдно было показать работодателю, и найдите три бага с разбором причины. Можно взять проект одного из прошлых уроков (например, мини-проект №1) или проект из пары.

Часть 1. Репозиторий

1. Репозиторий на GitHub публичный, у него осмысленное имя и описание.
2. В истории минимум 10 осмысленных коммитов по Conventional Commits: каждый — одна мысль, ни одного «update», «fix», «final». Проверьте историю командой git log --oneline.
3. Есть минимум одна ветка кроме main и влитый pull request с описанием (что сделано, зачем, как проверить). Если работаете в одиночку, откройте PR из своей ветки в main и сами посмотрите diff как ревьюер.
4. В корне есть .gitignore (минимум: node_modules/, .env, .DS_Store, *.log) и в репозитории нет мусорных файлов.
5. В корне есть README.md по шаблону ниже.

# Название проекта

Одно предложение: что это и для кого.

## Что умеет
- функция 1
- функция 2

## Как запустить
1. Склонируйте репозиторий
2. Откройте index.html в браузере (или npm install && npm run dev)

## Скриншот
![скриншот](screenshot.png)

## Что я использовал
HTML, CSS, JavaScript, Git/GitHub

## Автор
Имя, группа курса

Часть 2. Три бага

1. Найдите в своём или в чужом проекте три реальных бага разных типов: например, off-by-one, неверное сравнение, мутация, ошибка порядка асинхронного кода. Если не нашлось — внесите их в копию проекта сами и попросите знакомого найти.
2. Для каждого бага сделайте отдельный коммит fix: … с исправлением.
3. Создайте в репозитории файл BUGS.md и опишите каждый баг по шаблону ниже.
4. Один из трёх разборов сопроводите промптом к ИИ в формате «минимальный воспроизводимый пример» и вставьте в файл ответ ИИ вместе со своей оценкой: что подтвердилось запуском, а что оказалось неверным.

## Баг 1: итоговая сумма корзины меньше правильной

- **Симптом:** ожидал 550, получил 530.
- **Как воспроизвести:** добавить три товара и посмотреть сумму.
- **Причина:** цикл начинался с i = 1 и пропускал первый товар (off-by-one).
- **Как нашёл:** поставил breakpoint в calcTotal, увидел, что цикл идёт с индекса 1.
- **Исправление:** коммит `a1b2c3d` — `fix: count first item in total`.
- **Как не допустить снова:** проверять границы цикла на массиве из 1 и 0 элементов.

Что сдавать

• Ссылку на публичный репозиторий GitHub.
• Ссылку на влитый pull request.
• В репозитории: README.md, .gitignore, BUGS.md.

Как оцениваем (0–10)