Почти все разработчики программного обеспечения, которые написали даже несколько строк кода для веб-сайта, имели хотя бы быстрый взгляд на JavaScript. В конце концов, это в настоящее время один из самых по требованию языки программирования.
Некоторые люди любовь Это, некоторые ненавидеть Это. Независимо от вашего мнения, если вы его используете, вам нужно будет отлаживать его в конечном итоге.
Ниже я поделись некоторыми советами, которые помогли мне в трудных моментах.
Основные/известные из известных
Резиновая утка отладки
Резиновая утка отладки это метод, где вы объясните свою проблему никому или что-нибудь (это не должно быть человеком). Затем решение магически перестает играть с вашим доброй воли и кажется вам.
«Утка» не имеет знаний о вашем проекте, поэтому вы все объясните, допросите свои предположения одновременно. В идеале вам вдруг будет просвещение, как, «О, дорогая, это было передо мной, спасибо, братан, извините за прерывание».
И все же утка все это время молчала, и это волшебная часть.:)
Хорошая логизация
Когда у вас есть проблема для отладки, у вас обычно есть расплывчатая гипотеза о том, что может быть неверным. Это может быть полностью от фактической причины, но это еще одна история. Если вы начнете выкладывать журналы в места, где может возникнуть ошибка, вы можете быстро добраться до точки.
Даже если вы этого не сделаете, не удалите логи, которые вы добавили, так как они могут оказаться полезными для будущей проблемы.
Я мог бы утверждать, почему вы никогда не должны достичь этой точки, чтобы добавить журналы отладки, поскольку журналы должны быть там как часть первоначального развития. Но Эрик Опасность уже сделал работу.
Больше на ведение журнала позже.
Ломать точки
Отладчик – отличный инструмент в вашем арсенале и отличная помощь – если Вы знаете, как его использовать Отказ
Это означает:
- Сначала поймите проблему
- Затем сделайте пару гипотез о коренная причина (а не симптом)
- Установите соответствующие точки останова, чтобы проверить или опровергнуть их.
В JavaScript вы можете либо устанавливать в инструменте разработки браузера, либо использовать ключевое слово Debugger в коде, чтобы принудительно приостановить выполнение.
Так что не просто положите случайные точки останова здесь и там. Иметь рутину и «конец» в вашем уме при использовании его.
Менее известные
Console.table.table.
Несколько строк выше, мы говорили о важности регистрации. Команда, которую мы обычно используем, это console.log («Текст») . Но что, если вывод сложнее? Да, console.log Обрабатывает массивы тоже. И объекты.
Но что, если я сказал вам, что вы можете обнаружить ошибку быстрее из-за … украшения? Это было бы Console.table метод и демонстрируется ниже
Посмотрите, какой хороший обзор вы можете получить от макета? Я очень поощряю вас использовать его больше, особенно с помощью по месту.
Перерыв на события вместо линий
Давайте представим следующий сценарий. Элемент DOM переключается периодически и не имеет неправильных значений, и вы не знаете, почему. Какой из 29 функций, которые мутают, это непослушным? (Примечание: Мутация – это плохо Обычно, но это тема для другого поста в блоге.)
Используйте DOM Изменить точки останова Отказ Каждый раз, когда элемент мутируется, будет показана дорожка стека. Как если вы положили правильные точки останова. Вы можете найти больше деталей здесь Отказ
Профилирование
Если ошибка, на которой вы работаете, не ориентирована на производительность, может быть, это излишки. Но я все еще должен упомянуть это (ну, это может быть проблемой производительности в конце концов:)). В Хром и Firefox Вы можете использовать встроенные функциональные функции Profiler для точечного узкого места или просто … см. Функции, которые выполнены. Бум:). Чрезвычайно проживание в лучшем виде. Пожалуйста, используйте эту функцию мудро Отказ Убивая муху с Базука может иметь некоторые странные побочные эффекты.
Заключение
Спасибо за прочтение этой статьи. Я надеюсь, что вы наслаждались этим и узнали что-то сегодня. Как всегда, я очень рекомендую поделиться своими магическими методами в комментариях.
Больше чтения
Помимо ссылок, цитируемых в главном тексте статьи, вот еще несколько вещей, которые я думаю, стоит читать о теме отладки:
- Учебник отладки узла
- Гид отладки Джона Сонмеса
- Отлаживать его
- Отладка: 9 незаменимых правил нахождения даже самых неуловимых программных и аппаратных проблем
- Chrome Debug Tools
- Firefox Debug Tools
- «Джпарти» подкаст и особенно Эпизод 30 Откуда я вдохновил об этом посте и узнал о `console.table`
Первоначально опубликовано в моем блоге Отказ
Оригинал: “https://www.freecodecamp.org/news/stepping-up-your-javascript-debugging-skills-cb37355ea9a9/”