Javascript вывести результат в консоль

console . log ( )

console . log ( ) — это метод, предназначенный для печати в консоль браузера.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызов console . log ( ) выведет в консоль все переданные аргументы:

 console.log('hello')// 'hello'console.log(true, < a: true >, 100)// true 100 console.log('hello') // 'hello' console.log(true,  a: true >, 100) // true 100    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

⚡️ В момент разработки все действия кажутся долгими, поэтому можно воспользоваться молниеносным выводом в консоль.

Почему консоль разработчика, а не alert ( ) ?

Откройте консоль и выполните:

 const a = alert(a) const a =  id: 1, value: 'one text' > alert(a)    Скопировать Скопировано Не удалось скопировать   

Вывод при таком подходе не отражает содержимого объекта а — мы увидим только надпись «[object Object]». Помимо этого приходится каждый раз закрывать диалоговое окно, что раздражает.

Другое дело если совершать эти действия в консоли:

 const a = console.log(a)// Object const a =  id: 1, value: 'one text' > console.log(a) // Object   Скопировать Скопировано Не удалось скопировать   

Результат представлен в виде дерева, которое удобно раскрывается — видны все параметры.

Если хочется вывести отладочное сообщение на страницу, то придётся воспользоваться или alert ( ) или создавать отладочный HTML-блок div или textarea , чтобы записать туда свои вычисления с помощью записи в свойство inner Text . Перед этим не забудьте привести объект в строку с помощью JSON . stringify ( ) — проще будет читать.

Особенность работы в браузере

Скопировать ссылку «Особенность работы в браузере» Скопировано

В браузере с помощью console . log ( ) можно проверить мутацию ссылочного типа. Этого можно добиться, раскрыв выведенное значение в консоли. Всё что нам нужно сделать — нажать на иконку с перевёрнутым треугольником (►).

В качестве примера создадим массив с героями диснеевских мультфильмов. Изначально в нем будет располагаться только Микки Маус, а после вызова console . log ( ) , добавим и Плуто.

 const disneyCharacters = [< name: 'Mickey Mouse', type: 'mouse' >]console.log(disneyCharacters)disneyCharacters.push() const disneyCharacters = [ name: 'Mickey Mouse', type: 'mouse' >] console.log(disneyCharacters) disneyCharacters.push(name: 'Pluto', type: 'dog' >)    Скопировать Скопировано Не удалось скопировать   

Нажмём на иконку с перевёрнутым треугольником (►) в консоли и увидим результат вывода:

Причина в том, что значение ссылочного типа читается браузером только при его первом раскрытии. Этот процесс также называют ленивым чтением (lazy-read).

Google Chrome при этом показывает информационную иконку, при наведении на которую отобразится подсказка с текстом: «This value was evaluated upon first expanding. It may have changed since then.»

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

console . log ( ) и console . dir ( )

Скопировать ссылку «console.log() и console.dir()» Скопировано

В пространстве объекта console существуют различные методы. Есть два похожих метода console . log ( ) и console . dir ( ) .

console . log ( ) отражает любой объект в консоли в удобном виде. Если это примитив — то его значением, если объект — его древовидной формой. DOM-элемент — его можно также раскрыть и увидеть, что внутри.

Но console . log ( ) показывает содержимое DOM, а не его свойства. Если нужно увидеть свойства DOM-элемента, то лучше использовать console . dir ( ) :

 const el = document.createElement('div')const el2 = document.createElement('div')el2.appendChild(el)console.log(el)console.dir(el) const el = document.createElement('div') const el2 = document.createElement('div') el2.appendChild(el) console.log(el) console.dir(el)    Скопировать Скопировано Не удалось скопировать   

️ console . log ( ) удобен для исследования объектов и их вложенных элементов, а console . dir ( ) удобен для просмотра свойств объекта.

Если делать console . log ( ) и console . dir ( ) простого объекта, то разница минимальна:

 const a = console.log(a)console.dir(a) const a =  cat: "miu", dog: "woof" > console.log(a) console.dir(a)    Скопировать Скопировано Не удалось скопировать   

🛠 В каждом браузере свой набор инструментов работы с console . Смотрите, поддерживается ли тот или иной метод в вашем браузере в таблице на MDN

Виталий Баев советует

Скопировать ссылку «Виталий Баев советует» Скопировано

🛠 Часто нам необходимо вывести в консоли содержимое переменных. Например, вывести переменные language и count можно так:

 const language = 'JavaScript'const count = 100 console.log('language:', language, 'count:', count)// language: JavaScript count: 100 const language = 'JavaScript' const count = 100 console.log('language:', language, 'count:', count) // language: JavaScript count: 100    Скопировать Скопировано Не удалось скопировать   

Но можно сделать проще и быстрее. Сравните:

 const language = 'JavaScript'const count = 100 console.log(< language, count >)// const language = 'JavaScript' const count = 100 console.log( language, count >) //   Скопировать Скопировано Не удалось скопировать   

