Console log javascript что это

Журнал сообщений в средстве консоли

С тех пор, как браузеры начали предлагать средства разработчика, консоль является фаворитом, так как в большинстве курсов по программированию вы учитесь выводить какие-либо print команды или log команды, чтобы получить аналитические сведения о том, что происходит в коде.

До DevTools для JavaScript вы ограничивались инструкцией alert() или document.write() для отладки в браузере. В средствах разработки для регистрации сведений Console в консоли многие методы объекта доступны в консоли, перечисленных в разделе Справочник по API объектов консоли.

Уровни сообщений журнала консоли: console.log, .info, .error и .warn

Объект console имеет методы для ведения журнала сообщений различных уровней:

• console.log — выводит текст в консоль в виде сообщения журнала.
• console.info — выводит текст в консоль в виде информационного сообщения.
• console.error — выводит текст в консоль в виде сообщения об ошибке.
• console.warn — выводит текст в консоль в виде предупреждения.

Пример кода для уровней сообщений журнала консоли

// prints the text to the console as a log message console.log('This is a log message') // prints the text to the console as an informational message console.info('This is some information') // prints the text to the console as an error message console.error('This is an error') // prints the text to the console as a warning console.warn('This is a warning') 

Демонстрация веб-страницы для уровней сообщений журнала консоли

Чтобы попробовать использовать функции ведения журнала в консоли, выполните следующие действия:

1. Откройте демонстрационную веб-страницу Примеры сообщений консоли: журнал, сведения, ошибка и предупреждение в новом окне или вкладке.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Откроется devTools с открытой консолью на панели действий. Демонстрационная страница уже отправила приведенные выше сообщения журнала в консоль: Методы log() и info() , кажется, делают то же самое. Используйте info() и log() для различных задач журнала, так как это позволяет фильтровать сообщения консоли для отображения только подмножества записей журнала. Методы error() и warn() отображают значок рядом с сообщением и способ проверки трассировки стека сообщения.
3. Скопируйте и вставьте все примеры в консоль, а затем нажмите клавишу ВВОД. Выходные данные отображаются в консоли под введенным кодом.

Ведение журнала различных типов значений

Вместо ведения журнала текстовых значений можно отправлять в консоль любые допустимые ссылки на JavaScript или DOM. Консоль соответствующим образом отображает различные типы значений JavaScript, которые отправляются ей из сообщений журнала консоли. В консоли отображается отфильтрованное и отформатированное представление результатов.

Пример кода для ведения журнала различных типов значений

let x = 2; // logs the value of x console.log(x); // logs the name x and value of x console.log() // logs a DOM reference console.log(document.querySelector('body')); // logs an Object console.log(); let w3techs = ['HTML', 'CSS', 'SVG', 'MathML']; // logs an Array console.log(w3techs); 

Демонстрация веб-страницы для ведения журнала различных типов значений

Чтобы использовать функцию log для отображения различных типов переменных, выполните следующие действия:

1. Откройте демонстрационную веб-страницу Примеры сообщений консоли: Ведение журнала различных типов в новом окне или вкладке.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Откроется devTools с открытой консолью на панели действий, отображающей несколько типов значений. Каждый тип результата отображается по-разному.
3. Разверните каждую выходную запись, чтобы проанализировать каждый результат более подробно. Второе сообщение журнала в примере кода использует фигурные скобки <> вокруг x переменной, чтобы вывести имя переменной в дополнение к значению переменной. Этот синтаксис регистрирует объект, содержащий одно свойство с именем x , а не регистрирует только значение x . Ведение журнала переменных разных типов в консоли: Ведение журнала переменных разных типов в консоли с расширенными дополнительными сведениями:
4. Скопируйте и вставьте все примеры с отрисовываемой веб-страницы в консоль, например console.log() , и нажмите клавишу ВВОД. Форматированные выходные данные отображаются в консоли под введенным кодом.

Ведение журнала значений с помощью описателей формата

Особенностью всех методов журнала является использование описателей формата в сообщении инструкции журнала. Описатели формата являются частью сообщения журнала и начинаются со знака процента ( % ).

