Что такое console log

Уроки JavaScript – ознакомление с функцией console.log()

Когда вы пишете приложение на JavaScript, очень полезно использовать отладчик (или дебаггер, от англ. debugger), т.е., программу, которая предназначена для поиска ошибок в других программах. Все браузеры поставляются с подобной программой, которая выполняет функции отладчика, — речь идет о Консоли (Console). Здесь вы найдете все ошибки, которые возникают при взаимодействии браузера с сайтом. Например, здесь вы можете увидеть недоступные ресурсы сайта (которые возвращают 404 ошибку), ошибки в JavaScript коде и массу других полезных данных.

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

Вызов инструментов разработчика (и консоли) в разных браузерах осуществляется так:

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

Чуть ниже вы сразу увидите результат данной арифметической операции:

Если вам понравилось, можете поиграться дальше, с использованием других арифметических операций :).

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

Теперь, если вы, например, напишете переменную areaOfBox в Консоли, вы сразу увидите результат выполнения данного кода:

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

Объект console в JavaScript дает вам доступ к Консоли браузера. Это позволяет вам выводить строки, массивы и объекты, которые помогают отлаживать код. Данная функция является частью объекта window и предоставляется объектной моделью браузера (BOM).

Самый простой пример – вывод сообщения (строки):

Пример работы с массивом в Консоли:

Пример работы с объектом в Консоли:

Пример работы с функцией в Консоли:

Пример отслеживания события click в Консоли:

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

Источник

Консольные команды JavaScript в Visual Studio

Для отправки сообщений и выполнения других задач в окне консоли JavaScript системы Visual Studio можно использовать команды. Примеры использования этого окна см. в кратком руководстве по отладке JavaScript. Информация в этом разделе относится к приложениям Node.js, приложения UWP и приложениям, созданным с помощью инструментов Visual Studio для Apache Cordova.

Если окно консоли JavaScript закрыто, его можно открыть при отладке в Visual Studio, выбрав Отладка > Windows > Консоль JavaScript.

Сведения об использовании консоли в средствах разработчика Microsoft Edge см. в этой статье.

команды объекта console

Более ранние версии Visual Studio не поддерживают полный набор команд. Для быстрого получения информации о поддерживаемых командах используйте IntelliSense для объекта консоли.

Существующая запись в окне консоли определяется параметром title (при его наличии) и обновляется командой count. Новая запись не создается.console.count();

console.count(«inner loop»);debug(message)Отправляет message в окно консоли.

Эта команда идентична команде console.log.

Объекты, передаваемые с помощью данной команды, преобразуются в строковый параметр.console.debug(«logging message»);dir(object)Отправляет указанный объект в окно консоли и отображает его в визуализаторе объекта. Визуализатор можно использовать для изучения свойств в окне консоли.console.dir(obj);dirxml(object)Отправляет заданный параметром object объект узла XML в окно консоли и отображает его в виде дерева узла XML.console.dirxaml(xmlNode);error(message)Отправляет message в окно консоли. Текст сообщения красный и ему предшествует символ ошибки.

Объекты, передаваемые с помощью данной команды, преобразуются в строковый параметр.console.error(«error message»);group(title)Запускает группирование сообщений, отправляемых в окно консоли, и посылает необязательный заголовок title в качестве метки группы. Группы могут быть вложенными и отображаются в окне консоли в представлении в виде дерева.

Дополнительные примеры см. в разделе Formatting console.log output далее в этой статье.log(message)Отправляет message в окно консоли.

Объекты, передаваемые с помощью данной команды, преобразуются в строковый параметр.console.warn(«warning message»);

Разные команды

Эти команды также доступны в окне консоли JavaScript (но недоступны в коде).

cd(window)Позволяет изменить контекст для оценки выражений с назначенного по умолчанию окна верхнего уровня страницы на окно заданного фрейма. Вызов cd() без параметров возвращает контекст в окно верхнего уровня.cd();

cd(myframe);select(element)Выбирает указанный элемент в проводнике DOM.select(document.getElementById(«element»));

select($1);dir(object)Возвращает визуализатор для заданного объекта. Визуализатор можно использовать для изучения свойств в окне консоли.dir(obj);

Проверка наличия консольной команды

Просмотр объектов в окне консоли JavaScript

Форматирование вывода команды console.log

console.log также поддерживает шаблоны подстановки «printf» для форматирования вывода. При использовании шаблонов подстановки в первом аргументе, дополнительные аргументы будут использоваться для замены указанных шаблонов в том порядке, в котором они используются.