🛠 Если у нас есть массив с каким-то количеством однотипных объектов, то можно воспользоваться console . table ( ) :

 const data = [ < section: 'HTML', count: 212 >, < section: 'CSS', count: 121 >, < section: 'JavaScript', count: 182 >, < section: 'Tools', count: 211 >,] console.table(data);// ┌─────────┬──────────────┬───────┐// │ (index) │ section │ count │// ├─────────┼──────────────┼───────┤// │ 0 │ 'HTML' │ 212 │// │ 1 │ 'CSS' │ 121 │// │ 2 │ 'JavaScript' │ 182 │// │ 3 │ 'Tools' │ 211 │// └─────────┴──────────────┴───────┘ const data = [  section: 'HTML', count: 212 >,  section: 'CSS', count: 121 >,  section: 'JavaScript', count: 182 >,  section: 'Tools', count: 211 >, ] console.table(data); // ┌─────────┬──────────────┬───────┐ // │ (index) │ section │ count │ // ├─────────┼──────────────┼───────┤ // │ 0 │ 'HTML' │ 212 │ // │ 1 │ 'CSS' │ 121 │ // │ 2 │ 'JavaScript' │ 182 │ // │ 3 │ 'Tools' │ 211 │ // └─────────┴──────────────┴───────┘    Скопировать Скопировано Не удалось скопировать   

Источник

Метод console.log — Вывод информации в консоль

Метод console. log в Javascript позволяет выводить информацию (сообщения, данные и т.п.) из программного кода в консоль.

На этом сайте, при работе с Javascript -кодом, в большинстве случаев для вывода информации использовался метод write объекта document или (иногда) метод alert.

О существовании консоли тоже следует знать, так как ее использование — это хороший способ диагностики и отладки программного кода.

window . alert ( «Модальное Окно» );

console . log ( «Вывод данных в консоль» );

Как открыть консоль в браузере?

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

Ctrl + Shift + I — открываем Веб-консоль в большинстве браузеров Mozilla Firefox , Google Chrome , Opera .

В браузере Mozilla Firefox также работает сочетание клавиш Ctrl + Shift + K .

Либо следуем по пути: Инструменты — Веб-разработка — Консоль браузера.

Метод console.log в JavaScript — Вывод информации в консоль

Зная, как открыть консоль браузера, рассмотрим пример вывода в нее информации при помощи метода console.log.

document . write («Чтобы открыть Консоль в Firefox — нажмите Ctrl + Shift + K»);

console. log («Добро пожаловать в Веб-консоль»);

Итак, при помощи метода console. log можно выводить информацию в консоль браузера.

Со временем Вы оцените достоинства этого способа представления работы Javascript -кода.

Преимущества console.log — Каждый раз с новой строки

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

Если же выводить информацию в окно браузера при помощи метода write объекта document, то для организации переноса строки нужно специально ставить тег br, либо указывать новый параграф — тег p.

document . write ( «Строка №1» );
document . write ( «Строка №2
» );
document . write ( «Строка №3» );

console. log ( «Строка №1» );
console. log ( «Строка №2» );
console. log ( «Строка №3» );

Строка №1Строка №2
Строка №3

Строка №1
Строка №2
Строка №3

Как видно, строки, выведенные на экран при помощи document . write , следуют друг за другом неразрывно, кроме той, где намеренно введен тег переноса .

В то время как метод console. log каждый раз выводит информацию с новой строки, что очень удобно. Поэтому для диагностики и отладки Javascript -кода пользуйтесь выводом результатов в консоль.

Читайте также.

Метод write() объекта document

Добавление элементов в массив

Способы вывода данных из массива

Практическая задача — Создание массива

Начало работы – Переменные и типы данных

Практика часть 1 – Способы добавления свойств в объект

Отзывы и комментарии:

Добавил(а): Александр
Дата: 2020-01-05

Скажите пожалуйста? А возможно вывести в строку в консоль через цикл?

Добавил: Admin
Дата: 2020-01-06

Вывести строку в консоль через цикл? Да можно вывести что-либо в консоль через цикл.

Добавил(а): Александр
Дата: 2020-01-07

Я извиняюсь за не правильно поставленный вопрос) Дело вот в чем. Я учил Java но потом понял что хочу стать Front-End разработчиком и переключился на JS. Начал с чтения книги «Выразительный Javascript» там есть дз Шахматная доска -Напишите программу, создающую строку, содержащую решётку 8х8, в которой линии разделяются символами новой строки. На каждой позиции либо пробел, либо #. В результате должна получиться шахматная доска. Это задание легко выполнил бы в Java. А тут consol.log — постоянно переносит на новую строку) Но в общем я уже подсмотрел решение) записать все в String. В общем как то так)

Добавил: Admin
Дата: 2020-01-07

Хорошо. Не плохая задача для начала. Удачи в учебе.

Добавил(а): Александр
Дата: 2020-01-09

Источник