Налагодження 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 надають вам спосіб налагодження коду. Процес налагодження може дещо відрізнятися, але концепція налагодження однакова.

Цікаві статті...