Описатели формата используются для регистрации определенных значений в разных форматах и преобразования между форматами:

• %s logs выходные данные в виде строк.
• %i или %d регистрирует выходные данные в виде целых чисел.
• %f logs выходные данные в виде значения с плавающей запятой.
• %o logs выводит выходные данные в виде расширяемого элемента DOM.
• %O журналирует выходные данные как расширяемый объект JavaScript.
• %c позволяет создать стиль сообщения с помощью свойств CSS.

Пример кода для ведения журнала значений с помощью описателей формата

// logs "10x console developer" console.log('%ix %s developer', 10, 'console'); // logs PI => 3.141592653589793 console.log(Math.PI); // logs PI as an integer = 3 console.log('%i', Math.PI); // logs the document body as a DOM node console.log('%o', document.body); // logs the body of the document as a JavaScript object with all properties console.log('%O', document.body); // shows the message as red and big console.log('%cImportant message follows','color:red;font-size:40px') 

Демонстрация веб-страницы для ведения журнала значений с помощью описателей формата

1. Откройте демонстрационную страницу Примеры сообщений консоли: Ведение журнала с описателями в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Откроется devTools с открытой консолью на панели действий. Веб-страница уже заполнила консоль выходными данными. В первом примере показано, что порядок замены описателей формата — это порядок параметров, следующий за строкой:

console.log('%ix %s developer', 10, 'console'); // logs "10x console developer" 

Щелкните треугольники расширителя в выходных результатах, чтобы развернуть выходные данные с помощью приведенных выше log инструкций, которые находятся на веб-странице.

При необходимости нажмите клавишу F5 , чтобы перезагрузить страницу и повторно заполнить выходные данные консоли . Описатели формата используются для ведения журнала, форматирования и преобразования значений:

В консоли в двух body записях щелкните треугольники, чтобы развернуть результаты журнала, чтобы увидеть разницу %o между описателями формата и %O . Элемент body веб-страницы отображается как расширяемый узел DOM ( console.log(‘%o’, document.body); ) или как полный список всех свойств JavaScript в элементе body ( console.log(‘%O’, document.body); ):

Группирование сообщений журнала

Если вы регистрируете в журнале много сведений, можно использовать group методы и groupCollapsed для отображения сообщений журнала в виде расширяемых и сворачиваемых групп в консоли. Группы могут быть вложенными и именоваными, чтобы упростить понимание данных.

Пример кода для группирования сообщений журнала

// Example 1: Nested groups, with the inner group hidden (collapsed): console.group("Passengers: Heart of Gold"); console.log('Zaphod'); console.log('Trillian'); console.log('Ford'); console.log('Arthur'); console.log('Marvin'); console.groupCollapsed("Hidden"); console.log('(Frankie & Benjy)'); console.groupEnd("Hidden"); console.groupEnd("Passengers: Heart of Gold"); // Example 2: let technologies = < "Standards": ["HTML", "CSS", "SVG", "ECMAScript"], "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"] >for (tech in technologies) < console.groupCollapsed(tech); technologies[tech].forEach(t =>console.log(t)); console.groupEnd(tech); > 

Демонстрация веб-страницы для группирования сообщений журнала

1. Откройте демонстрационную страницу Примеры сообщений консоли: Группирование журналов на новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Откроется devTools с открытой консолью на панели действий. Веб-страница уже заполнила консоль выходными данными, записав много значений в виде групп:
3. В выходных данных консоли разверните или сверните разделы:

Отображение данных в виде таблиц

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

Пример кода для отображения сложных данных в виде таблиц

let technologies = < "Standards": ["HTML", "CSS", "SVG", "ECMAScript"], "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"] >// log technologies as an object console.log(technologies); // show technologies as a table console.table(technologies); // get the dimensions of the document body let bodyDimensions = document.body.getBoundingClientRect(); // show dimensions as an object console.log(bodyDimensions); // show dimensions as a table console.table(bodyDimensions); 

Этот код на демонстрационной веб-странице создает первые четыре console выходных данных с четырьмя номерами строк в правой части консоли.

