Як дебажити JavaScript як Senior Developer
Припиніть використовувати console.log для всього підряд. Ви витрачаєте на це години щотижня.
Я витратив 8 років на виправлення проблем у production. Цей робочий процес скорочує час дебагу на 60%.
| Інструмент | Випадок використання | Економія часу |
|---|---|---|
| Chrome DevTools Sources | Покрокове дебагування | 40% |
| Conditional Breakpoints | Локалізація багів у циклах | 25% |
| Performance Panel | Пошук вузьких місць рендерингу | 35% |
| Network Panel | Проблеми з таймінгом API | 30% |
| Console.assert | Раннє виявлення логічних помилок | 15% |
Досить розкидати логи всюди. Використовуйте замість цього ці методи.
Використовуйте Conditional Breakpoints Відкрийте DevTools Sources. Натисніть на номер рядка, щоб встановити breakpoint. Натисніть правою кнопкою миші та виберіть Edit breakpoint. Додайте умову. Дебагер зупиниться лише тоді, коли ваша умова буде істинною. Це економить години роботи з великими циклами.
Вивчайте Call Stack Коли дебагер робить паузу, подивіться на панель Call Stack. Вона показує шлях, який призвів до багу. Натисніть правою кнопкою миші на фрейм і виберіть Copy stack trace, щоб зберегти його.
Використовуйте Log Points Якщо ви хочете отримати вивід без зупинки коду, використовуйте Log points. Натисніть правою кнопкою миші на номер рядка та виберіть Add log point. Це не змінює ваш вихідний код. Вони зникають, коли ви закриваєте DevTools.
Виправляйте повільні додатки за допомогою Performance Panel Відкрийте вкладку Performance. Натисніть Record. Покористуйтеся сторінкою протягом 5 секунд. Натисніть Stop recording. Шукайте довгі завдання (long tasks) тривалістю понад 50 мс у Main thread. Це допоможе виявити проблеми з layout та painting.
Перевіряйте Network Panel Перегляньте Waterfall view. Червоні або фіолетові смужки означають заблоковані запити. Великі проміжки означають, що JavaScript блокує main thread. Натисніть правою кнопкою миші на запит і виберіть Copy as cURL, щоб протестувати проблеми з API у вашому терміналі.
Ваш чек-лист для дебагу:
- Встановіть conditional breakpoint
- Перевірте Call Stack, щоб побачити шлях виконання
- Використовуйте панель Scope для локальних змінних
- Додайте log point для моніторингу значень
- Запишіть Performance profile для виявлення проблем із таймінгом
- Перевірте Network panel на наявність проблем з API
На освоєння цього робочого процесу знадобиться два тижні. Це найкращий спосіб підвищити продуктивність вашої кар'єри. Ваш браузер уже має ці інструменти. Використовуйте їх.
Source: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p