skip to main content

console.log()

js

Кратко 🔗

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

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

Как пишется 🔗

Синтаксис написания крайне прост. console.log() выведет в консоль все переданные параметры:

console.log("hello") // выведет "hello"
console.log(true, { a: true }, 100) // выведет true {a: true} 100

Как это понять 🔗

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

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

Открой консоль и сравни:

let a = { id: 1, value: "one text" }
alert(a)

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

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

let a = { id: 1, value: "one text" }
console.log(a)

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

💡 Если хочется вывести отладочное сообщение на страницу, то придется воспользоваться или alert или создавать специальный textarea, чтобы записать туда свои вычисления. Также нужно будет перевести всё это в строку — проще будет читать.

В работе 🔗

Миша 👨‍🔧

В пространстве console существуют различные инструменты. Рассмотрим console.log и console.dir.

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

Но console.log показывает содержимое DOM, а не его свойства. Чтобы увидеть свойства DOM элемента необходимо использовать console.dir:

z = document.createElement("div")
zz = document.createElement("div")
zz.appendChild(z)
console.log(z)
console.dir(z)

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

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

let a = { cat: "miu", dog: "woof" }
console.log(a)
console.dir(a)

🛠 В каждом браузере свой набор инструментов работы с console. В целом, они похожи, но есть и различия. Узнать подробности и поддерживаемые методы можно по ссылкам:

https://developers.google.com/web/tools/chrome-devtools/console/console-write

https://developer.mozilla.org/en-US/docs/Web/API/Console


Автор: Миша 👨‍🔧