Разработка программного обеспечения — трудоемкая задача. Иногда вы выполняете свои задачи без лишней суеты, а бывают моменты, когда вы не имеете ни малейшего представления о характере и происхождении ошибок.

Так что же такое отладка?

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

Именно здесь на сцену выходит «console.log()». Мы все согласились бы, что у нас есть соблазн использовать его. Не так ли? Причина в том, что новички обычно мало знают об инструментах, предоставляемых браузером. Хорошее понимание инструментов отладки браузера может спасти жизнь многим разработчикам.

Давайте начнем это обсуждение с самого console.log() и почему нам следует избегать его использования.

console.log()

Мы пишем «console.log()» в нашем коде, чтобы проверить, доступны ли значения в этом конкретном блоке.

Это приводит к двум проблемам. Нам нужно написать его вручную и передать каждый объект по одному, чтобы проверить их значения. Хорошее соглашение о кодировании требует неизбыточного кода, поэтому не рекомендуется снова и снова писать этот console.log() в коде.

В дополнение к этому существуют другие варианты console.log(), в которых многие разработчики до сих пор не разбираются.

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

Мы используем консоль для регистрации строк и объектов. Это помогает нам увидеть, достигает ли управление определенного блока кода. Допустим, у нас есть объект или массив объектов, и мы хотим посмотреть, может ли браузер искать данные. Было бы удобно написать console.log(). Но вот для осмотра объектов нам нужно развернуть каждый из них. Это займет много времени, а также усилий, чтобы проверить каждый из объектов.

Рисунок 1. Значения объектов, зарегистрированных на консоли

Таким образом, вместо того, чтобы писать console.log() для проверки массива объектов, мы можем использовать вариант этого, console.table().

Далее, давайте рассмотрим console.table()

Когда мы передаем объект в console.table(), значение этого объекта регистрируется в табличной структуре, и становится легко проверять значения. Это сэкономит нам дополнительное время на расширение журналов.

Рисунок 2: показаны выходные данные, сгенерированные console.table().

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

Контрольные точки

Точка останова — это не что иное, как кнопка паузы. Он останавливает выполнение и проверяет значения объектов и переменных. Мы можем поставить точки останова, либо прописав логику отладки в самом коде, либо перейдя на вкладку источников в элементе проверки браузера.

Рисунок 3. Точки останова в исходном коде

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

Рисунок 4. Параметры, доступные для точек останова

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

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

Теперь давайте посмотрим, как можно добавить отладчик в сам код.

Рисунок 5. Запись логики отладки в код

Мы используем ключевое слово «отладчик» для отладки определенной части кода. Функциональность полностью такая же, как и у точек останова. Ключевое слово отладчика остановит выполнение кода и вызовет функцию отладчика.

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

Источник: CronJ