Как запускать JavaScript в браузере

JavaScript можно запускать прямо в браузере - это самый быстрый способ проверить идею, увидеть результат и разобраться, почему код работает не так, как ожидается. Для этого используют DevTools (инструменты разработчика) и Console (консоль).

DevTools - что это и где находится

DevTools - встроенный набор инструментов браузера для разработки и отладки. В большинстве браузеров (Chrome, Edge, Firefox) DevTools открывается так:

• F12
• Ctrl+Shift+I (Windows/Linux)
• Cmd+Option+I (macOS)

Внутри DevTools чаще всего нужны вкладки:

• Console - запуск кода, просмотр логов и ошибок
• Sources - просмотр файлов, точки останова (breakpoints), пошаговая отладка
• Network - запросы к серверу (пригодится позже)

Console - быстрый запуск кода

Console позволяет выполнять JavaScript сразу, без файла и без сборки.

Пример - простые выражения:

2 + 2
"Hello".toUpperCase()
Math.max(10, 7, 25)

Console также удобно использовать для проверки значений:

const price = 1200;
const discount = 15;
price - (price * discount) / 100

console.log и полезные методы

Чаще всего применяют console.log() для вывода значений и промежуточных результатов.

const user = { id: 7, name: "Alex", role: "admin" };
console.log(user);
console.log("role:", user.role);

Дополнительно полезны:

console.warn("Предупреждение");
console.error("Ошибка");
console.table([{ a: 1, b: 2 }, { a: 3, b: 4 }]);
console.time("calc");
for (let i = 0; i < 100000; i++) {}
console.timeEnd("calc");

console.clear() очищает консоль, а кнопка очистки есть и в интерфейсе DevTools.

Как запускать код на странице

Есть три базовых подхода: через Console, через snippet, и через файл на странице.

1) Запуск через Console

Подходит для коротких проверок и экспериментов.

document.title
document.querySelectorAll("a").length

Если ввести несколько строк, обычно используется Shift+Enter для переноса строки без выполнения, а Enter - для выполнения (поведение зависит от браузера).

2) Snippets - маленькие скрипты внутри DevTools

Snippets - это сохраненные фрагменты кода, которые можно запускать повторно:

• DevTools -> Sources -> Snippets
• Создать новый snippet
• Вставить код и запускать по необходимости

Пример snippet, который подсвечивает все ссылки на странице:

document.querySelectorAll("a").forEach((a) => {
  a.style.outline = "2px solid orange";
});

3) Подключение скрипта в HTML

Так код становится частью страницы. Обычно подключают файл script.js:

<script src="/script.js"></script>

Если скрипт работает с DOM (ищет элементы на странице), часто ставят атрибут defer, чтобы код выполнялся после разбора HTML:

<script src="/script.js" defer></script>

Ошибки в Console - как читать и понимать

Когда что-то ломается, браузер показывает ошибку в Console. Важно уметь быстро понять:

• что именно произошло
• в какой строке
• из какой цепочки вызовов пришли к ошибке (stack trace)

Самые частые типы ошибок

SyntaxError - синтаксис написан неверно, код не может выполниться.

// Пример: пропущена закрывающая скобка
if (true) {
  console.log("ok");

ReferenceError - обращение к переменной, которой не существует в текущей области видимости.

console.log(total); // total не объявлена

TypeError - операция применяется к значению неподходящего типа.

const n = 10;
n.toUpperCase(); // у числа нет такого метода

Stack trace - зачем он нужен

Stack trace - список вызовов функций, который показывает путь к ошибке. Обычно в ошибке есть:

• сообщение (что случилось)
• файл и строка
• цепочка вызовов

Пример, который часто дает понятный stack trace:

function formatName(user) {
  return user.name.trim();
}

function printUser(user) {
  return formatName(user);
}

printUser(null);

В ошибке будет видно, что проблема возникла внутри formatName, а вызов пришел из printUser.

Отладка через Sources - точки останова и пошаговый режим

Console показывает последствия, а вкладка Sources помогает остановить выполнение кода и посмотреть, что происходит “внутри”.

Основные шаги:

1. Открыть Sources
2. Найти файл со скриптом
3. Кликнуть по номеру строки, чтобы поставить breakpoint
4. Обновить страницу или запустить нужное действие
5. Использовать кнопки Step over / Step into для пошагового выполнения

Что полезно смотреть во время отладки:

• значения переменных (панель Scope)
• call stack (цепочка вызовов)
• Watch expressions (выражения для наблюдения)

Несколько привычек, которые экономят время

• Ошибка в Console - это не просто текст, а ссылка на строку в файле (по клику открывается Sources на нужном месте).
• Если в логах много шума, удобно включать фильтры и очищать консоль перед проверкой.
• console.log лучше ставить рядом с местом, где меняется значение, а не только в конце.
• Если код выполняется слишком рано и не находит элементы, стоит проверить, подключен ли скрипт с defer.

Короткий итог

DevTools - главный инструмент для запуска и отладки JavaScript в браузере. Console подходит для быстрых проверок и чтения ошибок, а Sources - для пошаговой отладки и поиска причин.