Демонстрация веб-страницы для отображения сложных данных в виде таблиц

Чтобы отобразить сложные данные в виде таблиц, выполните приведенные ниже действия.

1. Откройте демонстрационную страницу Примеры сообщений консоли: Использование таблицы в новом окне или вкладке.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Откроется devTools с открытой консолью на панели действий. Веб-страница уже заполнила консоль выходными данными.
3. В консоли щелкните треугольники расширителя. Данные выводятся с помощью console.table , что упрощает чтение данных:

Выходные данные console.table имеют табличный формат. Если скопировать и вставить таблицу из консоли в приложение, поддерживающее табличные данные, например Microsoft Excel или Microsoft Word, структура выходных данных в виде строк и столбцов сохраняется.

Указание массива свойств для отображения в виде столбцов

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

Оставшийся код на демонстрационной веб-странице показывает:

1. Как вывести все свойства в виде столбцов для выбранных элементов.
2. Указание массива только указанных свойств в качестве столбцов для выбранных элементов.

// get all the h1, p and script elements let contentElements = document.querySelectorAll(':is(h1,p,script)'); // show the elements as an unfiltered table console.table(contentElements) // show only relevant columns console.table(contentElements, ['nodeName', 'innerText', 'offsetHeight']) 

Этот код создает два console последних выходных данных с двумя номерами строк, отображаемыми в правой части консоли:

• logging-with-table.html:37
• logging-with-table.html:39

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

Операторы журнала и отладка точек останова и динамические выражения

Может возникнуть соблазн использовать методы в log качестве main означает отладку веб-страниц, так как методы журнала просты в использовании. Однако учитывайте результат любого console.log() запроса: выпущенные продукты не должны использовать какие-либо log инструкции, которые использовались для отладки, так как они могут раскрывать внутренние сведения для людей. И в консоли создается лишний шум.

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

См. также

Что такое Console.log()?

Console.log() используется для вывода сообщений на консоль веб-браузеров. Обычно он используется при проверке того, работает ли функция на стороне Javascript.

console.log();

Когда операция выполняется в условных структурах, таких как if else, switch case или for в кодах Javascript на страницах, можно проверить, работает ли функция, напечатав сообщение в консоль браузера с помощью console.log().

Например, когда приведенный ниже код запускается в веб-браузере, он выводит сообщение OK на консоль браузера.

Button  

Console log javascript что это

Незаменимым инструментом при работе с 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.

Console.log()

Список объектов JavaScript для вывода. Объекты выводятся в том порядке, в котором они были указаны при вызове метода. Пожалуйста, обратите внимание, что если вы логируете объекты в последних версиях Chrome и Firefox, в консоль залогируется не значение объекта, а ссылка на него. Это означает, что, возможно, в консоль будет выведено не значение объекта на момент вызова console.log() , а будет выведено значение объекта на момент открытия консоли.

Строка JavaScript, содержащая 0 и более подстановочных символов для замены (см. subst1 . substN ).

JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в msg . Это даст вам дополнительный контроль над форматом вывода.

Больше подробностей смотрите в разделе Вывод текста в консоль (en-US) документации console .

Спецификация

Specification
Console Standard # log

Совместимость с браузерами

BCD tables only load in the browser

Отличия от console.dir()

Вы можете спросить какая разница между console.dir() и console.log(). Это полезное отличие.

• console.log выводит элемент как HTML-дерево
• console.dir выводит элемент как JSON-объект

А именно, console.log даёт специальное обращение к DOM-элементам, тогда как console.dir — нет. Это особенно полезно, когда нужно видеть полное представление DOM JS-объектов.

Больше информации об этой и других функциях в Chrome Console API reference.

Логирование объектов

Не используйте console.log(obj); , Используйте console.log(JSON.parse(JSON.stringify(obj))); .

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

Смотрите также

• Opera Dragonfly documentation: Console
• MSDN: Using the F12 Tools Console to View Errors and Status
• Firebug wiki: Console API — Firebug поддерживает дополнительные возможности реализации console.log(), такие как styled logging.
• NodeJS: Console API

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 16 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.