Как вы можете улучшить свои навыки отладки JavaScript

1656591613 kak vy mozhete uluchshit svoi navyki otladki javascript

Почти все разработчики программного обеспечения, написавшие даже несколько строк кода для Интернета, имели хотя бы скорый взгляд на JavaScript. Ведь сейчас это один из самых востребованных языков программирования.

Кто любит, кто ненавидит. Независимо от вашей точки зрения, если вы используете его, вам придется наконец его наладить.

LrFIEQsO8MyJhwmLvB5Gb2TDaV9EYOW8gqfx
Кредиты на Reddit

Ниже я поделюсь некоторыми советами, которые помогли мне в трудные моменты.

Основные / известные

Настройка резиновой утки

Отладка резиновой утки – это метод, с помощью которого вы объясняете свою проблему любому или чему-либо (это не обязательно должен быть человек). Тогда решение волшебным образом перестает играть с вашей доброй волей и предстает перед вами.

«Утка» не знает о вашем проекте, поэтому вы все объясняете, в то же время ставя под сомнение свои предположения. В идеале у вас вдруг возникнет просветление типа: «О милый, это было передо мной, спасибо, брат, извини за перерыв».

Но утка все это время молчала, и это волшебная часть. 🙂

Старый добрый лесозаготовка

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

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

Я мог бы возразить, почему вы никогда не должны достигать этой точки, чтобы добавить журналы отладки, поскольку журналы должны быть там как часть первоначальной разработки. Но Эрик Азар уже проделал эту работу.

Подробнее о регистрации позже.

Нарушение очков

Настройщик – это отличный инструмент в вашем арсенале и отличная помощь – если ты знаешь, как им пользоваться.

Это означает:

  • Сначала поймите проблему
  • Затем выдвиньте пару гипотез относительно первопричина (а не симптом)
  • Установите соответствующие точки остановки, чтобы проверить или опровергнуть их.

В JavaScript вы можете либо установить в инструменте разработчика браузера, либо использовать ключевое слово debugger в коде, чтобы принудительно приостановить исполнение.

Поэтому не ставьте случайные точки остановки здесь и там. Имейте в виду рутину и «конец», когда ее используете.

Менее известны

консоль.стол

Несколько строчек выше мы говорили о важности лесозаготовки. Команда, которую мы обычно используем console.log('text'). Но что если выход сложнее? да, console.log также обрабатывает массивы. И предметы.

Но что если я скажу вам, что вы можете быстрее заметить ошибку благодаря некоторому… облагорожению? Это было бы console.table метод и показано ниже

-Ek-xKZX9Bw75cKgaNGvNRQHrmWgqoQ46XKb
console.table в лучшем виде

Видите, какой хороший обзор вы можете получить от макета? Я советую вам использовать его чаще, особенно с итераторами.

Перерыв на события вместо строк

Представим следующий сценарий. Элемент DOM периодически изменяется с неверными значениями, и вы не знаете почему. Какая из 29 мутирующих его функций это непослушание? (Примечание: мутация обычно плохо, но это тема для другой публикации в блоге.)

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

Профилирование

Если ошибка, над которой вы работаете, не ориентирована на производительность, возможно, это излишне. Но я все равно должен об этом упомянуть (ну, возможно, это все-таки проблема с производительностью 🙂 ). В Chrome и Firefox вы можете использовать встроенную функциональность профайлера, чтобы обнаружить узкое место или просто… просмотреть выполняемые функции. Бум:). Надинжиниринг в лучшем виде. Пожалуйста, используйте эту функцию разумно. Убийство базукой мухи может иметь некоторые странные побочные эффекты.

Вывод

Спасибо, что прочли эту статью. Надеюсь, вам понравилось и вы узнали что-нибудь сегодня. Как обычно, я очень поощряю поделиться своими магическими техниками в комментариях.

Больше чтения

Кроме ссылок, приведенных внутри основного текста статьи, вот еще несколько вещей, которые, по моему мнению, следует прочитать о теме отладки:

Сначала опубликовано в моем блоге.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *