Автор: Кристин Джеквони (Kristin Jackvony)
Оригинал статьи
Перевод: Ольга Алифанова

Современные команды разработки ПО размывают традиционные границы между разработчиком и тестировщиком. Это означает, что разработчики все сильнее вовлекаются в тест-автоматизацию на всех уровнях пирамиды, а тестировщики все глубже погружаются во внутреннюю механику приложения. Разве не здорово бы было найти причины багов JavaScript, а не просто сообщать о них? Это можно сделать при помощи брейкпойнтов инструментов разработчика Chrome!

В этой статье я шаг за шагом проведу вас по использованию Chrome Dev Tools для дебага. Я узнала об этом из этой полезной статьи в блоге Google, но я буду использовать пример приложения, чтобы вы смогли попробовать различные методы самостоятельно.

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

Итак, начнем

Чтобы следовать моим инструкциям, нужно установить Node.js и Git. Затем клонируйте этот репозиторий. Если вы никогда не клонировали репозитории, инструкции здесь. В этом репозитории находится очень простое приложение-счетчик, которое можно использовать для, скажем, добавления товаров в корзину. Оно не ахти какое сложное, но делает достаточно для проверки работы брейкпойнтов.

После клонирования репозиторий сделайте вот что:

cd counter-app (вы перейдете в папку приложения)

npm install (получение всех необходимых для запуска пакетов, и билд приложения)

npm start (запуск приложения)

Ваше приложение откроется в Chrome и будет выглядеть так:

Затем откройте инструменты разработчика, используя меню многоточия в правом верхнем углу Chrome. Из этого меню выберите "Дополнительные инструменты", а затем "Инструменты разработчика". Они откроются в браузере и будут выглядеть примерно так:

Мы готовы начинать! Мы установим каждый тип брейкпойнта, посмотрим на его работу, нажмем кнопку "Продолжить выполнение скрипта", а затем очистим брейкпойнт. Кнопка "Продолжить выполнение скрипта" (“Resume script execution”) находится наверху самой правой панели и выглядит так:

Для очистки брейкпойнта просто нажмите на него правой клавишей и выберите "Убрать брейкпойнт". Приступим!

Брейкпойнт строки кода

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

Если вкладка "Источники" ("Sources") еще не выбрана в верхней части инструментов разработчика, выберите ее. Теперь посмотрите в левую часть панели инструментов разработчика, найдите папку src, и кликните на файл App.js в этой папке. Он откроется в центральной панели инструментов разработчика.

Найдите строку 17 и кликните на ее номер. Номер подсветится синим, вот так:

Эта линия кода находится в функции handleIncrement, которая вызывается, когда вы нажимаете один из плюсиков в приложении. Нажмите на плюсик. Вы увидите, как эта строка подсветится, и на правой панели появится сообщение "Пауза на брейкпойнте". Стоя на паузе, вы можете посмотреть на секции Call stack и Scope, чтобы увидеть, что сейчас происходит в приложении.

Не забудьте удалить брейкпойнт на строке 17 и нажать на кнопку Resume, прежде чем перейти к следующему разделу!

Брейкпойнт на условной строке кода

Теперь давайте рассмотрим брейкпойнт на условной строке кода. Этот брейкпойнт сработает только тогда, когда выполнено определенное условие. Кликните правой клавишей на 19 строке кода App.js и выберите "Добавить условный брейкпойнт" (“Add conditional breakpoint”). Брейкпойнт будет добавлен, и появится всплывающее окно для добавления условия. Добавьте условие index === 0 и нажмите на кнопку возврата или ввода.

Теперь, когда брейкпойнт установлен, посмотрим на него в действии. Если вы ничего не нажимали после прошлого упражнения, то у вас есть счетчик, установленный на цифре 1. Снова нажмите на кнопку с плюсом. Код не остановится на брейкпойнте, потому что счетчик стоит на единице. Нажмите на кнопку с минусом, чтобы вернуть счетчик на ноль. Снова нажмите на плюс. На этот раз код остановится на брейкпойнте, потому что текущее состояние счетчика на строке 19 – это ноль.

Не забудьте удалить брейкпойнт на строке 19 и нажать на кнопку Resume, прежде чем перейти к следующему разделу!

DOM-брейкпойнт

Можно также установить брейкпойнт напрямую в DOM. Для этого сначала нажмем на вкладку Elements на верхней панели инструментов разработчика. Измените верхний счетчик с единицы на ноль. Теперь нажмите на этот нулевой счетчик правой кнопкой и выберите "Inspect". Центральная панель инструментов разработчика перейдет к секции DOM с этим счетчиком и подсветит ее. Нажмите на подсвеченной секции правой кнопкой, выберите "Break on", а затем "Attribute modifications". Когда счетчик перейдет с нуля на единицу, он меняет атрибут (в данном случае цвет), и выбирая модификации атрибута, мы говорим коду остановиться, как только изменится атрибут иконки.

Нажмите на плюс, и вы увидите, как код остановится на брейкпойнте, потому что цвет счетчика готов измениться с желтого на голубой. Нажмите кнопку "Resume execution", код продолжит выполнение, счетчик изменится на единицу (и станет голубым). Снова нажмите на кнопку с плюсом, и код не остановится на брейкпойнте, потому что при переходе от 1 к 2 цвет не меняется. Но если дважды нажать на минус и вернуться к нулю, код снова остановится на брейкпойнте, потому что цвет счетчика готов измениться.

Не забудьте удалить брейкпойнт и нажать на кнопку Resume, прежде чем продолжать!

Это довольно длинная статья, а у нас впереди еще четыре брейкпойнта. О них я расскажу в следующий раз.

Обсудить в форуме