Любое программное обеспечение не застраховано от ошибок. Каждая функция может иметь несколько вариантов использования и рабочих процессов. При написании программы иногда упускаются несколько пограничных случаев. А отсутствующие условия, пограничные случаи и опечатки могут стать причиной ошибок.
Большинство из них невозможно предотвратить на этапе реализации функций. Поэтому исправления придется делать позже, когда пользователь или тестировщик обнаружат конкретную ошибку в программных продуктах. Иногда процесс отладки занимает больше времени, чем непосредственная реализация новой функции. Поэтому столь важно найти способы повышения производительности.
Чтобы упростить поиск и устранение ошибок в коде на JavaScript, будут полезны следующие советы и приемы.
Ключевое слово debugger
Вероятно, отлаживать ту или иную часть кода вы начинаете с открытия инструментов разработчика. Потом находите исходный файл и начинаете добавлять брейкпоинты (точки останова). Если исходных файлов много, то потребуется немало времени для того, чтобы выяснить, куда их нужно добавить.
Если же вы включите ключевое слово debugger, то инструмент разработчика автоматически установит брейкпоинт в определенном месте. После этого вы сможете установить остальные точки, чтобы устранить ошибку. И можно особо не волноваться, если забудете удалить debugger из готового кода. Впоследствии для пользователя в приложении ничего не нарушится, если кто-то не активирует функцию инструментов разработчика в веб-браузере.
Отладка на мобильных устройствах
Тестирование и отладка мобильных веб-приложений возможны через симуляторы или эмуляторы. Но если в интерфейсе веб-приложения используются касания экрана, тогда отладку и тестирование лучше выполнять на реальных мобильных устройствах. Если определенная функция нормально работает на физических тестовых устройствах, то можно гарантировать, что она будет работоспособной и на других.
Но обычно я не использую для отладки мобильных приложений ни симуляторы, ни эмуляторы. Потому что симуляторам не доверяю, а эмуляторы замедляют работу компьютера. Вместо них применяю методику настройки процесса удаленной отладки через браузер Chrome. Подробнее об этом см. здесь: Как удаленно отлаживать сайты на Android с помощью Chrome DevTools.
Анализируйте код, прежде чем поставить любой брейкпоинт
В отношении к процессу отладки кода JavaScript все люди делятся на три типа.
Отладчики. Они сразу переходят к инструментам разработчика, чтобы установить точки останова, прежде чем что-либо делать.
Анти-отладчики. Возможно, они не знакомы с методикой использования брейкпоинтов. Или же они просто побаиваются в полной мере работать с инструментами разработчика. Такие специалисты всегда используют console.log до тех пор, пока не выяснят основную причину ошибки.
Охотники за ошибками. Они начинают с изучения кода. Если его можно проверить визуально, то используют console.log. В противном случае они поставят в нужном месте брейкпоинты.
Попытайтесь примкнуть к третьему типу разработчиков. Чтобы найти место сбоя, код программы прежде всего можно проанализировать. Если код написан четко и понятно, то нет нужды терять время на работу с инструментальными отладчиками. И наоборот: если код непоследовательный и выполняется нерегулярно, то имеет смысл применять результаты анализа кода инструментами разработчика. Так вы сэкономите время на поиск и исправление ошибок.
Читайте также:
- JavaScript - идеальный выбор при аналитической обработке данных
- 50 советов, которые помогут улучшить код JavaScript
- RxJS и Angular: декларативный If/Else
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Shalitha Suranga: JavaScript Debugging Tips to Boost Your Productivity
