Как вывести в консоль js

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 │ // └─────────┴──────────────┴───────┘    Скопировать Скопировано Не удалось скопировать   

Как вывести в консоль js

Незаменимым инструментом при работе с JavaScript является консоль браузера, которая позволяет производить отладку программы. Во многих современных браузерах есть подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer tools) :

После этого внизу браузера откроется консоль:

Мы можем напрямую вводить в консоль браузера выражения JavaScript, и они будут выполняться. Например, введем в консоли следующий текст:

alert("Привет мир");

И что замечательно при работе с консолью, при вводе она предлагает всплывающую подсказку с названиями, которые мы хотим ввести, что упрощает ввод, снижает количество возможных ошибок:

Функция alert() выводит в браузере окно с сообщением. В итоге после ввода этой команды и нажатия на клавишу Enter браузер выполнит эту функцию и отобразит нам окно с сообщением:

Таким образом, для написания и выполнения кода JavaScript нам в принципе не нужен ни текстовый редактор, ни файл веб-страницы, который содержит код javascript, достаточно одной консоли браузера. Однако набирать большой и сложный код JavaScript в консоли может быть не очень удобно, поэтому в дальнейшем для всех примеров по прежнему будет использовать код JavaScript, который встраивается на html-страницу.

Вывод на консоль и console.log

Для вывода различного рода информации в консоли браузера используется специальная функция console.log() . Например, определим html-страницу со следующим кодом:

В коде javascript с помощью ключевого слова const объявляется константа sum , которой присваивается сумма двух чисел 5 и 8:

const sum = 5 + 8;

Далее с помощью метода console.log() на консоль браузера выводится некоторое сообщение

console.log("Результат операции");

И в конце также с помощью метода console.log() на консоль браузера выводится значение константы sum.

console.log(sum);

И после запуска веб-страницы в браузере мы увидим в консоли результат выполнения кода:

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

В дальнейшем мы часто будем обращаться к консоли и использовать функцию console.log.

Причем подобный код мы могли бы ввести в самой консоли:

Также последовательно вводим инструкции и после ввода каждой инструкции нажимаем на Enter. В данном случае я ввел две инструкции:

const sum2 = 1 + 2 // определяем константу sum2, которая равна сумме 1 + 2 console.log(sum2) // выводим значение константы sum2 на консоль

Если нам надо, чтобы код в консоли переносился на новую строку без выполнения, то в конце выражения javascript нажимаем на комбинацию клавиш Shift + Enter . После ввода последней инструкции для выполнения введенного кода javascript нажимаем на Enter.

Консоль JavaScript: выводим отладку на новый уровень

Как веб-разработчик, вы должны быть знакомы с console.log() . Это наиболее простой подход к устранению любых неполадок путем регистрации значений переменных в инструментах разработчика. Но консольный API – это гораздо больше, он предоставляет множество других методов, которые могут помочь вам в отладке.

Список всех методов консоли, которые описаны в этой статье:

1. console.log()
2. console.clear()
3. console.warn()
4. console.table()
5. console.dir()
6. console.group и console .groupCollapsed()
7. console.count и console.countReset()
8. console.assert()
9. Console.error()
10. console.time и console.timeEnd()
11. console.trace()

1. console.log()

Это наиболее распространенный метод ведения отладки. Эта функция просто выводит в консоль любые переменные/строки. Достаточно перечислить несколько переменных/строк, поставив между ними запятую.

Единственная строка выведенная в консоль:

console.log('Simple console message') /**** Output ****/ // Simple console message

В консоль будет выведено несколько переменных:

const str1 = 'Hello' const str2 = 'World' console.log(str1, str2) /**** Output ****/ // Hello World

В консоль будет выведено несколько переменных:

const str1 = 'Hello' const str2 = 'World' const arr = ['Apple', 'Orange', 'Banana'] console.log(str1, str2, arr)

Вы также можете украсить вывод в консоли используя CSS стили. Если вы отлаживаете приложение с большим количеством записей, вам могут пригодиться следующие методы ведения логов:

log, info, error и warn

Чтобы применить свои собственные стили к логам, поставьте перед выводом флаг %c, а во втором параметре укажите строку свойств стилей CSS, как показано в примере ниже:

console.log('%cI am Colorful log.', 'font: 2em sans-serif; color: yellow; background-color: red;' )

Зачем применять CSS стили к логам?

Цвета могут помочь сделать понятнее логи. Чтобы отлаживать приложение с множеством логов, создайте собственный набор методов ведения логов, в котором каждый метод имеет уникальный цвет для каждого компонента или модуля. Затем по цветам вы можете легко определить, откуда берется та или иная запись.

