Отладка в JavaScript включает в себя выявление и исправление ошибок путем анализа поведения во время выполнения, отслеживания хода выполнения программы и использования таких инструментов, как консоли браузера, отладчики и методы ведения журналов. Ниже приведены различные методы отладки JavaScript.
1. Использование ключевого слова отладчика
Ключевое слово отладчика заставляет движок JavaScript прекратить выполнение в определенный момент. При обнаружении он приостанавливает выполнение кода и открывает инструмент отладки браузера.
Синтаксис:
отладчик;
Пример:

function sum(a, b) { 
   debugger; // Execution stops here 
   return a   b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

Это позволяет вам проверять переменные и состояние программы именно в этот момент с помощью инструментов разработчика браузера.
2. Использование console.log()
console.log() выводит данные на консоль браузера, помогая отслеживать значения и ход выполнения программы во время выполнения.
Синтаксис:

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: "   name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

Размещая инструкции console.log() по всему коду, вы можете проверить, содержат ли переменные ожидаемые значения.
3. Использование точек останова
Точки останова можно установить непосредственно в инструментах разработчика браузера. Они останавливают выполнение кода на определенной строке, позволяя вам проверить состояние программы в этот момент.
Шаги по установке точек останова:

1. Откройте инструменты разработчика (нажмите F12 или щелкните правой кнопкой мыши и выберите «Проверить»).
2. Перейдите на вкладку «Источники».
3. Выберите файл JavaScript, затем щелкните номер строки, чтобы установить точку останова.
4. Выполнение кода приостановится на этой строке, и можно будет проверить все переменные и состояние. Пример:

function multiply(a, b) { 
   return a * b; 
} 

let result = умножить(2, 5);
// Устанавливаем здесь точку останова и проверяем значения
В этом примере после установки точки останова в функции Multiple() вы можете проверить значения a и b в инструментах разработчика.
4. Использование console.warn() и console.error()
Эти методы работают аналогично console.log(), но вывод в консоли визуально различим, что помогает различать предупреждения и ошибки.
Синтаксис:

console.warn(message); 
console.error(message);

Пример:

let age = 17; 

if (age 



В этом случае console.warn() отобразит желтое предупреждающее сообщение, а console.error() отобразит ошибку красным.

5. Использование операторов try…catch

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

Синтаксис:



try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 




Пример:



 try { 
   let result = JSON.parse("invalid JSON string"); 
} catch (error) { 
   console.error("An error occurred: ", error.message); 
   // Logs error without stopping the app 
}




Блок try…catch обнаружит ошибку синтаксического анализа JSON и зарегистрирует ее на консоли без сбоя приложения.

6. Использование инструментов мониторинга производительности

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

Шаги:


Откройте инструменты разработчика (нажмите F12).
Перейдите на вкладку «Производительность».
Нажмите «Запись», чтобы начать мониторинг выполнения кода.
Выполняйте действия в приложении для сбора данных.
Остановите запись, чтобы проанализировать график производительности.
Пример:



console.time("loop"); 
for (let i = 0; i 



В этом примере используются методы console.time() и console.timeEnd() для измерения времени выполнения блока кода.

Применяя эти методы, а также более продвинутые методы, такие как мониторинг производительности, вы можете эффективно отлаживать и устранять проблемы в своем коде JavaScript.

Если вы изучаете JavaScript, обязательно следуйте моим пошаговым руководствам на Medium: https://medium.com/@CodingAdventure