Модуль 1 · Урок 3
Редактор коду, браузер і DevTools
Професійний workflow відділяє source of truth від тимчасового experiment. Code editor зберігає plain-text files; browser виконує результат; DevTools показує evidence про live DOM, requests і runtime errors.
Відкривайте folder, не випадковий file
Project folder дає editor context для tree, search, diagnostics і relative paths. Word processor непридатний для source code: formatting metadata не є HTML/CSS/JS.
Чотири панелі — чотири питання
| Panel | Питання | Не доводить |
|---|---|---|
| Elements | Який live DOM і computed style? | Що source file збережено |
| Console | Які runtime messages/errors? | Що всі flows перевірені |
| Network | Які requests, status, type, timing? | Що response семантично правильний |
| Sources | Який resource завантажив browser? | Що local editor має ту саму version |
Evidence-driven loop
- Відтворіть observable symptom.
- Назвіть expected і actual.
- Знайдіть owner file/request/message.
- Змініть source, save, reload і перевірте effect.
- Запишіть limitation: cache, viewport, environment, unsaved file або stale tab.
AI suggestion — не evidence
Autocomplete або AI може запропонувати change, але developer перевіряє syntax, behavior, accessibility, privacy та diff перед прийняттям.
Практика
Заповніть чотири рядки `devtools-observations.csv`: baseline, observed, evidence, interpretation і next action. Тимчасово змініть heading в Elements, reload і поясніть, чому зміна зникла.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.