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).

На практике

Секция статьи "На практике"

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

Секция статьи "Дока Дог советует"

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

        
          
          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  │
// └─────────┴──────────────┴───────┘