LearnJS

Консоль разработчика в браузере

Когда мы начинаем писать JavaScript, важно не только видеть страницу в браузере, но и понимать, что происходит внутри кода. Для этого в браузере есть инструменты разработчика, а одна из самых полезных вкладок в них - консоль.

Через консоль можно выводить значения, проверять работу скрипта, смотреть ошибки и запускать небольшие команды JavaScript прямо в браузере. На первых уроках это один из главных инструментов для практики.

Что такое консоль разработчика

Консоль разработчика - это часть инструментов браузера, в которой отображаются сообщения от JavaScript. Если в коде есть ошибка, браузер покажет ее в консоли. Если мы сами хотим вывести какое-то значение, это тоже удобно делать через консоль.

Проще говоря, консоль помогает увидеть то, что не всегда видно на самой странице. Например, скрипт может ничего не менять в HTML, но при этом выполнять расчеты, получать данные или сталкиваться с ошибкой.

В консоли можно:

  • смотреть сообщения из JavaScript-кода;
  • проверять значения переменных;
  • видеть ошибки и предупреждения;
  • запускать короткие команды;
  • быстро проверять небольшие примеры.

Как открыть консоль

В большинстве браузеров инструменты разработчика можно открыть клавишей F12. Также часто работает сочетание клавиш Ctrl + Shift + I.

Еще один способ - нажать правой кнопкой мыши на странице и выбрать пункт Просмотреть код или Inspect. После этого откроется панель инструментов разработчика.

Нас сейчас интересует вкладка Console. Именно там будут появляться сообщения, которые мы выводим через JavaScript.

Если панель открылась не внизу, а сбоку страницы - это нормально. Браузер может размещать инструменты разработчика по-разному, но сама вкладка Console работает одинаково.

Вывод данных через console.log()

Самый частый способ вывести информацию в консоль - метод console.log().

console.log('Привет из JavaScript');

Если такой код находится в подключенном файле script.js, то после обновления страницы в консоли появится сообщение:

Привет из JavaScript

В скобках можно передавать не только текст, но и числа:

console.log(10);
console.log(10 + 5);

В консоли увидим:

10
15

На практике console.log() часто используют для проверки. Например, мы хотим убедиться, что браузер дошел до нужной строки кода:

console.log('Скрипт начал работу');

alert('Привет!');

console.log('Код после alert() тоже выполнился');

Так проще понять порядок выполнения кода и найти место, где что-то пошло не так.

Ошибки в консоли

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

Рассмотрим простой пример:

console.log(message);

Если переменная message нигде не была создана, браузер выведет ошибку:

Uncaught ReferenceError: message is not defined

Разберем сообщение по смыслу:

  • ReferenceError - ошибка обращения к несуществующему имени;
  • message is not defined - переменная message не определена;
  • рядом обычно указывается файл и номер строки, где возникла ошибка.

Теперь исправим код:

let message = 'Изучаем JavaScript';

console.log(message);

После этого в консоли будет обычный вывод текста, без ошибки.

Команды прямо в консоли

В консоли можно не только смотреть сообщения, но и писать команды вручную. Например, откройте вкладку Console, введите:

2 + 3

После нажатия Enter браузер сразу покажет результат:

5

Можно вызвать и знакомую функцию:

alert('Команда из консоли');

Такой способ удобен для небольших проверок. Но полноценный код лучше писать в файле script.js, чтобы он сохранялся и был связан со страницей.

Что дальше

Консоль разработчика нужна постоянно: для проверки кода, поиска ошибок и вывода промежуточных результатов. Даже опытные разработчики регулярно используют console.log(), когда хотят быстро понять, что происходит в программе.

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