Home

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

В прошлый раз мы начали рассматривать различные типы брейкпойнтов в инструментах разработчика, которыми можно пользоваться для дебага приложений JavaScript. Мы попробовали воспользоваться некоторыми из них – строка кода, условная строка кода, и DOM, - используя инструменты разработчика и простое приложение-счетчик. В этот раз я расскажу еще о трех брейкпойнтах. Если хотите попрактиковаться, откройте предыдущую статью и следуйте шагам настройки.

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

XHR – это “XMLHttpRequest”. Это способ запрашивать данные от сервера без перезагрузки веб-страницы. Вы можете создать брейкпойнт, который поставит код на паузу, если выполняется XHR-запрос. Чтобы это сделать, посмотрите на правую панель инструментов разработчика (убедитесь, что вы на вкладке Sources) и откройте секцию “XHR/fetch Breakpoints”. Нажмите на кнопку плюса (+) в этой секции, и отметьте чекбокс “Any XHR or fetch” (если вы не видите чекбокса, и вместо него пустое текстовое поле, кликните вне поля, и чекбокс появится).

Теперь у нас есть брейкпойнт, который выполнится, как только будет сделан вызов к серверу. Чтобы спровоцировать это в приложении-счетчике, кликните на кнопку корзины у каждого счетчика, чтобы все они удалились. Затем нажмите на голубую кнопку корзины. Будет инициирован серверный запрос, и вы увидите, как выполнение кода остановится.

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

Брейкпойнт обработчика событий

Как следует из названия, этот брейкпойнт ждет определенного события – например, анимации, ввода с клавиатуры, движения мыши, и т. д. Мы настроим брейкпойнт на остановку по клику мыши. Откройте секцию Event Listener Breakpoints в правой панели инструментов разработчика и кликните на стрелочку рядом с “Mouse”, чтобы раскрыть секцию. Отметьте чекбокс "click". Теперь при клике на кнопках приложение остановится на брейкпойнте.

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

Брейкпойнт исключения

Этот брейкпойнт можно настроить на остановку в момент, когда код столкнутся с исключениями, и можно задать паузу на все исключения, включая пойманные, или же только на непойманные. Для установки этого брейкпойнта просто кликните на голубой кнопке паузы в верхнем правом углу инструментов разработчика. Кликните также на чекбоксе “Pause on caught exceptions”. Для инициации исключения в приложении-счетчике кликните на иконке корзины для всех счетчиков, а затем на голубой иконке корзины. Это вызывает исключение в Safari, и код останавливается; изучив код, я думаю, что исключение зависит от браузера, поэтому ваши результаты могут отличаться.

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

Пошаговый поход по приложению

Брейкпойнты – отличный способ поставить приложение на паузу и посмотреть, в каком состоянии оно находится. Они также хороши для пошагового прохода по приложению. Чтобы сделать это, вернемся назад и используем простой брейкпойнт на строке кода, как мы делали в прошлый раз. Убедитесь, что в верхней части инструментов разработчика выбрана вкладка “Sources”, найдите папку src в левой секции, откройте ее и кликните на файле App.js. Найдите 16 строку и кликните по ней, чтобы добавить брейкпойнт.

Кликните по одной из кнопок-плюсов (+) в приложении, и брейкпойнт остановит его на 16 строке. На этот раз вместо клика по Resume нажмите на соседнюю кнопку. Это кнопка Step Over, и код выполнит следующую свою строку в App.js. Откройте секцию Scope, и вы увидите значения всех переменных на этом моменте кода. Продолжая кликать по кнопке Step Over, вы увидите, как меняется значение счетчика. Посмотрите на счетчики в секции Array(4), и увидите, что используемый вами счетчик увеличил значение.

Эти две статьи дали вам шесть разных способов установить брейкпойнт в инструментах разработчика. Надеюсь, это будет вам полезно при диагностике коварных багов JavaScript. Удачной охоты!

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