DevTools — инструменты разработчика

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

DevTools (Developer Tools) — это набор инструментов, который есть в каждом современном браузере: Chrome, Firefox, Safari, Edge. Они позволяют заглянуть внутрь веб-страницы и увидеть, что происходит «под капотом».

Зачем это нужно? Потому что JavaScript работает в браузере. Чтобы понять, что делает ваш код, где ошибка и как страница устроена, нужно использовать DevTools. Это как рентген для веб-страницы.

Как открыть DevTools:

• F12 (или Ctrl+Shift+I на Windows/Linux, Cmd+Option+I на Mac)
• Правой кнопкой мыши на странице → «Просмотреть код» (Inspect)
• Ctrl+Shift+J (откроет сразу консоль)

DevTools — это как «рентген» для веб-страницы. Вы видите не готовую картинку, а то, из чего она состоит: HTML-структуру, CSS-стили, JavaScript-код и ошибки.

**Самый простой:**

// Откройте DevTools (F12) и вставьте в консоль:
console.log('Привет!');
// В консоли появится: Привет!

Это самый первый шаг: открыть консоль и увидеть, что JavaScript выполняет ваши команды.

**Простой:**

// Попробуйте:
console.log(2 + 2);    // 4
console.log('Hello' + ' ' + 'World'); // Hello World
console.log(true);     // true

Консоль выполняет JavaScript-код и показывает результат. Это удобно для быстрой проверки идей.

**Реальный пример:**

// Ошибка в коде — посмотрите, как DevTools помогает её найти:
console.log('Начало');
console.log(undefinedVariable); // ReferenceError!
console.log('Конец'); // Эта строка НЕ выполнится

Когда происходит ошибка, DevTools покажет её в консоли: тип ошибки, номер строки и описание. Это поможет вам найти и исправить проблему.

**Неправильно:** Игнорировать ошибки в консоли

**Почему:** Ошибка в консоли — это сообщение от браузера о проблеме. Если её не читать, невозможно понять, что пошло не так.

**Правильно:** Всегда смотрите в консоль первым делом, когда код не работает.

**Неправильно:** Использовать alert() для отладки

**Почему:** alert() блокирует всю страницу и показывает только текст. Консоль — в million раз удобнее.

**Правильно:** Используйте console.log(), console.table(), console.error() — они показывают структурированную информацию.

• DevTools открываются через F12 или Ctrl+Shift+I
• Консоль — основной инструмент для отладки JavaScript
• Ошибки в консоли содержат номер строки и описание проблемы
• Elements показывает HTML-структуру страницы
• Network показывает, какие файлы загружает браузер

Назад: У этого урока нет предварительных требований — это отправная точка JavaScript.

Вперёд: В следующем уроке (J1) вы напишете свой первый JavaScript-код и поймёте, как работает язык.