Что такое дебажить код
10 консольных команд, которые помогут дебажить JavaScript-код like a PRO
Перевели статью Амита Соланки по отладке JavaScript-кода при помощи консольных команд. По словам автора, эти команды помогут значительно повысить производительность труда программиста при поиске багов и сэкономят кучу времени.
Давайте рассмотрим команды, которые действительно способны упростить жизнь любому программисту.
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Группировка логов при помощи console.group(‘name’) и console.groupEnd(‘name’)
Консольные команды console.group(‘name’) и console.groupEnd(‘name’) обеспечивают группировку нескольких разрозненных логов в единое раскрывающееся дерево, которое дает быстрый доступ к любому из логов. Более того, эти команды позволяют формировать вложенные деревья для последующей группировки.
Всего здесь три метода. Первый, console.group(‘name’), отмечает начало группировки, второй, console.groupEnd(‘name’), отмечает окончание, а console.groupCollapsed() формирует группу в режиме свернутого дерева.
Трассировка console.trace()
Если программисту необходим полный стек вызова функции, то стоит воспользоваться командой console.trace(). Пример работы с ней:
Считаем вызовы с console.count()
Команда console.count() позволяет показать количество раз, которое ее вызывали. Стоит помнить: если изменить строку лога, которая отдается команде, то отсчет пойдет по новой. При желании можно сбросить счетчик командой console.countReset().
Запуск и остановка таймера с console.time() и console.timeEnd()
Здесь все просто. Обе команды управляют таймером, позволяя запустить или остановить его. Обычно они используются для проверки производительности. Кроме того, при желании можно создать специфический таймер — в этом случае необходимо передать строку любой из команд.
Логические выражения и console.assert()
Для работы с логическими выражениями незаменима функция console.assert(). Она позволяет проверить, приняло ли какое-либо выражение значение false. Результат записывается в лог. В принципе, можно использовать if, но консоль более удобна. Пример работы с командой:
Профилирование с console.profile()
Команда console.profile() позволяет без проблем запустить профилирование. Работа руками в этом случае не нужна, поскольку команда все делает сама.
Таймлайн и console.timeStamp()
Еще одна полезная функция, console.timeStamp(), добавляет метку времени для определенных событий. Ее можно использовать для фиксации момента возвращения вызова API или записи времени завершения процесса обработки данных. Собственно, кейсов здесь много.
Очистка консоли console.clear()
Здесь все просто. Если хотите очистить консоль, используйте console.clear().
Свойство console.memory
Позволяет отображать размер буфера. Использовать его стоит, если не слишком понятна статистика производительности, а знакомиться с графиками времени нет.
Вывод таблицы с console.table()
Функция console.table() позволяет выводить небольшую таблицу, с которой разработчик может взаимодействовать. В качестве аргумента здесь используется массив, его необходимо передать для вызова.
Собственно, на этом сегодня все. Если у вас собственные лайфхаки отладки, делитесь ими в комментариях, — мы будем вам благодарны.
Как дебажить программу
Введение
Обычный алгоритм решения задачи выглядит так:
Написать код решения (или лучше части решения).
Тестировать решение на своем компьютере (или лучше потестировать часть решения)
3+) Если не работает, то дебажить, пока не заработает на всех тестах.
4+++) Спросить преподавателя. Впрочем, этим методом можно и нужно пользоваться на более ранних стадиях, если вы только начинаете заниматься программированием
Здесь будут собраны советы о том, что делать в пунктах, начиная с 2.
Про первый пункт советов не будет 🙁 Разве что совет, что придумать решение необходимо ДО того, как писать код.
Что делать, пока пишешь код
Проследите путь каждой переменной и каждого цикла
Нужно для каждой переменной понимать * чему она равна изначально * как она меняется в какой части программы * какие значения она может понимать, а какие нет.
Также и для каждого цикла нужно понимать * какая будет первая итерация * в какой момент он закончится * сколько всего будет итераций * нет ли где-то выхода за границы массива
Пишите по кодстайлу
Зачем? * увидеть ошибку в структурированном коде гораздо проще, чем в каше * чужому человеку и вам в будущем читать ваш непонятный код будет гораздо сложнее и неприятнее * в промышленном программировании именно так все и пишут, полезно привыкнуть
Делите код на функции как можно более сильно
Почему? * в длинном сплошном коде легко не заметить ошибку * отдельные функции очень просто тестировать * если функция применяется несколько раз, то не нужно копировать код, что хорошо, так как при копировании кода можно скопировать ошибку, увидеть ее, исправить в одном месте, а в другом она * в промышленном программировании именно так все и пишут, полезно привыкнуть
Вот пример, когда в программе без функций найти ошибку тяжело: (код Сережи Карпышева)
Если все это сделать, то код станет понятным, в функции из одной строчки ошибиться очень тяжело. А еще каждую функцию можно легко потестировать отдельно, разобрать крайние случаи для каждой отдельной функции.
Как дебажить, если знаешь тест, на котором не работает
TODO описать процесс и виды дебага
Самые частые ошибки, если у вас все работает, а в тестирующей системе нет
Выход за границы массива
Поэтому: * C++ чаще всего не видит эту ошибку и работает дальше. * Ваша программа может работать по-разному у вас и на сервере.
Слишком маленький тип данных
Нужно знать, что * int содержит числа примерно от \(-2 * 10^9\) до \(2 * 10^9\) * unsigned int содержит числа примерно от \(0\) до \(4 * 10^9\) * long long содержит числа примерно от \(-9 * 10^18\) до \(9 * 10^18\) * unsigned long long содержит числа примерно от \(0\) до \(18 * 10^18\)
И всегда проверять, что когда вы * складываете * умножаете * вычитаете
числа, они все еще помещаются в выбранный вами тип.
Например, в задаче про быстрое возведение в степень, по условию гарантируется, что \(x, N, P \leq 2 * 10^9.\) Это значит, что в тип int они влезут.
Крайние случаи
Вы решаете не ту задачу
Перечитайте условие, возможно, вы просто праивльно решили не ту задачу, которую надо сдать, а немножко другую. Возможно, вы забыли про какой-то важный случай или принципиально делаете что-то не то.
Стресс-тестирование
Но если вы достаточно много тестировали свою задачу, то вам может помочь стресс-тестирование
Как дебажить фронтенд и бекенд: пошаговая инструкция
В этом посте мы научимся дебажить JavaScript на фронт- и бекенде с помощью Chrome DevTools и VS Code.
Ловим баги на фронтенде (JavaScript, Angular)
Очень много сервисов сейчас позволяют дебажить код над фронтенде. Chrome DevTools и Firefox Developer Tools среди них самые популярные, но и в других браузерах тоже есть свои тулзы. Мы будем использовать Chrome DevTools для примеров.
Дебажим JavaScript
Откровенно говоря, отладка кода может занимать много времени. Особенно, если использовать такие простые команды как console.log() или window.alert().
Нужно писать, а потом удалять дополнительный код, а иногда эти команды все равно попадают в коммит (даже если вы думали, что все их забрали). А если при этом использовать линты (статические отладчики), то команды console или alert будут подсвечиваться в коде.
И на этом моменте в игру вступает Chrome DevTools, позволяя нам дебажить код без утомительных команд. Среди фишек этой тулзы, редактирование CSS и HTML, тестирование сети и проверка скорости сайта — наши любимые.
Чтобы на практике познакомиться с этой тулзой, давайте создадим простенькую страничку на JavaScript с getData() методом. Этот метод будет просто собирать данные с поля ввода, создавать DOM элемент с dataSpan ID и добавлять значение с поля ввода в этот элемент.
Вот как наша страничка будет выглядеть:
В JavaScript:
Сохраним ее как app.js.
Вот как наша страничка будет выглядеть в браузере:
Чтобы проверить как метод работает до того, как сохранять данные в dataSpan, можно использовать старомодные console.log(data) или window.alert(data). Вот что мы увидим запустив файл в VS Code:
Это самый примитивный подход.
Вместо этого, мы используем брейкпоинты (точки останова) вChrome DevTools чтобы убедиться, что все работает как надо.
Брейкпоинт — это строка кода, на которой мы хотим приостановить прогонку кода, чтобы изучить как он работает (или не работает).
Возвращаясь к примеру, давайте запустим страницу в Google Chrome и сделаем следующее:
Открыв панель инструментов разработчика, давайте приостановим код на брейкпоинте:
Управление интервалами выполнения кода
Поставив брейкпоинт, ми приостанавливаем исполнение функции на нем. Поэтому нам нужно будет продолжить построчное выполнение кода, чтобы изучить изменения нашей переменной.
В верхнем левом углу панели JavaScript Debugging находятся основные команды прогонки брейкпоинтов:
Первая кнопка, Resume script execution () продолжит выполнение кода до конца или до следующего брейкпоинта.
Давайте введем hello world в поле ввода. В строку добавится data = “hello world”. Теперь давайте кликнем на кнопку Step over next function call ().
Выбранная строка с брейкпоинтом будет выполнена и дебаггер выберет следующую. Откройте вкладку Scope чтобы посмотреть значение переменной data. Оно изменилось на “hello world”, которое мы ввели ранее и просто показывает значение нашей переменной на конкретной строке кода. Кликните Step over next function call еще раз чтобы выполнить выбранный метод и перейти на следующую строку.
Если обновить страницу, значение переменной out также обновится в DOM элементе. Чтобы посмотреть значение переменной, можно кликнуть на Expand () слева от нее. Если же еще раз кликнуть Step over next function call, то текст “hello world” еще раз добавится в dataSpan.
Более сложная отладка
Предположим, что мы выполняем функцию посложнее, которую точно не помешает отладить. К примеру, мы хотим, чтобы пользователи вводили числа через пробел. Функция затем будет обрабатывать и выводить эти числа, их сумму, и результат умножения.
Для этого мы обновим код app.js как на скриншоте выше. Обновляем страницу и приступаем непосредственно к дебаггингу.
Как еще можно поставить брейкпоинты
В большинстве случаев, ваш код намного длиннее и, вполне возможно, конкатенирован в одну строку. К примеру, предположим, что у вас 1000 строк кода. В этом случае, ставить брейкпоинты, кликая на номера строк каждый раз, не кажется такой уж отличной идеей, не правда ли?
Для этого в DevTools есть классный инструмент для установки брейкпоинтов на разные типы интеракции с браузером. На панели JavaScript Debugging, кликните Event Listener Breakpoints чтобы посмотреть доступные категории.
Как вы видите, можно поставить брейкпоинт на событие Mouse > click (клик мышкой) в любом месте нашего кода. Это означает, что, если кликнуть Get Input Data, выполнение кода остановится на событии onclick. И не нужно вручную ничего добавлять.
Клик на Step over next function call будет последовательно вести нас через код, используемый чтобы обработать клики.
Используя Event Listener Breakpoints, можно поставить брейкпоинты на кучу разных типов событий, таких как Keyboard, Touch, и XHR.
Ключевое слово “debugger”
Если ввести debugger в любом месте кода, Chrome DevTools приостановит выполнение кода на этой строке и подсветит ее также, как и брейкпоинты. Можно использовать этот инструмент чтобы дебажить JavaScript в Chrome или других браузерах. Только не забудьте удалить его, когда закончите отладку.
Код на скриншоте выше остановится на строке, которая содержит ключевое слово debugger и автоматически запустит Chrome DevTools. По сути, это то же самое, что и поставить брейкпоинт на эту строку. Также выполнением кода можно управлять с помощью кнопок Step into next function call и Step over next function call.
Выжимка
В начале мы рассмотрели команды console.log() и window.alert() и поняли, что они не слишком удобны. Нужно было их часто использовать по всему коду, что могло сделать код «тяжелее» и медленнее, если бы мы забыли их удалить перед коммитом.
Когда количество строк растет, Chrome Developer Tools намного более эффективен для отлова багов и оценки работы в целом.
Дебажим Angular
Легче всего отладить код Angular — использовать Visual Studio Code (VS Code). Чтобы начать дебаггинг, вам нужно будет установить расширение Debugger для Chrome:
Точно так же, как и в DevTools, кликните на номер строки в app.component.ts. Строка с брейкпоинтом подсветится красным кружком (слева от номера строки).
Настраиваем дебаггер
Для начала, нам нужно будет настроить дебаггер:
1. С File Explorer перейдите на Debug вкладку.
Также можно использовать для этого Ctrl+Shift+D.
2. Кликните на иконку Settings чтобы создать launch.json.
Это файл с настройками, который мы будем использовать.
4. Запустите этот файл.
5. Чтобы использовать этот файл для наших целей, в методе url замените localhost порт с 8080 на 4200.
6. Сохраните изменения.
Вот как должен выглядеть файл:
7. Нажмите F5 или кликните кнопку Start Debugging чтобы запустить Debugger.
8. Запустите Chrome.
9. Чтобы приостановить выполнение кода на брейкпоинте, обновите страницу.
Чтобы последовательно просмотреть выполнение кода и как меняются переменные, используйте клавишу F10.
README
В расширении Debugger для Chrome есть множество дополнительных конфигураций, работа з source maps и устранений всяческих неполадок. Чтобы просмотреть их прямо в VS Code, кликните на расширение и выберите вкладку Details.
Отладка бекенда (Node.js)
Здесь вы узнаете как дебажить код на Node.js. Вот самые распространённые подходы:
• Используя Chrome DevTools
На даный момент, это наш любимый подход.
• Используя IDE-шки типаVisual Studio Code, Visual Studio, WebStorm, и т.д.
Для примеров мы будем использовать VS Code и Chrome DevTools.
Chrome и Node.js используют тот же JavaScript-движок, Google V8, и это значит, что для бекенда мы будем использовать те же инструменты, что и для фронта.
1. Запустите свой проект в VS Code.
2. Перейдите на вкладку Console.
4. Проигнорируйте предлагаемый “chrome-devtools://…” URL (существует метод получше).
5. Запустите Chrome и введите “about:inspect”.
Это перенаправит вас на вкладку Devices на DevTools.
6. Кликните линк Open dedicated DevTools for Node.
Процесс отладки такой же, как и для фронтенда, то есть с использованием брейкпоинтов. На самом деле, очень удобно то, что не нужно переключаться на IDE. Таким образом, можно дебажить и фронт- и бекенд на одном интерфейсе.
Спасибо за чтение и надеемся, что вам понравился этот пост. Подписывайтесь на обновления — у нас в рукавах еще полно полезностей 🙂
Что такое дебажить код
BYTIT | Онлайн-школа программирования запись закреплена
6 фраз, которые должен знать каждый IT-шник.
Означает всего лишь «поручить задание». Фраза произошла от английских слов to assign — назначать, поручать и task — задача. В ИТ‑сфере речь обычно идёт о распределении рабочих дел между сотрудниками в специальной программе‑менеджере.
Дебажить код — это антоним к слову «бодяжить». Шутка! «Дебажить» значит проверять программный код на ошибки. Разработчик запускает режим отладки и ищет «баги», от английского bug — технический дефект. Кстати, ещё bug означает «жук» и «жучок» (для прослушивания). Соответственно, глагол to debug — избавиться от дефектов.
Термины происходят от английских слов to release — выпускать и to deploy — приводить в действие, разворачивать. В ИТ‑сфере эти слова часто употребляются как синонимы и означают выпуск новой версии программы. Но некоторые специалисты их различают: «зарелизить» применяется, когда программа начинает быть доступна пользователям, а «задеплоить» — когда она переходит в любую другую среду, например переносится в тестовую систему или на другой сервер.
4. Зааджастить прогу
«Прога» говорят не только айтишники, но на всякий случай уточним, что это сокращение от слова «программа». «Зааджастить» возникло от глагола to adjust — приводить в порядок, регулировать. Айтишники говорят так, когда нужно немного поменять логику программы, слегка что‑то донастроить.
6. Черрипикнуть хотфикс
Хотфикс — это прямая транслитерация слова hotfix. Hot — горячий или горящий по срокам, fix — исправление, починка. Например, когда в программе обнаружился баг, который сильно всё ломает, — нужно его молниеносно починить, то есть сделать хотфикс. Чтобы применить только новые изменения, не трогая остальных частей программы, есть операция cherry pick — что‑то типа выборочного переноса.
Отладка файлов TypeScript, которые не связаны друг с другом
В данном посте я кратко опишу как правильно настроить отладчик для VSCode чтобы вы могли дебажить код прямо в редакторе не используя Webpack и sourcemaps.
В интернете много гайдов как дебажить index.ts импортируя в него модули и я полностью согласен что данный метод нужно использовать когда мы создаем веб-приложение, однако, когда дело касается дебага независимых файлов (например заданий из leetcode) нам нужно дебажить файлы отдельно не импортируя их в главный файл.
Начинаем с инициализации
Для начала нам нужно инициализировать новый проект, для этого прописываем в терминале:
Далее выбираем название для нашего проекта, пишем его версию и отвечаем на все вопросы npm
Для тех кто не знал: быстро инициализировать проект можно с помощью следующей команды:
Скачивание необходимых пакетов
Далее нам необходимо ввести следующую команду:
Также нам нужен файл для настройки компилятора TypeScript, он называется tsconfig.json и выглядеть должен следующим образом:
Создание файла launch.json
Данный файл нужен VSCode для того чтобы он понимал что и в какой последовательности нужно запускать, а также какие задачи нужно выполнить перед запуском файла.
Выглядеть данный файл должен следующим образом:
Проверка результата
Уже на данном этапе мы можем убедиться что мы уже можем дебажить наш код:
Если вам было интересно, то можете зайти в мой блог на телеграме, там много информации по веб-разработке и линуксоводству.
Спасибо что прочитали данный гайд, успешного написания кода без багов, надеюсь вам не придётся часто применять отладку 😉