TGViewer
Frontend | Вопросы собесов Frontend | Вопросы собесов @easy_javascript_ru · 17.6K subscribers
Post #684 6.17K
🤔 Что известно про отладку js ?

Отладка JS кода — это процесс поиска и исправления ошибок, которые возникают в программном обеспечении. Этот процесс важен для выявления логических ошибок, неправильных значений переменных и других проблем, которые могут возникнуть во время разработки. Рассмотрим основные инструменты и методы для отладки JavaScript кода.

🚩Основные инструменты

🟠Консоль разработчика в браузере
Все современные браузеры (Chrome, Firefox, Edge, Safari) имеют встроенные инструменты для разработчиков, которые включают консоль для вывода сообщений, просмотра значений переменных и выполнения JavaScript кода в реальном времени.

Пример использования консоли в Chrome:
1⃣Откройте инструменты разработчика (F12 или Ctrl+Shift+I).
2⃣Перейдите на вкладку "Console".
3⃣Используйте console.log(), console.error(), console.warn() для вывода сообщений в консоль.
console.log('Это сообщение для отладки');
console.error('Это сообщение об ошибке');
console.warn('Это предупреждающее сообщение');


🟠Точки останова (breakpoints)
Точки останова позволяют приостановить выполнение кода на определенной строке, чтобы можно было исследовать текущее состояние программы (значения переменных, выполнение функций и т.д.).

Пример использования точек останова в Chrome:
1⃣Откройте инструменты разработчика и перейдите на вкладку "Sources".
2⃣Найдите и откройте файл JavaScript.
3⃣Щелкните на номер строки, где хотите установить точку останова.
4⃣Обновите страницу и выполнение остановится на установленной точке останова.

🟠Интерактивное выполнение кода
Инструменты разработчика позволяют выполнять JavaScript код в реальном времени через консоль.

Пример:
1⃣Откройте инструменты разработчика и перейдите на вкладку "Console".
2⃣Введите и выполните произвольный JavaScript код, например:
let x = 10;
let y = 20;
console.log(x + y); // 30


🟠Просмотр вызовов функций (Call Stack)
Инструменты разработчика позволяют отслеживать вызовы функций и видеть, как они были вызваны друг другом.

Пример:
Когда выполнение приостановлено на точке останова, откройте вкладку "Call Stack" в инструментах разработчика, чтобы увидеть последовательность вызовов функций.

🚩Методы

Использование console.log()
Это простой и распространенный метод для вывода значений переменных и сообщений на разных этапах выполнения кода.
function add(a, b) {
console.log('Аргументы:', a, b);
return a + b;
}

let result = add(5, 3);
console.log('Результат:', result);


Отладочные утверждения (Assertions)
Метод console.assert() позволяет выполнять утверждения и выводить сообщение, если условие ложно.
let x = 5;
console.assert(x === 5, 'x должно быть равно 5');
console.assert(x === 10, 'x должно быть равно 10'); // Выведет сообщение


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 20
  • ❤ 2
More from @easy_javascript_ru
  1. Oct 15, 2026Post #3044
  2. Oct 15, 2026🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, которы…
  3. Oct 14, 2026🤔 Зачем создавались библиотеки react и другие? Библиотеки, такие как React, создавались д…
  4. Oct 13, 2026🤔 Что такое репозиторий? Это хранилище кода, файлов и их истории изменений. Используется…
  5. Oct 13, 2026🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замер…
  6. Oct 12, 2026🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерам…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →