- console . log ( )
- Как пишется
- Как понять
- Особенность работы в браузере
- На практике
- Дока Дог советует
- console . log ( ) и console . dir ( )
- Виталий Баев советует
- Используй console.log () как про
- Наиболее распространенные методы консоли:
- Пользовательские стили CSS для console.log ()
- Подстановки строк
- console.assert ()
- console.clear ()
- console.count ()
- console.dir ()
- console.group () и console.groupEnd ()
- HTML-элементы в консоли
- console.memory
- console.table ()
- console.time () и console.timeEnd ()
- console.trace ()
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 — самая распространенная практика среди разработчиков. Но есть еще кое-что .
Объект console обеспечивает доступ к отладочной консоли браузера. Особенности того, как это работает, варьируются от браузера к браузеру, но де-факто существует набор функций, которые обычно предоставляются.
Наиболее распространенные методы консоли:
- console.log() — Для общего вывода журнальной информации.
- console.info() — Выводит необходимую информацию.
- console.debug()- Выводит сообщение на консоль с уровнем журнала debug.
- console.warn() — Выводит предупреждающее сообщение.
- console.error() — Выводит сообщение об ошибке.
Пользовательские стили CSS для console.log ()
Вывод console.log может быть оформлен в Devtools с использованием стилей CSS.
Подстановки строк
При передаче строки одному из методов объекта console, который принимает строку (например, log()), вы можете использовать следующие подстановочные строки :
console.assert ()
Выведите сообщение(например, с помощью log()) и stack trace на консоль, если первый аргумент — false.
console.clear ()
Очистите консоль. // ну и собсветтно всё всем спасибо за вниманиё
console.count ()
Запишите, сколько раз эта строка была вызвана с count().
console.dir ()
Отображает интерактивный список свойств указанного объекта JavaScript.
console.group () и console.groupEnd ()
Создает новую встроенную группу, смещая все последующие выходные данные другим уровнем. Чтобы вернуться на уровень назад, вызовите groupEnd().
HTML-элементы в консоли
console.memory
Свойство memory можно использовать , чтобы проверить состояние кучи.
Примечание: память — это свойство, а не метод.
console.table ()
Отображает данные в виде таблицы.
console.time () и console.timeEnd ()
- console.time()- Запускает таймер с именем, указанным в качестве входного параметра. На одной странице может работать до 10 000 таймеров одновременно.
- console.timeEnd() — Останавливает указанный таймер и регистрирует время в миллисекундах, прошедшее с момента его запуска.
console.trace ()
Дата-центр ITSOFT — размещение и аренда серверов и стоек в двух дата-центрах в Москве. За последние годы UPTIME 100%. Размещение GPU-ферм и ASIC-майнеров, аренда GPU-серверов, лицензии связи, SSL-сертификаты, администрирование серверов и поддержка сайтов.