Поддерживаются следующие шаблоны подстановки:

%s — строка, %i — целое число, %d — целое число, %f — число с плавающей запятой, %o — объект, %b — двоичные данные, %x — шестнадцатеричные данные, %e — экспонента

Источник

Использование JavaScript-консоли в браузерах

Команда console.log() и имена переменных

Простейший вариант использования console.log() заключается, например, в выводе некоей строки или объекта. Например, выведем в консоль строку:

Теперь представим себе, что в консоль нужно вывести несколько объектов. Например — таких:

Взглянем на то, что выводится в консоль.

В консоли нет имён переменных

Команда console.table()

Команда console.table() в действии

Команда console.group()

Эту команду можно использовать в том случае, если нужно сгруппировать некие связанные данные и создать структуры из вложенных групп, которые повышают удобство работы с такими данными.
Кроме того, этот подход можно использовать в тех случаях, когда в некоей функции выполняется несколько команд вывода чего-либо в консоль, и нужно, чтобы можно было бы чётко, с одного взгляда, отделить результаты выполнения таких команд от других.

Предположим, мы выводим в консоль сведения о неких пользователях:

Вот как выглядят результаты работы этого кода.

Группировка результатов работы команд вывода данных в консоль

Команды console.warn() и console.error()

Предупреждения и ошибки

Стилизация данных, выводимых в консоль

Команда console.trace()

Команда console.time()

Одна из важных задач, встающая перед фронтенд-разработчиком, заключается в том, чтобы обеспечить высокую скорость работы кода. Команда console.time() позволяет замерять время выполнения операций и выводить то, что удалось выяснить, в консоль. Например, исследуем с помощью этой команды пару циклов:

Взглянем на то, что попало в консоль после выполнения этого кода.

Результаты использования console.time()

Итоги

В этом материале мы рассмотрели некоторые полезные мелочи, касающиеся вывода данных в консоли браузеров. Если раньше вы об этих возможностях не знали — надеемся, теперь у вас появились новые полезные JavaScript-инструменты.

Уважаемые читатели! Если вы занимаетесь разработкой больших JavaScript-проектов — просим вас рассказать о том, какими средствами вы решаете в них проблемы логирования.

Источник

Используем console на полную

Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert’ом. Что-ж, давайте исправим это положение.

Небольшое примечание: использование отладочного кода может негативно сказаться на производительности. Удаляйте его из продакшн версии.

Больше, чем просто сообщения

Перед тем, как погрузиться в малоизвестные методы console, рассмотрим функционал console.log подробнее. Например, возможность передачи любого числа аргументов:

В результате все переданные аргументы будут выведены и разделены пробелом. Это, конечно, хорошо, но было бы еще лучше, если бы мы могли как-нибудь вывести все эти аргументы в виде красиво отформатированного сообщения. Хотя, постойте… мы можем!

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

Что за %s?

Отличный вопрос! Это управляющие последовательности, которые заменяются на соответствующие им значения (в порядке очередности). %s означает «трактовать значение как строку», %d — как число (Также можно использовать %i или %f).

Каждое вхождение такой последовательности будет заменено на следующий по порядку аргумент. Первое вхождение — на первый (за первым аргументом-строкой, конечно), ну и так далее.

Эта команда как бы говорит «Я начну со второго аргумента и продолжу, начиная со следующего». Как Вы видите, последовательности, которым не хватило аргументов, остались нетронутыми.

Первый аргумент (строка формата) также участвует в нумерации (она идет с нуля) аргументов. Таким образом, в нашем примере последний аргумент будет иметь номер 5. Но мы задали всего 5 аргументов и, при этом, начали со второго. Поэтому, последней управляющей последовательности аргументов не досталось, и она не изменилась.

Чтобы это исправить, можно изменить формат строки таким образом, чтобы «указатель» не следующий элемент синхронизировался со списком аргументов в определенный момент. Тогда все будет работать как положено.

Для того, чтобы аргументы были выведены правильно, нам нужно изменить порядок вывода второго и третьего элементов. Другие элементы и так в правильном положении, так что нет необходимости указывать их позиции. Аргументы будут использованы в следующем порядке: 2, 1, 3, 4, 5.

Форматирование строк — мощный инструмент, и я охватил только вершину айсберга. Попробуйте поиграться самостоятельно и почитать, что пишет Joe Hewitts о консоли.

Различные типы сообщения

Есть еще пара методов, подобных log, но отличающихся внешне. А именно: console.info(), console.warn() и console.error().
console.info(), console.warn() и console.error() в Firebug’е.