2. console.clear()

Использование логирования при разработке или отладке – обычная практика. Вы заметите, что с каждым обновлением консоль начинает загромождаться записями.

Чтобы этого избежать, вы можете просто добавить console.clear () в начало кода. Теперь при каждом обновлении вы будете получать чистую консоль.

3. console.warn()

Если вы работаете с панелью инструментов разработчика или API, console.warn() действительно полезна для предупреждения пользователей о том, что что-то не так.

Обычно это используется пакетами NPM, чтобы сообщить разработчикам, устарело ли API или о любых будущих изменениях в библиотеке. Некоторые браузеры добавляют в журнал консоли небольшой восклицательный знак ⚠️ для предупреждений.

const printName = name => < if (!name) < console.warn('Name is not provided.') >> printName()

4. console.table()

Он отображает объект, массив или массив объектов в табличном формате, что упрощает просмотр объектов и массивов.

let fruits = ['Apple', 'Orange', 'Banana'] console.table(fruits)

const obj = < name: 'Taran', occupation: 'Software Engineer', email: 'taranpreet@gmail.com' >console.table(obj)

let students = [ < name: 'Sam', subject: 'Math', age: 25 >, < name: 'Adam', subject: 'English', age: 32 >, < name: 'Lisa', subject: 'Science', age: 30 >] console.table(students)

Ограничение выводимых колонок

Используя этот метод, вы также можете ограничить количество столбцов, отображаемых в таблице (в консоли). Это делается путем передачи методу второго аргумента, который представляет собой список столбцов в формате массива.
Давайте еще раз посмотрим на приведенный выше пример (массив объектов), но на этот раз мы будем отображать только имя и возраст.

let students = [ < name: 'Sam', subject: 'Math', age: 25 >, < name: 'Adam', subject: 'English', age: 32 >, < name: 'Lisa', subject: 'Science', age: 30 >] console.table(students, ['name', 'age'])

Обратите внимание: вы можете отсортировать таблицы, кликнув по заголовкам столбцов.

5. console.dir()

console.dir() распознает объект как объект и выводит его свойства, тогда как console.log() выводит объект в его строковом представлении.

Когда нужно напечатать строку, и console.log(), и console.dir() возвращают обычную строку.

const str = 'Hello World' console.log(str) console.dir(str) /**** Output ****/ // Hello World // Hello World

А теперь посмотрим на вывод объектов и массивов:

const obj = < name: 'Sam', age: 25 >console.log('Using log() = ', obj) console.dir(obj) const arr = ['apple', 'mango', 'banana'] console.log('Using log() = ', arr) console.dir(arr)

console.dir() может принимать только один аргумент, тогда как в console.log() мы можем передавать несколько аргументов.

Если в console.dir() передается несколько аргументов, в консоль будет выведен только первый аргумент, а остальные аргументы будут проигнорированы.

Ниже приведен пример console.dir() с несколькими аргументами, переданными методу. В консоль выводится только первый аргумент.

const obj = < name: 'Same', age: 25 >console.log('Using log() = ', obj) console.dir('Using dir() = ', obj)

6. console.group() и console.groupCollapsed()

Если вам нужно вывести слишком много сообщений в консоль, все очень быстро запутается (особенно, если вы не используете метки для значений). Более того, когда вы используете console.log() внутри цикла, в консоль будет записываться множество повторяющихся сообщений.

Для группировки логов для каждого цикла обычно используется console.log() с разделителем. Например – console.log(‘*’). Лучшим способом обработки таких сценариев будет использование console.group().

console.group и console.groupEnd

console.group() позволяет нам группировать операторы консоли. Для завершения группировки или консольных операторов используется метод console.groupEnd().

Необязательно передавать параметр в console.group() . Вы все равно должны сделать это, чтобы уточнить, какие значения группируются вместе. Переданный параметр будет отображаться как метка для группы.

console.groupEnd() не требует никаких параметров, так как всегда закрывает последнюю созданную группу.

console.group('Student Details') console.log('name: ', 'Max') console.log('age: ', 30) console.log('subject: ', 'Science') console.groupEnd()

Обратите внимание: вы также можете использовать группы внутри групп.

console.groupCollapsed и console.groupEnd

Группы, созданные с помощью console.group() , по умолчанию, раскрываются. Если вы хотите, чтобы они были закрыты / свернуты по умолчанию, вы можете вместо этого использовать метод console.groupCollapsed().

console.groupCollapsed ('Student Details') console.log('name: ', 'Max') console.log('age: ', 30) console.log('subject: ', 'Science') console.groupEnd()

