Консоль браузера и console.log

Последнее обновление: 09.08.2023

Незаменимым инструментом при работе с JavaScript является консоль браузера, которая позволяет производить отладку программы. Во многих современных браузерах есть подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer tools):

Отладка JavaScript в Google Chrome

После этого внизу браузера откроется консоль:

Консоль JavaScript в Google Chrome

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

alert("Привет мир");

И что замечательно при работе с консолью, при вводе она предлагает всплывающую подсказку с названиями, которые мы хотим ввести, что упрощает ввод, снижает количество возможных ошибок:

Консоль JavaScript в Google Chrome

Функция alert() выводит в браузере окно с сообщением. В итоге после ввода этой команды и нажатия на клавишу Enter браузер выполнит эту функцию и отобразит нам окно с сообщением:

Ввод команд JavaScript в консоли браузера Google Chrome

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

Вывод на консоль и console.log

Для вывода различного рода информации в консоли браузера используется специальная функция console.log(). Например, определим html-страницу со следующим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>METANIT.COM</title>
</head>
<body>
    <script>
        const sum = 5 + 8;
        console.log("Результат операции: ");
        console.log(sum);
    </script>
</body>
</html>

В коде javascript с помощью ключевого слова const объявляется константа sum, которой присваивается сумма двух чисел 5 и 8:

const sum = 5 + 8;

Далее с помощью метода console.log() на консоль браузера выводится некоторое сообщение

console.log("Результат операции");

И в конце также с помощью метода console.log() на консоль браузера выводится значение константы sum.

console.log(sum);

И после запуска веб-страницы в браузере мы увидим в консоли результат выполнения кода:

Функция console.log() в JavaScript

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

В дальнейшем мы часто будем обращаться к консоли и использовать функцию console.log.

Причем подобный код мы могли бы ввести в самой консоли:

Консоль JavaScript в браузере

Также последовательно вводим инструкции и после ввода каждой инструкции нажимаем на Enter. В данном случае я ввел две инструкции:

const sum2 = 1 + 2      // определяем константу sum2, которая равна сумме 1 + 2
console.log(sum2)       // выводим значение константы sum2 на консоль

Если нам надо, чтобы код в консоли переносился на новую строку без выполнения, то в конце выражения javascript нажимаем на комбинацию клавиш Shift + Enter. После ввода последней инструкции для выполнения введенного кода javascript нажимаем на Enter.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850