Все три метода умеют выводить строки в соответствие с форматом и принимать любое количество аргументов.

Логи DOM’а

Когда Вам нужно как-то указать в логах на DOM узел лучшего всего использовать методы console.dir() или console.dirxml(), которые могут перечислить свойства элемента или вывести HTML кода элемента.
Знакомьтесь: console.dir() и console.dirxml() в Chrome.

Группировка

Иногда бывает полезно сгруппировать логи для упрощения работы с ними. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().
Группировка в консоли Safari.

Как Вы можете видеть, подряд идущие вызовы group создают вложенные папки. Чтобы закрывать папку, используйте метод console.groupEnd(). Метод console.groupCollapsed() аналогичен console.group() за тем лишь исключением, что группа со всем содержимым будет изначально свернута.

Профилирование и замеры

Также консоль позволяет точно замерять время, используя метод console.time() и console.timeEnd(). Расположите вызов первого из них перед кодом, время исполнения которого хотите замерить, а второго — после.
Пример работы console.time() и console.timeEnd() в Firefox

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

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

Assert’ы

Когда Вы работаете над сложным проектом, важно покрывать код юнит тестами. Это позволит избежать глупых ошибок и возможных регрессий. К счастью, консоль включает в себя assert’ы.

Assert’ы позволяют обеспечивать соблюдение правил в коде и быть уверенным, что результаты выполнения этого кода соответствуют ожиданиям. Метод console.assert() позволяет проводить элементарное тестирование кода: если что-то пойдет не так, будет выброшено исключение. Первым аргументом может быть все, что угодно: функция, проверка на равенство или проверка существования объекта.
Assert в Chrome

Метод assert принимает условие, которое является обязательным к выполнению (в данном случае простая строгая проверка на равенство) и, вторым аргументом, сообщение, которое будет выведено в консоль вместе с выброшенным исключением, если первое условие не будет выполнено.

Поддержка браузерами

Большинство перечисленных методов поддерживаются достаточно хорошо. IE8+, Firefox с расширением firebug, Opera или webkit-браузер вроде Safari или Chrome. Есть, правда, некоторые различия: Firefox, Safari и Chrome отличаются более широкой поддержкой. Проще всего проверить совместимость можно выполнив console.dir(console), результатом которого будет вывод объекта console со всеми его методами.

Opera с Dragonfly поддерживает большинство методов, за исключением форматирования строк и профилирования (хотя методы profile, profileEnd и реализованы, это всего лишь заглушки).

IE8 также поддерживает много вкусностей, включая форматирование строк и assert’ы, но не замеры времени, профилирование, методы dir или dirxml.

Стоит отметить, что firebug lite может добавить некоторые методы к console в браузерах, их не поддерживающих.

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

Extra

Итак, это был очень вольный перевод статьи, но теперь я бы хотел добавить немного от себя:
Node.JS (ветка 0.2) поддерживает методы log, info, warn, error, dir, time / timeEnd, assert и trace.
log не умеет изменять порядок аргументов для подстановок, но сами подстановки реализованы. При вызове метода trace в консоль будет выведен стек вызовов (все методы ничего не возвращают, а просто пишут в консоль). Работает это также как минимум в Chrome и Opera.

В Opera и Chrome, помимо уже перечисленных, реализованы следующие методы:
count — выводит, сколько раз уже выполнялась строка, на которой расположен вызов метода. Аргументом передается строка, которая будет выведена перед количеством вызовов.
debug — ничем не отличается от log.

Также в Chrome у объекта console есть свойство memory, являющееся объектом со свойствами totalJSHeapSize и usedJSHeapSize. Однако, в Chromium’е мне так и не удалось застать эти свойства со значениями, отличными от нуля.

Источник

Console

Объект Console служит для доступа к средствам отладки браузера (например, Web Console (Веб-консоль) в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.

Ниже описаны методы, доступные в объекте Console и приведены несколько примеров их использования.

Примечание: Эта возможность доступна в Web Workers

Методы

Использование

Вывод текста в консоль

Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.

Вывод одного объекта

Простейший способ для вывода одного объекта:

Вывод нескольких объектов

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

Преобразование строк с использованием масок

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:

Каждая из масок выбирает следующий аргумент из списка параметров. Пример:

Стилизация вывода консоли

Note: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.

Using groups in the console

Timers

этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно alert :

Заметьте, что имя таймера отображено и при старте таймера и при его остановке.

Источник