/ ↲
    Расширенный поиск

    JavaScript

    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 существуют различные методы. Есть два похожих метода 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  │
// └─────────┴──────────────┴───────┘

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