Модуль 6 · Урок 24
DevTools: Elements, Styles, Console і evidence
DevTools — лабораторія спостережень і тимчасових experiments. Професійний QA зберігає baseline, exact action, observation і reset, а не надсилає скриншот інспектора без контексту.
Elements: live tree, не repository source
Inspect mode знаходить element, Elements показує current DOM, attributes, accessibility info, event listeners та layout badges. Edit attribute/text або force `:hover/:focus` для hypothesis. Після reload зміни зникають, якщо немає Local Overrides/Workspace.
Не «виправляйте production» у DevTools
Local edit доводить можливий mechanism, але production fix потребує source change, review, deployment і acceptance test.
Styles і Computed
Styles показує matched, inherited, overridden, inactive та invalid declarations; Computed — resolved properties. Використовуйте links до source rule, box model, flex/grid overlays і force state. Для defect report збережіть selector, winning rule/source, computed value, viewport/theme і local toggle result.
| Питання | Panel/evidence |
|---|---|
| Чому color інший? | Styles winner + overridden declaration + Computed color. |
| Чому overflow? | Elements geometry + box model + computed min/width. |
| Чому focus style не видно? | Force :focus-visible + matched rules + screenshot. |
Console як REPL і журнал
Console показує page messages/errors і виконує JavaScript у вибраному context. `$0` посилається на останній inspected element; `document.querySelector()` та properties допомагають перевірити hypothesis. Не вставляйте невідомий code і не змінюйте production data через Console.
DOM breakpoints і change evidence
Break on subtree/attribute/node removal допомагає зупинити script у момент mutation. Changes/Local Overrides можуть відстежити experiments, але evidence має відділяти original behavior від локального altered state.
URL/build/time → viewport/theme/state → panel/selector → exact observation → local experiment → reload/reset → independent reproduction → redaction → linked finding.
Web Inspection Lab
- Порівняйте source та live DOM.
- Перевірте form invalid/submitting states.
- Знайдіть CSS winner і computed value.
- Виконайте один local experiment та reload reset.
- Оформіть finding у `web-inspection-report.csv`.
Офіційні джерела
Модуль 6 завершено
Після тесту прогрес стане 24/24 опублікованих уроків. Проєкт 1 лишається доступним після 20 уроків; фінал і сертифікат закриті до повної програми.
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.