`console.log()`

Главный способ отладки кода в вебе.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

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

Как пишется

Скопировано

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

        
          
          console.log('hello')// 'hello'console.log(true, { a: true }, 100)// true {a: true} 100
          console.log('hello')
// 'hello'

console.log(true, { a: true }, 100)
// true {a: true} 100

Как понять

Скопировано

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

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

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

        
          
          const a = { id: 1, value: 'one text' }alert(a)
          const a = { id: 1, value: 'one text' }
alert(a)

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

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

        
          
          const a = { id: 1, value: 'one text' }console.log(a)// Object { id: 1, value: "one text" }
          const a = { id: 1, value: 'one text' }
console.log(a)
// Object { id: 1, value: "one text" }

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

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

Скопировано

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

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

        
          
          const disneyCharacters = [{ name: 'Mickey Mouse', type: 'mouse' }]console.log(disneyCharacters)disneyCharacters.push({name: 'Pluto', type: 'dog' })
          const disneyCharacters = [{ name: 'Mickey Mouse', type: 'mouse' }]
console.log(disneyCharacters)
disneyCharacters.push({name: 'Pluto', type: 'dog' })

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

В консоли отображается массив с обоими героями — В консоли выводится итоговый вид массива с добавленным Плуто

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

Cпецификаторы форматирования

Скопировано

console.log() в JavaScript не является прямым наследником функции printf() из других языков программирования, но эмулирует некоторые её особенности, включая спецификаторы форматирования.

В качестве примера создадим массив с известными мандалорскими охотниками за головами. В исходной строке вместо имени героя фильма «Звёздные войны» оставим спецификатор, который укажет на следующий аргумент:

        
          
          const mandalorians = ['Джанго Фетт', 'Боба Фетт', 'Дин Джарин']console.log('Когда-то %s был самым известным охотником за головами', mandalorians[1])// Когда-то Боба Фетт был самым известным охотником за головами
          const mandalorians = ['Джанго Фетт', 'Боба Фетт', 'Дин Джарин']

console.log('Когда-то %s был самым известным охотником за головами', mandalorians[1])
// Когда-то Боба Фетт был самым известным охотником за головами

Сводка спецификаторов форматирования

Скопировано

Спецификатор	Тип
`%s`	Значение с типом `string`
`%d` или `%i`	Значение с типом `integer`
`%f`	Значение с типом `float`
`%o`	Значение с типом `Object`
`%O`	Значение с типом `Object`
`%c`	Позволяет применять CSS к выводимой строке

На практике

Скопировано

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

Скопировано

`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() простого объекта, то разница минимальна:

        
          
          const a = { cat: "miu", dog: "woof" }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 = 100console.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 = 100console.log({ language, count })// { language: 'JavaScript', count: 100 }
          const language = 'JavaScript'
const count = 100

console.log({ language, count })
// { language: 'JavaScript', count: 100 }

🛠 Если у нас есть массив с каким-то количеством однотипных объектов, то можно воспользоваться 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  │
// └──────────┴───────────────┴────────┘

Кратко

Как пишется

Как понять

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

Cпецификаторы форматирования

Сводка спецификаторов форматирования

На практике

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

console.log() и console.dir()

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

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

alert()

Как и зачем писать тесты

JSON

`console.log()` и `console.dir()`

`alert()`