Як налагоджувати JavaScript у DevTools: точки зупинки і debugger?

console.log - найпростіший спосіб, але для складних помилок значно ефективніше зупинити виконання й подивитися на стан програми зсередини.

Оператор debugger у коді зупиняє виконання в цьому місці, якщо відкрито DevTools:

function calculateTotal(items) {
  debugger;   // виконання зупиниться тут
  return items.reduce((sum, item) => sum + item.price * item.qty, 0);
}

Без відкритих DevTools оператор нічого не робить. Але в репозиторій його не комітять - лінтери на це скаржаться.

Точки зупинки в DevTools (вкладка Sources) - те саме без зміни коду: клік по номеру рядка. Види:

• умовна - зупиняється лише якщо вираз істинний (item.price < 0). Незамінно в циклі на тисячу ітерацій;
• logpoint - нічого не зупиняє, а друкує вираз у консоль. Як console.log, але без зміни коду й перезбирання;
• на подію - зупинитися на будь-якому click, submit, таймері (панель Event Listener Breakpoints);
• на зміну DOM - зупинитися, коли елемент змінюється чи видаляється (контекстне меню елемента у вкладці Elements). Відповідає на питання «хто змінює цей елемент?»;
• на запит - коли URL запиту містить рядок (XHR/fetch Breakpoints);
• на винятки - «Pause on exceptions», включно з перехопленими.

Після зупинки:

• Scope - значення всіх змінних у поточній функції й замиканнях;
• Call Stack - як ми сюди потрапили; клік на попередню функцію показує її стан;
• Watch - вирази, що перераховуються на кожному кроці;
• консоль працює в контексті зупиненої функції - можна викликати функції й змінювати змінні;
• кроки: Step over (наступний рядок), Step into (увійти у функцію), Step out (вийти з неї), Resume.

Корисні дрібниці:

• $0 у консолі - поточний виділений у Elements елемент;
• «Blackbox script» / «Add to ignore list» - не заходити в код бібліотек (Vue, Alpine) при покроковому виконанні;
• вкладка Network - запити, відповіді, статуси; «Copy as fetch» для повторення запиту в консолі;
• у Livewire-проєктах корисно дивитися запити livewire/update у Network - там видно, що компонент відправив і що отримав.

Мініфікований код налагоджувати неможливо - для цього потрібні source maps, які у Vite в режимі розробки є завжди.

Докладніше в документації: debugger