При разработке программы разработчик беспокоится только об ошибке! Кто бы не хотел плавно работающий фрагмент кода без ошибок за один раз!! Звучит потрясающе, верно? Но на практике, когда мы разрабатываем приложение, обязательно случаются ошибки; они могут быть синтаксическими или логическими. В этом поможет «Отладка». Метод, с помощью которого выявляются и устраняются ошибки, называется отладкой.

В JavaScript у нас есть хорошо сформированная функциональность и инструменты отладки, чтобы выяснить причину проблемы и, таким образом, исправить ее. Прежде чем мы углубимся в детали этого руководства, ожидается, что вы хорошо разбираетесь в основах JavaScript, и если вы новичок в JavaScript и хотите освоить этот язык, вам обязательно следует ознакомиться с нашими курсами здесь, в ADMEC, в JavaScript Training Institute, который является одним из лучших курсов, предлагаемых в Дели.

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

Инструменты разработчика браузера

Поскольку приложения JavaScript просматриваются в браузере, каждый современный браузер предоставляет функциональные возможности отладки, встроенные в инструменты разработчика. Ниже приведены сочетания клавиш для доступа к нему в некоторых браузерах:

  • Chrome: CTRL + SHIFT + I или F12.
  • Internet Explorer: F12
  • Мозилла Фаерфокс: CTRL+SHIFT+J

В этом руководстве мы рассмотрим примеры с инструментами разработчика Chrome.

Зона инструментов разработчика

Когда вы открываете приложение JavaScript в браузере Chrome и открываете инструмент разработчика, вы увидите этот экран:

Это инструмент разработчика. Он имеет панели, которые упомянуты ниже:

  1. Зона ресурсов: список HTML, JavaScript, CSS и других файлов, включая изображения, прикрепленные к странице.
  2. Исходная зона: показывает исходный код. На этой вкладке вы можете просмотреть код, который вы создали. Вы можете выбирать между файлами JS для отладки.
  3. Зона информации и управления: здесь есть все элементы управления для отладки вашего кода.

Консоль

Консоль браузера — это интерфейс, который позволяет вам регистрировать информацию о приложении JavaScript во время разработки и тестирования. В некоторых приложениях разработчики используют метод «alert()» для отображения значений при написании кода, но использование консоли для отображения и проверки значений является более оптимизированным способом.

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

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

Метод console.log в JavaScript выводит значение, переданное этому методу, на панель консоли. Это лучше, чем использовать диалоги alert(). например.:

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

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

Приостановка выполнения

Много раз выполнение кода идет не так, как мы думали, мы можем столкнуться с ошибкой или исключением, или, может быть, наш код просто дает сбой. В таких ситуациях разработчик чувствует необходимость « Отладки », чтобы устранить любые ошибки.

Когда мы сталкиваемся с ошибкой, первым делом нужно просмотреть код и попытаться прочитать его, чтобы найти ошибки. И в большинстве случаев, если проблема действительно проста, достаточно просто прочитать код. Например, если вы пытаетесь напечатать значение переменной, которая изначально не существует в вашей области видимости, консоль может выдать вам значение undefined. С такими ошибками можно справиться, тщательно просматривая код и внося изменения!

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

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

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

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

На экране выше мы установили точки останова на строки с номерами «86» и «89», щелкнув по ним. Поэтому, как только страница загружается, когда выполнение достигает строки с номером «86», она приостанавливается, и с этого момента разработчик может предпринимать действия, о которых мы читаем дальше.

Команда отладчика

Приостановка кода также может быть выполнена с помощью команды отладчика.

Например:

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

Отслеживание выполнения

"Продолжить чтение…"

Первоначально опубликовано на https://www.admecindia.co.in 24 апреля 2019 г.