Что такое дебажить код

Как дебажить фронтенд и бекенд: пошаговая инструкция

Очень много сервисов сейчас позволяют дебажить код над фронтенде. 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 и сделаем следующее:

1. Чтобы открыть Chrome Developer Tools, в правом верхнем углу браузера, кликнем чтобы открыть меню настроек.
2. В этом меню, выберем Дополнительные инструменты (в английском меню — More tools), а потом Инструменты разработчика (Developer tools).

Открыв панель инструментов разработчика, давайте приостановим код на брейкпоинте:

1. Выберите вкладку Sources.
2. В Sources, в панели Page, выберите app.js (который мы создали чуть раньше).
3. В редакторе кода, кликните на номер строки let data =document.getElementById(‘name’).value;

Управление интервалами выполнения кода

Поставив брейкпоинт, ми приостанавливаем исполнение функции на нем. Поэтому нам нужно будет продолжить построчное выполнение кода, чтобы изучить изменения нашей переменной.
В верхнем левом углу панели 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 как на скриншоте выше. Обновляем страницу и приступаем непосредственно к дебаггингу.

1. Кликните 3 (номер строки of let data = document.getElementById(‘name’).value;) чтобы поставить брейкпоинт.
2. Введите 23 24 е в строке ввода в браузере.
3. Кликните Step over next function call.

Как еще можно поставить брейкпоинты

В большинстве случаев, ваш код намного длиннее и, вполне возможно, конкатенирован в одну строку. К примеру, предположим, что у вас 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:

1. Запустите проект на VS Code и откройте вкладку Extensions. Или нажмите Ctrl+Shift+X на клаве.
2. В строке поиска введите Chrome.
3. Выберите Debugger for Chrome и кликните Install.
4. После того как установите расширение, появится кнопка Reload. Кликните ее, чтобы завершить инсталляцию и активировать Debugger.

Точно так же, как и в DevTools, кликните на номер строки в app.component.ts. Строка с брейкпоинтом подсветится красным кружком (слева от номера строки).

Настраиваем дебаггер

Для начала, нам нужно будет настроить дебаггер:

1. С File Explorer перейдите на Debug вкладку.
Также можно использовать для этого Ctrl+Shift+D.

2. Кликните на иконку Settings чтобы создать launch.json.
Это файл с настройками, который мы будем использовать.

3. С выпадающего меню Select Environment выберите Chrome.
Это создаст новую папку .vscode и файл 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.

3. Введите команду npm start —inspect и нажмите Enter.

4. Проигнорируйте предлагаемый “chrome-devtools://…” URL (существует метод получше).

5. Запустите Chrome и введите “about:inspect”.

Это перенаправит вас на вкладку Devices на DevTools.

6. Кликните линк Open dedicated DevTools for Node.

Процесс отладки такой же, как и для фронтенда, то есть с использованием брейкпоинтов. На самом деле, очень удобно то, что не нужно переключаться на IDE. Таким образом, можно дебажить и фронт- и бекенд на одном интерфейсе.

Спасибо за чтение и надеемся, что вам понравился этот пост. Подписывайтесь на обновления — у нас в рукавах еще полно полезностей 🙂

Дебажить, апрув, таска: мини-словарь сленга и профессиональной лексики программистов

Как часто от знакомых айтишников вы слышали загадочные термины, например, пушить или деплоить? Скорее всего, очень часто. Если вы только учитесь программированию или устроились на первую работу девелопером, то некоторые термины из IT-сферы могут оказаться незнакомыми. Мы создали мини-словарь сленга и профессиональной лексики: зная айтишные термины, новичкам будет проще освоиться на первой работе. В словарь постарались включить актуальную лексику айтишников (чаще всего это англицизмы), которой сегодня пользуются в IT-компаниях, но не брали такие очевидные слова, как «джун» или «галера», ведь сегодня эти термины стали широко известными. Ассайнить (от англ. assign — поручать) — назначать задачу на человека в качестве исполнителя. Пример употребления: Аттачить (от англ. attach — прикрепить, загрузить) — используется в том же смысле, что и в английском языке. Например, можно отправлять письмо с прикрепленным файлом. Пример употребления: «Аттачни файл с документацией к письму». Апрув (от англ. approve — одобрять) — одобрение, утверждение или подтверждение чего-либо. Пример употребления: «Я не начну новую таску, так как жду от тебя апрув предыдущей». Бенч (от англ. bench — лавка, скамейка) — режим ожидания. «Программист на бенче» означает, что программист простаивает вхолостую в ожидании нового проекта/задания и, по факту, ничего не делает, но получает зарплату. Пример употребления: Баг (от англ. bug) — ошибка в программе/коде, из-за которой результаты выполнения программы неправильные. Пример употребления: «Мы можем взять задачу с той багой в этот спринт?». Деплой (от англ. deploy — развертывание) — используется в программировании в своем прямом значении, то есть для обозначения развертывания (переноса) программного обеспечения на сервер или устройство, где оно должно функционировать. Пример употребления: «За свою карьеру я видел довольно много способов деплоя конфигов и уверен, что каждый может узнать об этом что-то новое». Билдить (от англ. to build — строить) — процесс, когда программный код преобразуется из языка программирования в язык машинных кодов. Пример употребления: Дамп (от англ. dump — бросить, выкинуть) — файл с полной или частичной копией содержимого памяти компьютера или базы данных в момент создания данного файла. Очень часто дампы используются с целью создания и поддержания в актуальном состоянии системы бэкапа. Пример употребления: «Как ты создавал дамп: с помощью phpMyAdmin или через консольное окно?». Коммититься (от англ. commit — совершить) — коммит — это, как правило, кусок кода, влитый программистом в рамках решения данной задачи. Коммититься или закомититься — это соответственно добавить часть коммита в код. Пример употребления: «Я там закоммитил правки и запушил в мастер, можно деплоить». Дебажить (от англ. debug — отладка) — отладка кода, т.е. поиск и исправление ошибок в коде. Пример употребления: Пингануть (от англ. ping — ударяться со стуком) — напоминать кому-либо о чем-либо, давать знать. Пример для употребления: «Пингани меня в конце дня, а то я могу забыть о нашем митинге». Рефакторинг кода (от англ. refactoring) — изменение исходного кода программы с целью упрощения и облегчения его понимания и дальнейшей поддержки. С помощью рефакторинга код становится чище, исправляются ошибки и «узкие места» в коде. Пример употребления: «Надо посмотреть код этого старого приложения и отрефакторить его». Стендап (от англ. stand-up meeting — «митинг на ногах») — по сути, это старая-добрая планерка или совещание. Традиционно стендап занимает 15 минут и проводится ежедневно в начале рабочего дня. Пример употребления: Сторя (от англ. story — история) — корневая задача с описанием требований для разработки, она содержит в себе подзадачи, назначенные на разработчиков разных должностей. Пример употребления: «У нас по юзер-сторе надо вначале промокод ввести, а потом уже тотал на чекаут показывать». Фича (от англ. feature — характерная черта) — особенность, уникальное свойство. Существует популярное выражение — «Это не баг, а фича». Пример употребления: «Эта фича спасла игру и сделала ее популярной». Таска (от англ. task — задача) — задание или задача, которые ставят перед разработчиком. Пример употребления: Фиксить или пофиксить (от англ. fix — исправить) — исправлять ошибки. Пример употребления: «Я быстро пофикшу этот баг, но завтра надо будет протестировать код». Как бы вы дополнили наш мини-словарь? Пишите в комментариях слова, которыми ежедневно пользуетесь в работе.

Что такое отладка?

Я уверен что 95% читателей этой публикации прекрасно знают что такое отладка приложения, и, говоря по простонародному, уже не раз дебажили свои приложения в поисках ошибки или проверки работы своей программы.

И все же краткое вступление с теорией будет. Поэтому если вы знаете что такое отладка, то пропустите этот раздел и листайте вниз, или сразу перейдите к второй части.

Отладка или debugging приложения — это процесс поиска и исправление ошибок или неправильного поведения кода.

Например: при получении ответа с сервера и его обработке внутри вашего приложения происходит непонятная ошибка и на экране выводится устаревшая информация вместо новой. Чтоб разобраться что происходит и найти ошибку мы можем при помощи отладки поставить выполнение программы на паузу в нужном нам месте и посмотреть содержимое наших объектов и переменных.

Именно для этого и нужна отладка: приостанавливать выполнение кода в нужном месте и изучении состояния приложения.

Основы отладки

В этой статье я расскажу базовые вещи и возможности отладчика в Android Studio. В следующей статье я постараюсь рассказать о некоторых тонкостях и продвинутых возможностях работы с отладкой.

Как запустить отладку — Android Debugger

Запустить отладчик в Android Studio можно двумя способами:

Первый способ: Запустить приложение в режиме отладки. Стоит использовать если нужно отладить именно запуск приложения. Для отладки конкретного действия-экрана лучше использовать второй способ, так быстрее.

Второй способ: Подключить Android Debugger к уже запущенному процессу. Удобно, потому что бывает нужно продебажить конкретный экран или нажатие на кнопку, а запускать каждый раз приложение в режиме отладки долго и неудобно.

Как остановить отладку

Остановить отладку можно здесь:

Breakpoins или точки остановки

Breakpoint или точка остановки — специальный флаг для Android Debugger-a который означает “Останови выполнение программы в этом месте”.

На скриншоте выше видно две точки остановки. Интересно, что они сообщают некую информацию о себе: одна из них с галочкой а другая с крестиком.

Галочка значит что эта точки остановки активная и кода выполнение кода подойдет к этой строке выполнение программы будет остановлено.

Крестик обозначает что выполнение кода на этой строке невозможно (например у пустой строки или, как в примере выше, у ключевого слова)

Как сделать точку остановки — breakpoint

Для добавления точки остановки нужно кликнуть на серой области напротив строки с кодом или нажать ⌘+F8.

Выбор точки остановки — set breakpoint

Практически все современные Android приложения используют Kotlin и RxJava. И при типичном использовании этой связки языка и библиотеки при добавлении точки остановки иногда появляется такой выбор:

Android Studio предлагает нам выбрать где именно мы хотим добавить точку остановки — момент выполнения метода subscribe в Rx-цепочке или выполнение кода внутри лямбды, которую мы передаем в subscribe. А можно поставить точку остановки сразу для двух действий (All).

Примечание для новичков: Если вы хотите отладить действие, которое вы планируете выполнить внутри метода subscribe, и не поняли в примере выше где именно вам поставить точку остановки — вам нужно поставить ее внутри лямбда выражения.

Просмотр информации во время отладки приложения

Подсказки от Android Studio

Подсказки от Android Studio во время отладки — приятный бонус. В них отображается полезная информация, например значение локальных переменных, аргументов и объектов (для них выводится информация из метода toString() соответствующего объекта).

Стек вызова методов — Frames

В вкладке Debugger во время остановки выполнения приложения выводится стек вызова методов.

Благодаря этому можно понять — откуда мы попали в текущий метод.

Желтым цветом подсвечиваются классы Android SDK или библиотек — там, где у нас нет доступа к исходному коду.

Формат вывода информации о методе такой:

• Название метода — methodThree
• Номер строки с точкой остановки— 22
• Название класса — DebugStateDemoObject
• package класса

Просмотр информации состояния объекта и переменных — Variables

Помимо панели со стеком вызова методов в вкладе Debug также находится и панель с выводом текущего состояния и значениями локальных переменных.

На первой строке выводится информация об объекте, чей метод был вызван и остановлен для отладки. Интересно, что по двойному клику на это строчку можно будет увидеть дополнительную информацию о состоянии текущего класса.

На второй строке выводится информация о локальной переменой, в данном случае это еще и аргумент переданный в этот метод.

Изменение значения переменой “на лету”

Значение локальной переменной можно изменить нажав правой клавишей мышки -> Set value… или по нажатию на F2.

Стек методов + состояние объекта

Стоит запомнить, что состояние объекта при переходе по стеку методов не меняется. То есть, при просмотре методов из стека в разделе с информацией о состоянии объекта и локальных переменных, он же Variables, будет показано самое последнее состояние объекта не зависимо от просматриваемого метода.

Для иллюстрации этого давайте проведем эксперимент. Итак у нас есть следующий код:

