Отладка в DevTools
Панели Chrome DevTools, консоль, точки останова и как читать ошибку.
Обновлено
Что значит отладка
Отладка (debugging) = поиск причины бага. Самая частая ошибка — угадывать и менять код наугад, пока «не заработает». Правильный метод — наблюдать, что код делает на самом деле, а главный инструмент для этого — Chrome DevTools (F12 / ⌥⌘I).
Панели DevTools — что делает каждая
| Панель | Чем помогает |
|---|---|
| Elements | реальный DOM и применённый CSS: какое правило побеждает, откуда оно, блочная модель; можно править вживую |
| Console | ошибки, console.log, запуск JS в контексте страницы |
| Sources | код + точки останова: останавливаете выполнение и смотрите переменные |
| Network | все запросы: статус, заголовки, тело, время, кэш, cookie |
| Application | cookie, localStorage, sessionStorage, IndexedDB, service workers |
| Performance | записываете взаимодействие и видите, что занимает время (JS, layout, paint) |
| Lighthouse | автоматический аудит: производительность, доступность, SEO |
Плюс расширение React DevTools: дерево компонентов, props, состояние и Profiler (какие компоненты перерисовываются и почему).
Console — больше, чем console.log
| Метод | Когда |
|---|---|
console.log({ user, cart }) |
с фигурными скобками — видны и имена переменных |
console.table(users) |
массив объектов в виде таблицы |
console.error / console.warn |
выделены цветом, со stack trace |
console.time('x') / console.timeEnd('x') |
сколько длится кусок кода |
console.trace() |
кто вызвал функцию |
$0 в консоли |
элемент, выбранный в Elements |
Точки останова — инструмент, которым мало кто пользуется
Вместо 10 console.log вы останавливаете код ровно там, где нужно:
| Вид | Как |
|---|---|
| на строке | клик по номеру строки в Sources |
debugger; |
пишется в коде — останавливается там, пока открыт DevTools |
| условная | правый клик → «Add conditional breakpoint» → id === 42 |
| на событии | Sources → Event Listener Breakpoints → click |
| на запросе | «XHR/fetch breakpoints» — останавливается при запросе URL |
| на исключениях | «Pause on exceptions» — останавливается ровно там, где возникла ошибка |
Во время остановки видны все переменные в области видимости, call stack (кто кого вызвал), и можно идти по шагам (step over / into / out).
Как читать ошибку
TypeError: Cannot read properties of undefined (reading 'name')
at UserCard (user-card.tsx:12:24)
at renderWithHooks (react-dom.development.js:...)
- Тип (
TypeError) и сообщение: вы прочитали.nameу значенияundefined. - Первая строка вашего кода в стеке:
user-card.tsx, строка 12, колонка 24 — отсюда и начинаете. - Вопрос: почему здесь
undefined? — точка останова на строке 12, смотрите значения.
Метод в 5 шагов
- Воспроизведите баг стабильно, с понятными шагами.
- Изолируйте: где разница между ожидаемым и происходящим? (Network: данные приходят неверные? Elements: CSS другой?)
- Сформулируйте гипотезу и проверьте её точкой останова / логом — не меняйте код наугад.
- Исправьте причину, а не симптом.
- Напишите тест, чтобы баг не вернулся, — см. Тестирование.
Коротко
- Elements — для DOM и CSS, Network — для запросов, Application — для хранилищ, Sources — для точек останова.
- Точки останова (в том числе условные и на исключениях) вместо десятков
console.log. - Читайте ошибку: тип, сообщение, первая строка своего кода.