Отладка JavaScript в браузере (с примерами)

В этом руководстве вы узнаете об отладке в JavaScript с помощью примеров.

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

Отладка - это процесс изучения программы, поиска ошибки и ее исправления.

Есть разные способы отладки вашей программы JavaScript.

1. Использование console.log ()

Вы можете использовать этот console.log()метод для отладки кода. Вы можете передать значение, которое хотите проверить, в console.log()метод и проверить правильность данных.

Синтаксис:

 console.log(object/message);

Вы можете передать объект console.log()или просто строку сообщения.

В предыдущем уроке мы использовали console.log()метод печати вывода. Однако вы также можете использовать этот метод для отладки. Например,

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Использование console.log()метода в браузере открывает значение в окне отладчика.

Работа метода console.log () в браузере

Это console.log()не относится к браузерам. Он также доступен в других движках JavaScript.

2. Использование отладчика

debuggerКлючевое слово останавливает выполнение кода и вызывает функцию отладки.

debuggerДоступен практически во всех системах JavaScript.

Давайте посмотрим на пример,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

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

Работа отладчика в браузере

Вышеупомянутая программа приостанавливает выполнение программы в строке, содержащей расширение debugger.

После изучения программы вы можете возобновить управление потоком.

Остальная часть кода будет выполнена, когда вы возобновите выполнение сценария, нажав кнопку воспроизведения на консоли.

Работа отладчика в браузере

3. Установка точек останова

Вы можете установить точки останова для кода JavaScript в окне отладчика.

JavaScript прекращает выполнение в каждой точке останова и позволяет вам проверять значения. Затем вы можете возобновить выполнение кода.

Давайте посмотрим на пример, установив точку останова в браузере Chrome.

Работа точек останова в браузере

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

Установка точек останова аналогична включению отладчика в код. Здесь вы просто устанавливаете точки останова, щелкая номер строки исходного кода вместо того, чтобы вручную вызывать функцию отладчика.

В приведенных выше методах мы использовали браузер Chrome, чтобы для простоты показать процессы отладки. Однако это не единственный вариант.

Все хорошие IDE предоставляют вам возможность отлаживать код. Процесс отладки может немного отличаться, но концепция отладки остается той же.

Интересные статьи...