Давайте добавим точку остановки на 19 строку внутри метода methodThree() и запустим этот код в режиме отладки.

Но перед этим поясню что мы хотим уточнить: если значения объектов сохраняются в стек, то при переходе в стеке вызова методов внутри вкладки Debug значение поля counter будет меняться. Если состояние объекта не сохраняется, то counter всегда будет с его актуальным (последним) значением.

Управление процессом отладки

Во время отладки Android Debugger в Android Studio позволяет нам управлять процессом отладки.

Без знания этих инструментов процесс отладки будет сложным и запутанным, так что давайте познакомимся с этими возможностями поближе.

Продолжить выполнение программы

Когда во время отладки выполнение кода программы подходит к строке на которой установлен Breakpoint (точка остановки), выполнение программы приостанавливается. По нажатию на эту кнопку выполнение программы будет выполнятся дальше.

Приостановить выполнение программы

Есть возможность и просто приостановить приложение во время отладки поставив его на паузу. Сам этот режим, его цель и как он работает я, если честно, не очень понял. Я сделал эксперимент с бесконечным циклом, внутри которого инкрементяться 3 переменных типа Long, и в случайный момент делал паузу: выполнение кода останавливалось на строке с объявлением while(true), я даже видел значения переменных, но на этом все.

Остановка отладки

Саму отладку можно остановить по нажатию на кнопку стоп. В последнее время останавливается не только отладка но и приложение; грустно.

Просмотр и настройка breakpoints (точек остановок) в проекте

Эта возможность архи полезная: во первых здесь можно просмотреть все breakpoints в проекте. Во-вторых здесь можно отключить/включить выборочно нужные нам breakpoints. Мы еще вернемся к возможностям этой функции позже, в следующей статье.

Приглушить все breakpoints

А еще можно приглушить (Mute) все наши точки остановки по нажатию на эту кнопку. Интересно что во время отладки по нажатию на эту кнопку точки остановки действительно не отрабатывают, но у меня после отключения этой возможности точки оставались “приглушенными” и дальше. Может быть баг Android Studio а может и эмулятора — я этого не понял и выглядит это странно. Если кто-то мне подскажет что происходит я буду очень рад!

Получение dump-а потоков приложения

Есть возможность получить dump с состоянием всех потоков в процессе и даже вывод стектрейса с местом выполнения кода. Выглядит это так:

Этот режим будет полезен при отладке сложных, многопоточных приложений.

Настройка отображения данных и UI вкладки Debug

Первая иконка может восстановить разметку вкладки Debug в первоначальное состояние (если чото сдвинули мышкой неудачно)

Вторая кнопка откроет меню в котором можно настроить отображение информации.

Третья кнопка предлагает закрепить текущую вкладку в разделе Debug а четвертая кнопка, та что крестик, закроет вкладку соотвественно.

Навигация по коду

В момент срабатывания точки остановки выполнение кода приостанавливается и мы можем узнать состояние наших объектов и переменных. Но иногда одной точки остановки может быть недостаточно, и для основательного исследования работы нашего кода нам понадобится шаг за шагом выполнять какое-то действие и смотреть что к чему.

Для этого мы можем воспользоваться возможностью двигаться по коду, выполняя нужный нам фрагмент за фрагментом.

Давайте разберемся с этим!

Перейти к текущей точке остановки

По нажатию на эту кнопку курсор и фокус будет перемещены на текущую точку остановки. Удобно если потерялся.

Переход к следующей строке

Переход к следующей строке кода внутри текущего метода, не заходя в вызываемый метод (если он вызывается).

Переход дальше + принудительно

Переход в вызываемый метод к его первой строке.

Красная стрелка — тоже самое, но делает это принудительное, если по какой то причине просто перейти нельзя.

Выход из текущего метода

Выход из текущего метода на следующую строку кода

Выполнить до курсора

А еще можно выполнить код до той строки, на которой находится курсор. Курсор перед этим можно перемещать до куда нам нужно. Очен здоровская возможность!

Debug like a pro

В этой статье мы разобрали основы отладки в Android разработке. В следующей статье я планирую рассказать о продвинутых возможностях отладки что поможет вам дебажить код как настоящий профи!