Давайте посмотрим, как улучшить способ отладки наших веб-приложений!
С тех пор как я начал заниматься веб-разработкой, я почти все время использовал console.log для отладки своих приложений. Причина в том, что я никогда не мог привыкнуть к консоли браузера и системе отладки.
Установка точки останова иногда работает, а иногда нет. Или даже иногда точка останова по какой-то причине перемещается в другое место.
Я ненавидел использовать этот отладчик, пока не узнал о новом ключевом слове JS: debugger
В отличие от таких языков, как Java, где добавление точки останова в вашей среде IDE является простым, веб-приложения зависят от браузера, и в большинстве случаев комплект немного отличается от вашего исходного кода, и поэтому установка точки останова может быть ненадежной. Таким образом, в Javascript есть специальное ключевое слово debugger, которое служит одной цели: вызывать для вас точку останова в браузере.
Отличительной особенностью debugger является то, что он будет правильно размещен в вашем наборе и, следовательно, будет 100% надежным.
Ключевое слово
debuggerНИКОГДА не должно помещаться в ваш репозиторий. Убедитесь, что у вас есть какое-то правило eslint (no-debugger), чтобы предотвратить это!
Быстрая демонстрация
Для целей этой статьи я собираюсь создать пример, не зависящий от фреймворка. Но имейте в виду, что это работает с ЛЮБОЙ веб-платформой.
Давайте возьмем эту небольшую HTML-страницу:
Прежде всего, откройте свой инструмент разработки, так как
debuggerсрабатывает только тогда, когда открыт инструмент разработки.
Теперь, если вы протестируете этот код и нажмете кнопку, вы увидите clicked! в консоли. Это нормально.
Наша цель здесь — активировать точку останова без необходимости устанавливать ее вручную в инструменте разработки.
Сделать это очень просто! Добавьте ключевое слово debugger в прослушиватель событий:
Теперь давайте проверим наш код. При загрузке страницы ничего не должно происходить. Но если вы нажмете на кнопку…
И вуаля! Наша точка останова была успешно запущена, и инструмент разработчика автоматически привел нас туда, где это произошло. Как удобно?
Оттуда вы можете получить доступ ко всему содержимому области и на самом деленаслаждаться использованием отладчика!
Спасибо, что прочитали эту короткую статью! Я надеюсь, что это было полезно для вас!
Если вам понравилось, не стесняйтесь ставить аплодисменты или подписываться!
До скорой встречи на новом!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
