Как вывести в консоль js
Незаменимым инструментом при работе с JavaScript является консоль браузера, которая позволяет производить отладку программы. Во многих современных браузерах есть подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer tools) :
После этого внизу браузера откроется консоль:
Мы можем напрямую вводить в консоль браузера выражения JavaScript, и они будут выполняться. Например, введем в консоли следующий текст:
alert("Привет мир");
И что замечательно при работе с консолью, при вводе она предлагает всплывающую подсказку с названиями, которые мы хотим ввести, что упрощает ввод, снижает количество возможных ошибок:
Функция alert() выводит в браузере окно с сообщением. В итоге после ввода этой команды и нажатия на клавишу Enter браузер выполнит эту функцию и отобразит нам окно с сообщением:
Таким образом, для написания и выполнения кода JavaScript нам в принципе не нужен ни текстовый редактор, ни файл веб-страницы, который содержит код javascript, достаточно одной консоли браузера. Однако набирать большой и сложный код JavaScript в консоли может быть не очень удобно, поэтому в дальнейшем для всех примеров по прежнему будет использовать код JavaScript, который встраивается на html-страницу.
Вывод на консоль и console.log
Для вывода различного рода информации в консоли браузера используется специальная функция console.log() . Например, определим html-страницу со следующим кодом:
METANIT.COM
В коде javascript с помощью ключевого слова const объявляется константа sum , которой присваивается сумма двух чисел 5 и 8:
const sum = 5 + 8;
Далее с помощью метода console.log() на консоль браузера выводится некоторое сообщение
console.log("Результат операции");
И в конце также с помощью метода console.log() на консоль браузера выводится значение константы sum.
console.log(sum);
И после запуска веб-страницы в браузере мы увидим в консоли результат выполнения кода:
Что очень полезно, в консоли браузера вы также можете заметить номера строк кода, где именно выполнялся вывод на консоль.
В дальнейшем мы часто будем обращаться к консоли и использовать функцию console.log.
Причем подобный код мы могли бы ввести в самой консоли:
Также последовательно вводим инструкции и после ввода каждой инструкции нажимаем на Enter. В данном случае я ввел две инструкции:
const sum2 = 1 + 2 // определяем константу sum2, которая равна сумме 1 + 2 console.log(sum2) // выводим значение константы sum2 на консоль
Если нам надо, чтобы код в консоли переносился на новую строку без выполнения, то в конце выражения javascript нажимаем на комбинацию клавиш Shift + Enter . После ввода последней инструкции для выполнения введенного кода javascript нажимаем на Enter.
Консоль JavaScript в вашем браузере
В процессе программирования на JavaScript появляется необходимость выводить значения переменных. К примеру, это можно делать функцией alert( ). Но если использовать её несколько раз, тогда придётся закрывать всплывающее окно, чтобы увидеть следующее. Это неудобно, поэтому на помощь приходит консоль, встроенная в браузер.
Как открыть JavaScript консоль в браузере?
Если вы пользуетесь одним из популярных браузеров (Chrome, FireFox, Safari, Opera), то в них уже встроена консоль JavaScript, в которую можно выводить отладочную информацию во время разработки. Для этого откройте страницу сайта, на которой находится JS код для тотладки, и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика.
В большинстве браузеров средства разработки называются более-менее одинаково и имеют очень схожий функционал. Далее в статье будет рассматриваться браузер FireFox.
Теперь необходимо переключить вкладку вверху открывшегося окна на «Консоль». Кликните на эту вкладку с помощью курсора мыши: Разберёмся с иконоками и опциями, которые есть в этой закладке:
- Иконка корзины — очищает лог (лог — это список событий, строчки текстовых записи)
- Непрерывные логи — если поставить эту галочку, то при перезагрузки страницы лог не будет очищаться автоматически.
- «Ошибки», «Предупреждения», «Лог» . — эти закладки отключают вывод сообщений. К примеру, кликните по пункту «Ошибки» и снимите выделение, тогда в консоль не будут записываться предупреждение об ошибках.
Как вывести переменную JavaScript в консоль?
Попробуем написать на странице JavaScript код и перезагрузить её, чтобы он выполнился. В коде используем функцию console.log( ), которая выводит значение содержимого в скобках. То есть если поставить в скобки переменную, то в консоли будет показано её значение:
var a = ; console.log(a);Заглянем в консоль и увидим значение объекта: 
Чтобы увидеть подробную информацию, кликните на иконку стрелочки слева на интересующей строчке: 
Таким способом можно выводить не только массивы и объекты, но и простые переменные. К сожалению, если выводить сразу несколько значений, то не будет понятно что к чему относится. Продемонстрируем это:
var a = 'Мышь'; var b = 'Сыр'; var c = 100; console.log(a); console.log(b); console.log(c);
Результат выполнения этого кода будет таким: Такой вывод не слишком информативен. К счастью, внутри скобок функции console.log( ) можно использовать объединение строк. Поэтому предлагаем записать дополнительную отладочную информацию в выводимые строки:
var a = 'Мышь'; var b = 'Сыр'; var c = 100; console.log('Значение переменной "a" = ' + a); console.log('Значение переменной "b" = ' + b); console.log('Значение переменной "c" = ' + c);
Теперь вывод в консоль будет более информативным. И можно использовать функцию console.log( ) десятки раз, не боясь запутаться в значениях, которые попадают в консоль:
Рекомендуем ознакомиться со статьёй «Операции со строками в JavaScript», если возникли вопросы к объединению строк.
К сожалению, это можно делать только с простыми переменными (строки/числа) и массивами (в том числе многомерными), но с объектами так сделать не получится, потому что будет выведено «[object Object]» вместо значения:
Как вывести объект в консоль js
Чтобы вывести в консоль плоский объект (объект, в котором нет вложенных объектов или массивов), достаточно передать его в console.log() :
const plainObject = name: 'John', age: 35, isMarried: true, >; console.log(plainObject); // => Для вложенных объектов с глубиной вложенности не более двух ситуация аналогичная: просто передаём такой объект в console.log() и всё будет работать как надо:
const nestedObject = firstLevel: secondLevel: name: 'John', age: 35, isMarried: true, >, >, >; console.log(nestedObject); // => < firstLevel: < secondLevel: < name: 'John', age: 35, isMarried: true >> > Но для уровня вложенности три и более такой способ уже не подойдет, и мы увидим следующее:
const deepNestedObject = firstLevel: secondLevel: thirdLevel: name: 'John', age: 35, isMarried: true, >, >, >, >; console.log(deepNestedObject); // => < firstLevel: < secondLevel: < thirdLevel: [Object] >> > Здесь нам на помощь приходит метод JSON.stringify() , который преобразует объект в JSON строку. Работать этот способ будет с любым уровнем вложенности:
console.log(JSON.stringify(deepNestedObject, null, 2)); /* => < "firstLevel": < "secondLevel": < "thirdLevel": < "name": "John", "age": 35, "isMarried": true >> > > */ Выводим элемент в консоль
Мы сказали JavaScript найти на странице элемент с классом page , но как узнать, что он его действительно нашёл? И что элемент — тот самый? Для этого нам понадобится консоль.
Консоль — это инструмент разработчика, который помогает тестировать код. Если во время выполнения скрипта возникнет ошибка, в консоли появится сообщение о ней. А ещё в консоль можно выводить текстовые подсказки. В нашем интерфейсе консоль находится справа от редактора кода, между мини-браузером и списком задач. Чтобы увидеть сообщения в консоли, её нужно развернуть, щёлкнув по значку справа.
Задачи Выполнено 0 из 3
Чтобы вывести сообщение в консоль, нужно использовать console.log :
console.log('Привет от JavaScript!');В результате этой инструкции в консоли появится сообщение Привет от JavaScript!
В консоль можно выводить не только текст, но и результаты выполнения инструкций. Например, найденный с помощью querySelector элемент:
console.log(document.querySelector('.page'));Инструкция получилась длинной и сложной, но вскоре мы разберём, как её упростить. А пока займёмся тестированием кода. Так называется этап создания программы, когда мы проверяем, что всё работает, как надо. И это не менее важно, чем написание кода.
Давайте убедимся, что JavaScript нашёл нужный элемент, а заодно потренируемся работать с консолью.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
- script.js Сплит-режим