Обратите внимание: вы также можете использовать группы внутри групп.

7. console.count() и console.countReset()

console.count()

Этот метод устанавливает счетчик на значение, указанное в качестве аргумента. Каждый раз, когда этот метод вызывается, счетчик увеличивается.

const str = 'Hello World' console.count(str) console.count('Hello World') console.count(str) /**** Output ****/ // Hello World: 1 // Hello World: 2 // Hello World: 3

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

console.count('15.5') console.count(15.5) console.count(Number('15.5')) /**** Output ****/ // 15.5: 1 // 15.5: 2 // 15.5: 3

Если при последовательном вводе метода count в консоль отладки аргумент не указан, в качестве параметра принимается пустая строка.

console.countReset()

Этот метод сбрасывает счетчик для конкретной метки, переданной в качестве аргумента. Аргумент является необязательным, и если аргумент не передан, он сбрасывает счетчик «по умолчанию».

Давайте сначала посмотрим на сброс счетчика по умолчанию в приведенном ниже примере:

console.count() // default: 1 console.count() // default: 2 console.count('Hello') // Hello: 1 console.count('World') // World: 1 /* Reset the counter for default */ console.countReset() console.count() // default: 1 console.count('Hello') // Hello: 2 console.count('World') // World: 2

Теперь посмотрим на пример сброса счетчика в обход метки:

console.count('Hello') // Hello: 1 console.count('World') // World: 1 console.count('Hello') // Hello: 2 console.count('World') // World: 2 /* Reset the counter for World */ console.countReset('World') console.count('Hello') // Hello: 3 console.count('World') // World: 1

8. console.assert()

Этот метод принимает несколько аргументов. Первый аргумент – это логическое значение, и если первый аргумент имеет значение false, он записывает сообщение об ошибке в консоль, добавляя остальные параметры.

Ниже приведен пример использования. Он выдаст сообщение об ошибке Assertion failed, если первый параметр имеет значение false.

const errorMsg = ' is not even' for (let number = 1; number <= 5; number++) < console.log(number) console.assert(number % 2 === 0, ); >

9. console.error()

Этот метод выводит в консоль сообщение об ошибке.

console.error('Ajax request failed')

10. console.time() and console.timeEnd()

Этот метод используется для измерения времени выполнения задачи. Вызов console.time() запускает таймер, а когда вызывается console.timeEnd() , вычисляется время в миллисекундах между ними и отображается в консоли.

Метод принимает аргумент для обозначения таймера (этот аргумент является необязательным). Если метка передается в console.time() , она также потребуется в методе timeEnd() для остановки таймера. Если метка не передана, используется метка по умолчанию.

console.time('clickEvent') alert('Click Ok') console.timeEnd('clickEvent') /**** Output ****/ // clickEvent: 1280.80078125 ms

11. console.trace

Этот метод регистрирует стек вызовов, существующий в момент вызова console.trace(). Помогает найти ошибку в функции, которая вызывается из разных мест кода.

Это работает путем помещения console.trace() в код в точке, откуда мы хотим отследить. Он принимает аргумент, который отображается как метка для конкретной трассировки стека.

function getSum() < addNumbers() >function addNumbers() < console.trace() >getSum()

Выводим элемент в консоль

Мы сказали JavaScript найти на странице элемент с классом page , но как узнать, что он его действительно нашёл? И что элемент — тот самый? Для этого нам понадобится консоль.

Консоль — это инструмент разработчика, который помогает тестировать код. Если во время выполнения скрипта возникнет ошибка, в консоли появится сообщение о ней. А ещё в консоль можно выводить текстовые подсказки. В нашем интерфейсе консоль находится справа от редактора кода, между мини-браузером и списком задач. Чтобы увидеть сообщения в консоли, её нужно развернуть, щёлкнув по значку справа.

Задачи Выполнено 0 из 3

Чтобы вывести сообщение в консоль, нужно использовать console.log :

console.log('Привет от JavaScript!');

В результате этой инструкции в консоли появится сообщение Привет от JavaScript!

В консоль можно выводить не только текст, но и результаты выполнения инструкций. Например, найденный с помощью querySelector элемент:

console.log(document.querySelector('.page'));

Инструкция получилась длинной и сложной, но вскоре мы разберём, как её упростить. А пока займёмся тестированием кода. Так называется этап создания программы, когда мы проверяем, что всё работает, как надо. И это не менее важно, чем написание кода.

Давайте убедимся, что JavaScript нашёл нужный элемент, а заодно потренируемся работать с консолью.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим
• script.js Сплит-режим

На главную Изменить тему