Как выглядит сообщение в консоли

Обновлено: 08.07.2024

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

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

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

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

Что за %s?

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

Порядок использования аргументов можно изменить вручную, использовав символ $ и приписав перед ним номер аргумента, который мы хотим вывести:

Первый аргумент (строка формата) также участвует в нумерации (она идет с нуля) аргументов. Таким образом, в нашем примере последний аргумент будет иметь номер 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

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

Assert'ы

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

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

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

Большинство перечисленных методов поддерживаются достаточно хорошо. 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'е мне так и не удалось застать эти свойства со значениями, отличными от нуля.

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

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

Как открыть консоль на разных браузерах

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.

Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.

Какие вкладки есть в консоли и за что они отвечают

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

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

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

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

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.

Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.

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

Sources

Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.

Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.

Network

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

Performance

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

Memory

В этой вкладке можно отслеживать использование памяти веб-приложением или страницей. Мы можем узнать, где тратится много ресурсов – эту информацию в последующем можно использовать для оптимизации кода.

Application

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Security

Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:

проверке сертификата – подтвердил ли сайт свою подлинность TLS;
tls-соединении – использует ли сайт современные безопасные протоколы;
безопасности второстепенных источников.

Lighthouse

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

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
(unknown):Scripterror. Обозначает ошибку скрипта.
TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!

Как открыть Веб Консоль

По умолчанию консоль очищается каждый раз когда вы открываете новую страницу или перезагружает текущую. Чтобы переопределить это поведение, активируйте опцию "Enable persistent logs" в Настройках (en-US).

Прокрутка вниз показывает заголовки ответа . По умолчанию веб-консоль не записывает в журнал запрос и ответ тела : чтобы сделать это , войдите в контекстное меню веб-консоли и выберите " Log Request and Response Bodies ", перезагрузите страницу , а затем вы увидите их в окне " Inspect Network Request " .

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

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

JavaScript ошибки выглядят вот так:

Отправка-события

Веб-консоль также регистрирует события переформатированные в CSS категорию . Переформатирование это название операции, которой браузер вычисляет расположение части или всей страницы . Переформатирования происходят, когда изменение произошли на странице, чтобы браузер считал, что влияет на расположение . . Многие события могут вызвать переформатирование , в том числе : изменение размера окна браузера , активируя как псевдоклассы :hover, или манипулирование DOM в JavaScript.

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

Если переформатирование является синхронным переформатированием , вызванным JavaScript , будет также показана ссылка на строку кода , инициировавшего переформатирование :

Нажмите на ссылку , чтобы открыть файл в Debugger.

Синхронные и асинхронные переформатирования

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

Тем не менее , если какой-то JavaScript-код читает что стиль был изменён , то браузер должен выполнить синхронное переформатирование в порядке вычисленным расчётом стиля чтобы вернуться . Например , код как этот хочет вызвать немедленное , синхронное , переформатирование , когда вызовет window.getComputedStyle(thing).height :

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

Предупреждения безопасности и ошибки

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

Новое в Firefox 36

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

Сайт использует сертификат чья подпись использует алгоритм хеширования SHA-1 .

SHA- 1 по-прежнему до сих пор широко используется в сертификатах , но он начинает показывать свой возраст . Веб-сайтам и центрам сертификации рекомендуется перейти на более сильные хэш-алгоритмы в будущем . Смотрите Weak Signature Algorithm (en-US) статью рассказывающую подробнее.

Обратите внимание , что сертификат SHA- 1 не может быть собственным сертификат ом вашего сайта , но может свидетельствовать о принадлежности к сертификации, которая использовалась для подписи сертификата вашего сайта .

This section describes the Web Console output for those console API calls that actually result in output. For more general documentation on the console API, please refer to its documentation page.

From Firefox 40 onwards, the Web Console can display console messages from Shared Workers, Service Workers (en-US), and Chrome Workers. Check the relevant options in the Filtering dropdown menu to see them.

The argument to error() .

The console will display a full stack trace for errors:

If the assertion succeeds, nothing. If the assertion fails, the argument:

The console will display a full stack trace for assertions:

The argument to warn() .

The argument to info() .

The label supplied, if any, and the number of times this occurrence of count() has been called with the given label:

Listing of the object's properties:

The argument to log() .

Если аргумент — это узел DOM, консоль выдаст его в виде инспектируемого rich text:

Display tabular data as a table.

Notification that the specified timer started.

Duration for the specified timer.

Вы можете использовать console.group() для создания indented groups в выводе консоли. Смотрите Использование групп в консоли для более детальной информации.

Фильтрация и поиск

Фильтрация по типу

Фильтрация по тексту

Очистка содержимого

Интерпретатор командной строки

Вы можете выполнять JavaScript-код в реальном времени, используя командную строку в Web-консоли.

Ввод выражений

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

Получение переменных

Вы можете получить доступ к переменным на странице; это могут быть как внутренние переменные например в объекте window , так и переменные, добавленные с помощью Javascript кода - например с помощью jQuery :

Автоподстановка

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

Нажмите Enter или Tab , чтобы принять нужную подсказку, перемещайтесь вверх/вниз с помощью стрелок к другим вариантам подсказок или просто продолжайте набирать текст, если вам не подходит ни один из вариантов.

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

Вы можете получать такие же подсказки для элементов массива:

Объявление переменных

Вы можете объявить ваши собственные переменные, и в последующем обращаться к ним:

История команд

Командная строка запоминает введённые ранее команды: чтобы перемещаться вперёд и назад по истории, используйте стрелки вниз и вверх на клавиатуре.

Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте clearHistory() helper function.

Работа с iframes

