Отладка кода
Основная цель отладки: получить больше информации об ошибке. Это необходимо для того, чтобы правильно поставить вопрос, если существует баг или проблема которые нужно решить.
Алгоритм простой и понятный. Ключевое здесь: если есть трудности — обращаться за помощью.
Гуглим ошибку. Нашли решение? Если да, то внедряем к себе и идём дальше. Если нет, то начинаем дебажить.
Необходимо найти место, провоцирующее ошибку.
-
Это можно сделать с помощью трейса: при появлении ошибки в консоли будет цепочка вызовов, по которой можно найти строчку / файл, провоцирующий ошибку.
-
Если не получилось локализовать проблему в течение 30 мин: обращаемся за помощью. Обращаться за помощью нужно предоставив все логи и в подробностях описав свои действия, предшествовавших ошибке.
-
Далее. После локализации проблемы:
- (рекомендовано) ставим брейкпоинты и переходим в дебаг. Работа с дебагом описана ниже.
- Либо ставим
console.logна каждой строчке. Первое что нужно выяснить – какая строка провоцирует ошибку, если она еще неизвестна.
-
Когда видим проблемную строку – смотрим еще раз на лог об ошибке. В 90% случаев там будет сказано, в чем проблема.
-
Если нет лога об ошибке или не понимаем что там написано или течение 30 мин не можем разобраться с проблемой: обращаемся за помощью.
В обращении за помощью необходимо приложить:
- Проблемную строку, лог об ошибке (если есть),
- Закоммитить код где можно воспроизвести проблему
- Приложить гайд, как это сделать (что запустить, куда смотреть)
- Расставляем брейкпоинты
- Запускаем через IDE проект (macOS: ^ + R)
- Зажав Cmd + Shift / Ctrl + Shift в консоли кликаем по URL запущенного сервера
- Открывается стандартный браузер (желательно Chrome)
- Дебажим
- Создаем конфигурации запуска для дебага. Конечно же вставляя свои названия и URL для запуска:
NodeJS debug
Javascript debug
- Запускаем наш проект в
dev - Запускаем конфиг
NodeJS debug - Чтобы другим участникам проекта не надо было создавать свои конфиги, можно их сохранить в проекте, нажав вверху на галочку "Store as project file"
Интерфейс
- Текущая отрабатываемая строка
- Значения переменных на текущем этапе. Обрати внимание, что идет разделение по областям видимости.
- Пошаговое выполнение кода:
- Step over - выполнить текущую строку, не проваливаясь в нее
- Step into - выполнить текущую строку, проваливаясь в нее для детального анализа работы кода. Например когда конкретно данная строка не работает как ожидается
- Force step into - то же что и выше, но уникальные случаи когда step into пропускает их, не будут пропущены
- Step out - обратная операция step into. Возврат на уровень выше к исполнителю.
- Run to cursor - исполняет код до вашего курсора в редакторе
- Общая работа с дебаггером:
- Перезапустить процесс дебаггера
- Перезагрузить страницу браузера
- Настройка процесса
- Продолжить исполнение программы. Остановится на следующем брейкпоинте, если есть
- Остановить программу
- Показать брейкпоинты
- Замьютить брейкпоинты. Если не нужно чтобы программа останавливалась на них
- Включить остановку программы при ошибках/exception
Может сюда стоит добавить некоторые советы и внешние ссылки?