Если страница содержит встроенные iframes (en-US), вы можете использовать команду cd() чтобы изменить область видимости в консоли на область определённого iframe, и после этого вы сможете выполнять функции, которые содержит объект document в этом iframe. Существует три способа выбрать iframe используя cd() :

Вы можете передать DOM-элемент для определённого iframe :

Вы можете передать CSS селектор для определённого iframe:

Вы можете передать глобальный объект Window для определённого iframe:

Для переключения контекста видимости обратно к окну верхнего уровня, введите cd() без аргументов:

Предположим у нас есть документ, который содержит iframe:

В этом iframe определена новая функция:

Вы можете переключиться на контекст iframe например так:

Сейчас вы сможете видеть, что глобальный объект Window это теперь наш iframe:

и сможете выполнить вызов функции, определённой в этом iframe:

Helper commands

Rich output for objects

When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:

Type-specific rich output

The Web Console provides rich output for many object types, including the following:

Новое в Firefox 36

Examining object properties

When an object is logged to the console it appears in italics. Click on it, and you'll see a new panel appear containing details of the object:

To dismiss this panel press Esc ..

Выделение и инспектирование узлов DOM

If you hover the mouse over any DOM element in the console output, it's highlighted in the page:

In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the Inspector with that node selected.

The split console

You can use the console alongside other tools. While you're in another tool in the Toolbox, just press Esc or press the "Toggle split console" button in the Toolbar (en-US). The toolbox will now appear split, with the original tool above and the web console underneath.

As usual, $0 works as a shorthand for the element currently selected in the Inspector:

When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:

Клавиши быстрого вызова

Интерпретатор командной строки

Эти клавиатурные сокращения работают, пока вы находитесь в Интерпретаторе командной строки.

Команда	Windows	OS X	Linux
Прокрутить в начало вывода в консоль (новое в Firefox 34, и только при пустой командной строке)	Home	Home	Home
Прикрутить в конец вывода в консоль (новое в Firefox 34, и только при пустой командной строке)	End	End	End
Прокрутить вверх вывод консоли	Page up	Page up	Page up
Прокрутить вниз вывод консоли	Page down	Page down	Page down
Переместиться назад по истории команд	Up arrow	Up arrow	Up arrow
Переместиться вперёд по истории команд	Down arrow	Down arrow	Down arrow
Перейти в начало строки	Home	Ctrl + A	Ctrl + A
Перейти в конец строки	End	Ctrl + E	Ctrl + E
Выполнить текущее выражение	Enter	Enter	Enter
Добавить новую строку, чтобы войти в режим ввода многострочного выражения	Shift + Enter	Shift + Enter	Shift + Enter

Всплывающее окно автодополнения

Эти клавиатурные сокращения работают, когда открыто всплывающее окно автодополнения:

Команда	Windows	OS X	Linux
Выбрать текущее предложение в окне автодополнения	Tab	Tab	Tab
Закрыть окно автодополнения	Esc	Esc	Esc
Перейти к предыдущему предложению в окне автодополнения	вверх	вверх	вверх
Перейти к следующему предложению в окне автодополнения	вниз	вниз	вниз
Прокрутить вверх предложения в окне автодополнения	Page up	Page up	Page up
Прокрутить вниз предложения в окне автодополнения	Page down	Page down	Page down
Прокрутить в начало списка (новое в Firefox 34)	Home	Home	Home
Прокрутить в конец списка (новое в Firefox 34)	End	End	End

Global shortcuts

Эти сокращения работают для всех инструментов, находящихся в окне набора инструментов.

Консоль браузера - это инструмент значительно облегчающий работу, отладку и поиск ошибок в языке JavaScript. В самом же JS специально для работы с консолью есть объект console.

Любой новичок изучающий JavaScript знает метод console.log() . А знаете ли Вы, что для консоли в JavaScript есть целая группа методов для объекта console, а не только метод console.log?

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

Методы Console

Самый простой и самый распространённый способ для вывода чего-либо в консоль в JS - это вызов метода

В методы для консоли можно передавать неограниченное число аргументов, разделённых запятыми:

Так же в console.log можно использовать маркер строковой интерполяции %s , их ещё называют подстановочные символы (маски).

console.dir() - вывод элемента в консоль в виде объекта

console.log выводит DOM-элементы в консоль как HTML. Чтобы вывести DOM-элемент в консоль в виде объекта используем метод dir()

При выводе в консоль эти методы имеют визуальное оформление, но в каждом браузере это реализовано немного по разному.

console.info()

console.warn()

console.error()

А вот так это же выглядит в браузере Mozilla Firefox, где видно что в мазиле для info есть иконка:

console.time()

Метод time() для объекта консоли, выводит время выполняемого фрагмента кода.

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

Таймеров может быть установлено неограниченное количество, главное не забывать в конце фрагмента кода ставить console.timeEnd('Name')

console.group()

Пример - чтобы было понятнее, я пробелами и табами разделю на группы:

console.table()

Метод console.table() позволяет вывести данные в консоль в виде таблицы. Эта возможность не является стандартной и стандартизировать её пока никто не собирается. И хоть метод не стандартизированный, он поддерживается в браузерах Crome, Firefox и многих других.

Имеет следующий синтаксис:

При выводе данных в консоль в виде таблицы, у таблицы всегда будет первым столбиком индексовая колонка.

Как пример использования метода console.table(); , выведу две таблицы в консоль.

Первая - выводит квадрат числа из генерируемого через цикл for массива.
Вторая - выводит в отдельных колонках имя и фамилию известных героев из Чапаева.

В консоли мы увидим такую картину:

При этом если кликнуть на название колонки, то будет выполнена сортировка элементов.

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

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