Console API
Console API обеспечивает функциональность, которая позволяет разработчикам выполнять задачи по отладке, такие как логирование сообщений или значений переменных в определённых местах кода, измерение времени, требуемое на выполнение задачи
Понятие и использование
Console API изначально было собственным API с различной браузерной реализацией. Спецификация Console API была создана, чтобы согласовать поведение. Сейчас все современные браузеры используют эту реализацию. Хотя некоторые реализации имеют свои собственные функции. Узнать больше можно здесь:
- Google Chrome DevTools implementation
- Safari DevTools implementation
Использование крайне простое — объект console ( window.console в браузерах или WorkerGlobalScope.console (en-US) в Web Worker) содержит множество методов, которые вы можете вызвать для выполнения отладки. В основном используется для вывода веб-консоль различных значений.
Один из самых часто используемых методов console.log , который используют для вывода текущего значения переменной.
Интерфейсы
Обеспечивает простую функциональность для отладки. Включает в себя логирование, трассировку, таймеры и счётчики.
Примеры
let myString = "Hello world"; // Вывод "Hello world" в консоль console.log(myString);
Смотрите больше примеров на странице Console.
Спецификации
| Specification |
|---|
| Console Standard # console-namespace |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Инструменты разработчика
- Веб-консоль — как Веб-консоль в Firefox работает с вызовами 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 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Console
Объект Console служит для доступа к средствам отладки браузера (например, Web Console (Веб-консоль) в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.
Доступ к Console можно получить через свойство глобального объекта, то есть: Window в браузере (в JavaScript), WorkerGlobalScope (en-US) — в workers это специальный способ доступа через свойство console . Он известен как Window.console , и на него ссылаются для простоты так: » console «.
.log("Failed to open the specified link");
Ниже описаны методы, доступные в объекте Console и приведены несколько примеров их использования.
Примечание: Эта возможность доступна в Web Workers
Методы
Выводит в консоль (имеется ввиду веб-консоль) сообщение и стек вызова метода, если первый аргумент false .
Выводит количество вызовов метода с определённой меткой (передаётся в параметре метода)
Обнуляет значение счётчика с заданным значением.
Синоним для log()
Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволит вам посмотреть дочерние объекты и их свойства.
Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет — в виде JavaScript-объекта (как в виде «console.dir()»).
Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
Синоним для error();
Создаёт новую группировку сообщений, сдвигая все следующие выводимые строки вправо на один уровень. Для завершения группы вызовите groupEnd() .
Создаёт новую группировку сообщений, сдвигая все следующие сообщения вправо на один уровень; в отличие от group() вывод происходи в свёрнутую группу, требующую раскрыть её вручную по кнопке. Для завершения группывызовите groupEnd() .
Выход из текущей группы.
Информационное сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
Общий метод вывода информации. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
Запускает профайлер, встроенный в браузер (например, Firefox performance tool). Вы можете указать метку профиля (по желанию).
Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, Firefox performance tool).
Отображает табличные данные в виде таблицы.
Запускает таймер с именем из переданного параметра. Можно запустить одновременно до 10,000 таймеров на странице.
Останавливает указанный таймер и записывает в лог, сколько прошло секунд от его старта.
Ставит маркер в браузерном инструменте измерения производительности Timeline или Waterfall.
Выводит предупреждающее сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
Использование
Вывод текста в консоль
Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать, используя функции console.log() , console.info() , console.warn() , console.error() . Их вывод стилизован по-разному, и вы можете использовать фильтры, предоставляемые браузером, чтобы видеть только интересующие вас вещи.
Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.
Вывод одного объекта
Простейший способ для вывода одного объекта:
var someObject = str: "Some text", id: 5 >; console.log(someObject);
Вывод будет таким:
[09:27:13.475] ()
Вывод нескольких объектов
Вы можете выводить несколько объектов, просто перечисляя их в вызываемой функции:
var car = "Dodge Charger"; var someObject = str: "Some text", id: 5 >; console.info("My first car was a", car, ". The object is: ", someObject);
Вывод будет таким:
[09:28:22.711] My first car was a Dodge Charger . The object is: ()
Преобразование строк с использованием масок
Gecko 9.0 ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:
| Подстановочный символ | Описание |
|---|---|
| %o или %O | Выводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода. |
| %d или %i | Выведет целое число. Поддерживается форматирование, например, console.log(«АБВГД %.2d», 1.1) выведет число как две значащих цифры с лидирующим нулём: АБВГД 01 |
| %s | Выводит строку. |
| %f | Выводит число с плавающей точкой. Поддерживается форматирование, например, console.log(«АБВГД %.2f», 1.1) выведет число до двух знаков после запятой: АБВГД 1.10 |
Каждая из масок выбирает следующий аргумент из списка параметров. Пример:
for (var i=0; i
Вывод будет таким:
[13:14:13.481] Hello, Bob. You've called me 1 times. [13:14:13.483] Hello, Bob. You've called me 2 times. [13:14:13.485] Hello, Bob. You've called me 3 times. [13:14:13.487] Hello, Bob. You've called me 4 times. [13:14:13.488] Hello, Bob. You've called me 5 times.
Стилизация вывода консоли
Можно использовать директиву «%c» для применения стилей CSS при выводе в консоль. Часть текста до директивы не затрагивается стилем, а часть после — будет стилизована:
.log( "This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px;", );
Примечание: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.
Группирование вывода в консоли
Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите console.group() . Метод console.groupCollapsed() похожий, но создаёт новый блок свёрнутым, что потребует нажать на кнопку, для своего раскрытия для чтения.
Примечание: Свёрнутые группы не поддерживаются пока в Gecko; в настоящее время метод groupCollapsed() работает так же как и group() .
Для выхода из текущей группы просто вызовите console.groupEnd() . Пример:
.log("This is the outer level"); console.group(); console.log("Level 2"); console.group(); console.log("Level 3"); console.warn("More of level 3"); console.groupEnd(); console.log("Back to level 2"); console.groupEnd(); console.debug("Back to the outer level");
Вывод будет таким:
Таймеры
Для расчёта длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте console . Для запуска таймера вызовите функцию console.time() , при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите console.timeEnd() , передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.
.time("answer time"); alert("Click to continue"); console.timeEnd("answer time");
этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно alert :
Заметьте, что имя таймера отображено и при старте таймера и при его остановке.
Примечание: Это важно: если вы используете таймер для записи таймингов сетевого трафика, то таймер отобразит общее время для операции, в то время как время, отображаемое в панели «Сеть» это только время, требуемое для заголовка. Если у вас включено логирование времени тела ответа, то время ответа для заголовка и для тела должно соответствовать времени, которое вы у видите в консоли.
Трассировка стека вызова
Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали console.trace() . Например, такой код:
foo(); function foo() < function bar() < console.trace(); >bar(); >
Вывод в консоль будет похож на этот:
Замечания
- По крайней мере в Firefox, если страница определяет свой объект console , то этот объект переопределяет объект console , встроенный в Firefox.
- До Gecko 12.0, методы объекта console работали только, если открыта панель «Веб-консоль» (Web Console). Начиная с Gecko 12.0, вывод кешируется до тех пор, пока панель Веб-консоль не откроется, и сразу отобразится в ней.
- Стоит отметить, что встроенный в Firefox объект console совместим с таким же объектом, предоставляемым плагином Firebug.
Смотрите также
- Tools
- Веб-консоль — как Веб-консоль в Firefox обрабатывает вызовы API-консоли
- Удалённая отладка- как посмотреть вывод в консоль, когда цель отладки находится на мобильном устройстве
- Отладка приложений в Firefox OS — использование Менеджера приложений для отладки приложений, запущенных на Firefox OS
- On-device console logging — как сделать логирование на устройствах на Firefox OS
Реализации в браузерах
- Google Chrome DevTools
- Firebug
- Internet Explorer
- Safari
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 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Что такое API?
API – это механизмы, которые позволяют двум программным компонентам взаимодействовать друг с другом, используя набор определений и протоколов. Например, система ПО метеослужбы содержит ежедневные данные о погоде. Приложение погоды на телефоне «общается» с этой системой через API и показывает ежедневные обновления погоды на телефоне.
Что значит API?
API – Application Programming Interface, что значит программный интерфейс приложения. В контексте API слово «приложение» относится к любому ПО с определенной функцией. Интерфейс можно рассматривать как сервисный контракт между двумя приложениями. Этот контракт определяет, как они взаимодействуют друг с другом, используя запросы и ответы. Документация API содержит информацию о том, как разработчики должны структурировать эти запросы и ответы.
Как работают API?
Архитектура API обычно объясняется с точки зрения клиента и сервера. Приложение, отправляющее запрос, называется клиентом, а приложение, отправляющее ответ, называется сервером. Итак, в примере с погодой база данных службы – это сервер, а мобильное приложение – это клиент.
Существует четыре различных способа работы API в зависимости от того, когда и почему они были созданы.
SOAP API
SOAP – Simple Object Access Protocol, т. е. простой протокол доступа к объектам. Клиент и сервер обмениваются сообщениями посредством XML. Это менее гибкий API, который был более популярен в прошлом.
RPC API
Такие API называются системой удаленного вызова процедур. Клиент выполняет функцию (или процедуру) на сервере, и сервер отправляет результат обратно клиенту.
Websocket API
Websocket API – это еще одна современная разработка web API, которая использует объекты JSON для передачи данных. WebSocket API поддерживает двустороннюю связь между клиентскими приложениями и сервером. Сервер может отправлять сообщения обратного вызова подключенным клиентам, что делает его более эффективным, чем REST API.
REST API
На сегодняшний день это самые популярные и гибкие API-интерфейсы в Интернете. Клиент отправляет запросы на сервер в виде данных. Сервер использует этот клиентский ввод для запуска внутренних функций и возвращает выходные данные обратно клиенту. Давайте рассмотрим API REST более подробно ниже.
Что такое REST API?
REST – это Representational State Transfer, т. е. передача репрезентативного состояния. REST определяет набор функций, таких как GET, PUT, DELETE и т. д., которые клиенты могут использовать для доступа к данным сервера. Клиенты и серверы обмениваются данными по протоколу HTTP.
Главной особенностью REST API является то, что такая передача выполняется без сохранения состояния. Без сохранения состояния означает, что серверы не сохраняют клиентские данные между запросами. Клиентские запросы к серверу аналогичны URL-адресам, которые вы вводите в браузере для посещения веб-сайта. Ответ от сервера представляет собой простые данные без типичного графического отображения веб-страницы.
Что такое web API?
Web API или Web Service API –это интерфейс обработки приложений между веб-сервером и веб-браузером. Все веб-сервисы являются API, но не все API являются веб-сервисами. REST API – это особый тип Web API, в котором используется стандартный архитектурный стиль, описанный выше.
Различные термины, которые относятся к API, такие как Java API или сервисные API, существуют потому, что исторически API были созданы до всемирной паутины. Современные web API – это REST API, и эти термины могут использоваться взаимозаменяемо.
Что такое интеграции API?
Интеграции API – это программные компоненты, которые автоматически обновляют данные между клиентами и серверами. Некоторыми примерами интеграции API являются автоматическая синхронизация данных в облаке из галереи изображений телефона или автоматическая синхронизация времени и даты ноутбуке при смене часового пояса. Организации также могут использовать их для эффективной автоматизации многих системных функций.
.67a41a2ef9823282fe672434ddd56dd22c13d5a5.png)
Каковы преимущества REST API?
REST API имеет четыре главных преимущества.
1. Интеграция
API используются для интеграции новых приложений с существующими программными системами. Это увеличивает скорость разработки, потому что каждую функцию не нужно писать с нуля. API можно использовать для усиления существующего кода.
2. Инновации
Целые отрасли могут измениться с появлением нового приложения. Компании должны быстро реагировать и поддерживать быстрое развертывание инновационных услуг. Они могут сделать это, внося изменения на уровне API без необходимости переписывать весь код.
3. Расширение
API-интерфейсы предоставляют компаниям уникальную возможность удовлетворять потребности своих клиентов на разных платформах. Например, карты API позволяет интегрировать информацию о картах через веб-сайты, Android, iOS и т. д. Любая компания может предоставить аналогичный доступ к своим внутренним базам данных, используя бесплатные или платные API.
4. Простота обслуживания
API действует как шлюз между двумя системами. Каждая система обязана вносить внутренние изменения, чтобы это не повлияло на API. Таким образом, любые будущие изменения кода одной стороной не повлияют на другую сторону.
Какие типы API существую?
API классифицируются как по архитектуре, так и по сфере применения. Мы уже рассмотрели основные типы архитектур API, поэтому мы предлагаем рассмотреть сферы применения.
Частные API
Это внутренние API организаций, которые используются только для соединения систем и данных внутри бизнеса.
Общедоступные API
Это API с общим доступом и могут быть использованы кем угодно. С этими типами API может быть (но не обязательно) сопряжена некоторая авторизация и стоимость.
Партнерские API
Эти API доступны только авторизованным сторонним разработчикам для содействия партнерским отношениям между предприятиями.
Составные API
Эти API объединяют два или более разных API для решения сложных системных требований или поведения.
Что такое адрес API и почему он важен?
Адреса API – это конечные точки взаимодействия в системе связи API. К ним относятся URL-адреса серверов, службы и другие конкретные цифровые местоположения, откуда информация отправляется и принимается между системами. Адреса API имеют решающее значение для предприятий по двум основным причинам.
1. Безопасность
Адреса API делают систему уязвимой для атак. Мониторинг API имеет решающее значение для предотвращения ненадлежащего использования.
2. Производительность
Адреса API, особенно с высоким трафиком, могут создавать узкие места и влиять на производительность системы.
Как обезопасить REST API?
Все API должны быть защищены посредством надлежащей аутентификации и мониторинга. Описание двух основных способов защиты безопасности REST API см. ниже.
1. Токены аутентификации
Они используются для авторизации пользователей для выполнения вызова API. Токены аутентификации проверяют, являются ли пользователи теми, за кого они себя выдают, и что у них есть права доступа для этого конкретного вызова API. Например, при входе на почтовый сервер почтовый клиент использует токены аутентификации для безопасного доступа.
2. Ключи API
Ключи API проверяют программу или приложение, выполняющее вызов API. Они идентифицируют приложение и гарантируют, что оно имеет права доступа, необходимые для выполнения конкретного вызова API. Ключи API не так безопасны, как токены, но они позволяют осуществлять мониторинг API для сбора данных об использовании. Возможно, вы заметили длинную строку символов и цифр в URL-адресе вашего браузера при посещении разных веб-сайтов. Эта строка представляет собой ключ API, который веб-сайт использует для выполнения внутренних вызовов API.
Как создать API?
Для создания API, с которым другие разработчики захотят работать и которому будут доверять, необходимы должные осмотрительность и усилия. См. пять шагов, необходимых для качественного проектирования API, ниже.
1. План API
Спецификации API, такие как OpenAPI, обеспечивают основу для разработки API. Лучше заранее подумать о различных вариантах использования и убедиться, что API соответствует текущим стандартам разработки API.
2. Разработка API
Разработчики API создают прототипы API, используя шаблонный код. После тестирования прототипа разработчики могут настроить его в соответствии с внутренними спецификациями.
3. Тестирование API
Тестирование API аналогично тестированию ПО и должно проводиться для предотвращения ошибок и дефектов. Инструменты тестирования API можно использовать для проверки устойчивости API к кибератакам.
4. Документирование API
Хотя API говорят сами за себя, документация по API действует как руководство по повышению удобства использования. Хорошо задокументированные API, которые предлагают ряд функций и вариантов использования, как правило, более популярны в сервис-ориентированной архитектуре.
5. Вывод API на рынок
Так же, как Amazon – это онлайн-рынок для розничной торговли, существуют торговые площадки API для разработчиков, чтобы покупать и продавать другие API. Размещение API может позволить монетизировать интерфейс.
Что такое тестирование API?
Стратегии тестирования API аналогичны другим методологиям тестирования ПО. Основное внимание уделяется проверке ответов сервера. Тестирование API включает описанные ниже аспекты.
- Выполнение нескольких запросов к адресам API для тестирования производительности.
- Написание модульных тестов для проверки бизнес-логики и функциональной корректности.
- Тестирование безопасности путем имитации системных атак.
Как написать документацию по API?
Составление исчерпывающей документации по API является частью процесса управления API. Документация по API может быть создана автоматически с помощью инструментов или написана вручную. См. рекомендации ниже.
- Написание объяснений на простом, легко читаемом русском языке. Документы, созданные инструментами, могут стать многословными и потребовать редактирования.
- Использование примеров кода для объяснения функциональности.
- Ведение документации, чтобы она была точной и актуальной.
- Ориентированность стиля письма на начинающих
- Охват всех проблем, которые API может решить для пользователей.
Как использовать API?
Шаги по внедрению нового API см. ниже.
- Получение ключа API Выполняется путем создания проверенной учетной записи у поставщика API.
- Установка клиента API HTTP Этот инструмент позволяет легко структурировать запросы API, используя полученные ключи API.
- В отсутствие клиента API можно попробовать самостоятельно структурировать запрос в браузере, обратившись к документации по API.
- Как только вы освоитесь с новым синтаксисом API, вы сможете начать использовать его в коде.
Где найти новые API?
Новые веб-API можно найти на торговых площадках API и в каталогах API. Торговые площадки API – это открытые платформы, на которых любой желающий может выставить API на продажу. Каталоги API – это контролируемые репозитории, регулируемые владельцем каталога. Опытные разработчики API могут оценить и протестировать новый API, прежде чем добавить его в свой каталог.
Популярные веб-сайты API см. ниже.
- Rapid API – крупнейший мировой рынок API с более чем 10 000 общедоступных API и 1 млн активных разработчиков на веб-сайте. RapidAPI позволяет пользователям тестировать API непосредственно на платформе перед совершением покупки.
- Public API – платформа группирует удаленные API в 40 нишевых категорий, что упрощает просмотр и поиск подходящего для ваших нужд объекта.
- APIForThat и APIList – на обоих веб-сайтах есть списки из более чем 500 web-API, а также подробная информация о том, как их использовать.
Что такое шлюз API?
Шлюз API – это инструмент управления API для корпоративных клиентов, использующих широкий спектр серверных служб. Шлюзы API обычно выполняют общие задачи, такие как аутентификация пользователей, статистика и управление скоростью, применимые ко всем вызовам API.
Amazon API Gateway – это полностью управляемый сервис для разработчиков, предназначенный для создания, публикации, обслуживания, мониторинга и обеспечения безопасности API в любых масштабах. API Gateway берет на себя все задачи, связанные с приемом и обработкой тысячи одновременных вызовов API, включая управление трафиком, поддержку CORS, авторизацию и контроль доступа, регулирование количества запросов, мониторинг и управление версиями API.
Что такое GraphQL?
GraphQL – это язык запросов, разработанный специально для API. Он отдает приоритет предоставлению клиентам именно тех данных, которые они запрашивают, и не более того. Такой язык разработан, чтобы сделать API быстрыми, гибкими и удобными для разработчиков. В качестве альтернативы REST GraphQL дает разработчикам интерфейсов возможность запрашивать несколько баз данных, микросервисов и API с помощью одной конечной точки GraphQL. Организации предпочитают создавать API с помощью GraphQL, потому что это помогает им быстрее разрабатывать приложения. Подробнее о GraphQL читайте здесь.
AWS AppSync – это полностью управляемый сервис, который упрощает разработку API-интерфейсов GraphQL, выполняя тяжелую работу по безопасному подключению к источникам данных, таким как AWS DynamoDB, AWS Lambda и т. д. AWS AppSync может передавать обновления данных в режиме реального времени через Websocket миллионам клиентов. Для мобильных и веб-приложений AppSync также обеспечивает локальный доступ к данным, когда устройства отключаются. После развертывания AWS AppSync автоматически масштабирует подсистему выполнения API GraphQL вверх или вниз в соответствии с текущим объемом запросов к API.
Как получить сервисы Amazon API?
Управление интерфейсом прикладного программирования является важной частью современной разработки программного обеспечения. Стоит инвестировать в инфраструктуру API, включая инструменты, шлюз и архитектуру микросервисов как для внутренних, так и для внешних пользователей.
Amazon API Gateway предусматривает полный набор функций для управления несколькими API одновременно с должной эффективностью. Вы можете бесплатно совершать до одного миллиона вызовов API, зарегистрировавшись на портале AWS.
AWS AppSync предоставляет возможность настраивать, администрировать и обслуживать полностью управляемую систему API GraphQL со встроенной бессерверной инфраструктурой высокого уровня доступности. Вы платите только за то, что реально используете. Минимальная плата или обязательный уровень использования отсутствует. Чтобы начать работу, войдите в консоль AWS AppSync.
API консоли Javascript
Разработчикам удобно пользоваться консолью для отладки, но ещё удобнее, если будет оболочка, в которой учтены особенности реализации консоли в различных браузерах, поэтому тема обёрток для консоли устойчиво существует.
Рассмотрим ранее опубликованные решения, затем сделаем обзор методов консоли с помощью перевода недавней статьи Axel Rauschmayer-а, разработчика и консультанта с более чем 15-летним стажем, затем я опубликую некоторые свои решения, которые оказались удачными в процессе эволюции и отладки на ряде проектов.
UPD 2015: обновление таблицы команд до актуального состояния, Github (ru, en; разворачивание на javascript).
Обёртки консоли на Хабре, обзоры и документация
«Используем console «на полную»» — показывает способы отличной обработки объектов, учёт особенностей различных браузеров в реализации.
Делаем консоль чуточку удобнее — Подменяет исходный объект, что решает некоторые баги. Отлично исправляет деградацию некоторых браузеров по полноте поддержки методов. Остаётся разве что длинность написания нативных методов, что есть плюс в плане неизучения новых названий, но требует набора оригинальных слов. Может быть решено ускорителями набора типа emmet в IDE.
simple wrapper for console.log — 2010 (англ.).
Console.Log: Say Goodbye to JavaScript Alerts for Debugging! (IE), 2011 (англ.)
dbug — a console wrapper (Github, 2009)
«Firebug* console API» — эта статья в чём-то полнее последующего перевода. Обе они дадут взаимно дополняющую информацию. (Воспользуемся переводом, чтобы самостоятельно не тестировать вручную, повторяя проделанную автором работу.)
Перевод обзора из блога Axel Rauschmayer
Итоговая таблица с сортировкой методов по алфавиту.
В большинстве браузеров существует глобальный объект console с методами для логирования и отладки. Он — не часть языка, но стал фактическим стандартом, появившись вначале в отладчике Firebug. Так как основная цель для него — отладка, он часто используется при разработке и редко — в работающем коде.
Как стандартизирована консоль в различных браузерах?
Firebug первым начал продвигать API консоли и его вики-документацию, успешнее других приближаясь к стандартизации. Кроме того, Brian Kardell и Paul Irish работают над спецификацией API, что в перспективе должно дать лучшую согласованность поведения браузеров. ДО сих пор их правила довольно различны, поэтому данная статья даст общее краткое описание. Дополнительную информацию вы получите в документации к различным платформам.
Chrome: developers.google.com/chrome-developer-tools/docs/console-api/
Firebug: getfirebug.com/wiki/index.php/Console_API
Firefox: developer.mozilla.org/en-US/docs/Web/API/console
IExplorer: msdn.microsoft.com/en-us/library/ie/hh772183.aspx
Node.js: nodejs.org/api/stdio.html
Safari: Safari Developer Guide
Баг в IE9: объект console существует, если хотя бы раз было открыто окно средств разработчика (Developer Tools, F12). Иначе — происходит ошибка ReferenceError. Как вариант обхода бага, нужно проверять наличие объекта и ставить заглушку в случае отсутствия.
Методы для простого логирования
console . clear () — очистить консоль;
console . debug (object1, object2 ? , . ) — то же, что console . log () (вопросики означают необязательность аргумента);
console . error (object1, object2?, . ) — логирование параметров под значком ошибки (без остановки кода) и, возможно, добавляется трассировка стека вызовов и ссылка на код.
console . exception (errorObject, object1?, . ]) [только в Firebug] — объекты с интерактивным стеком трассировки;
console . info (object1?, object2?, . ) — логирование в консоль; в браузерах может помечаться значком и, возможно, имеет трассировку стека или ссылку; поддерживаются шаблоны printf, как в console.log.
console . log (object1?, object2?, . ) — логирование в консоль. Если первый аргумент — строка в формате директив printf, она форматирует значения остальных аргументов. Пример (Node.js REPL):
> console.log('%s', < foo: 'bar' >) [object Object] > console.log('%j', < foo: 'bar' >)
Единственная надёжная кроссплатформенная директива форматирования — это ‘%s’. Node.js поддерживает ‘%j’ для JSON-данных. Браузеры могут поддерживать другие директивы интерактивных действий для консоли (подробнее здесь (рус.)).
console . trace () — показ интерактивного стека вызовов функций в браузерах (стек вызовов, приведший к выполнению кода в данной точке, аналогично тому, что видим в сообщениях об ошибках);
console . warn (object1?, object2?, . ) — логирование под значком предупреждения; может содержать трассировку стека или ссылку. Поддерживаются шаблоны printf, как в console.log.
| Chrome |
Firebug |
Firefox |
IE |
Node.js |
 Safari |
|
|---|---|---|---|---|---|---|
| clear() | ✓ | ✓ | -⊝- | ✓ | -⊝- | ✓ |
| debug() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ |
| error() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| exception() | -⊝- | ✓ | -⊝- | -⊝- | -⊝- | -⊝- |
| info() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| log() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| trace() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| warn() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Методы для проверок и подсчёта
console . assert (expr, obj?) — если первый аргумент ложен, то выводит объект в консоль и выбрасывает исключение; если true — ничего не делает;
console . count (label?) — подсчитывает, сколько раз встретилась функция с этой меткой.
| Chrome |
Firebug |
Firefox |
 IE |
Node.js |
Safari |
|
|---|---|---|---|---|---|---|
| assert() | ✓ | ✓ | -⊝- | ✓ | ✓ | ✓ |
| count() | ✓ | ✓ | -⊝- | ✓ | -⊝- | ✓ |
Методы для логов с форматированием
console . dir (object) — выводит представление объекта в консоли. Может быть интерактивно — разворачиваться, просматриваться в других вкладках инструмента (в Node.js — без интерактивности).
console . dirxml (object) — выводит XML-дерево элемента HTML или XML.
console . group (object1?, object2?, . ) — начинает вывод сворачиваемого объекта в консоли, содержащего группы указанных и будущих значений в каждой новой строке. Блок объявляется завершённым командой console.groupEnd() и изначально развёрнут для просмотра, но может сворачиваться-разворачиваться вручную (мышью).
console . groupCollapsed (object1?, object2?, . ) — работает аналогично console.group(), но блок изначально свёрнут.
console . groupEnd () — закрывает группу, которая была начата console.group() или console.groupCollapsed().
console . table (data, columns?) — выводит массив как таблицу, по одному элементу на строку. Дополнительный аргумент указывает, какие свойства массива отображаются в колонках. Если пропущен — отображаются все свойства. Несуществующие свойства отображаются в колонках как неопределённые.
var persons = [ < firstName: 'Jane', lastName: 'Bond' >, < firstName: 'Lars', lastName: 'Croft', age: 72 >]; // Эквивалентные записи: console.table(persons); console.table(persons, ['firstName', 'lastName', 'age']);
Будем видеть в консоли:
| Chrome |
Firebug |
Firefox |
IE |
Node.js |
Safari |
|
|---|---|---|---|---|---|---|
| dir() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| dirxml() | ✓ | ✓ | -⊝- | ✓ | -⊝- | ✓ |
| group() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ |
| groupCollapsed() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ |
| groupEnd() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ |
| table() | ✓ | ✓ | -⊝- | -⊝- | -⊝- | -⊝- |
Профилирование и тайминги
console . markTimeline (label) — [Safari-only] то же, что timeStamp().
console . profile (title?) — включение профилирования. Необязательный аргумент используется для комментирования в отчёте.
console . profileEnd () — останавливает профилирование и выводит отчёт.
console . time (label) — запускает таймер с указанной меткой (названием, идентификатором).
console . timeEnd (label) — останавливает таймер с меткой и показывает насчитанное время.
console . timeStamp (label?) — выводит промежуточные отсчёты времени для таймера с указанной меткой.
| Chrome |
Firebug |
Firefox |
IE |
Node.js |
Safari |
|
|---|---|---|---|---|---|---|
| markTimeline() | -⊝- | -⊝- | -⊝- | -⊝- | -⊝- | ✓ |
| profile() | ✓ | ✓ | (devtools) | ✓ | -⊝- | ✓ |
| profileEnd() | ✓ | ✓ | (devtools) | ✓ | -⊝- | ✓ |
| time() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| timeEnd() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| timeStamp() | ✓ | ✓ | -⊝- | -⊝- | -⊝- | -⊝- |
«(devtools)» означает, что метод будет работать в случае, если открыта панель инструментов разработчика.
Благодарности:
В подготовке этого обзора участвовали два человека: Matthias Reuter (@ gweax) и Philipp Kyeck (@ pkyeck).
—Автор: Axel Rauschmayer. (Конец перевода.)
Итоговая таблица с сортировкой по алфавиту. (Ссылки помогут увидеть подробности и прочитать о поддержке Оперой в дополнение к этой статье. В последнюю колонку добавлены краткие замечания об Опере оттуда.)
| Chrome |
Firebug |
Firefox |
IE |
Node.js |
Safari |
 Opera |
|
|---|---|---|---|---|---|---|---|
| assert() | ✓ | ✓ | -⊝- | ✓ | ✓ | ✓ | ± |
| clear() | ✓ | ✓ | -⊝- | ✓ | -⊝- | ✓ | ✓ |
| count() | ✓ | ✓ | -⊝- | ✓ | -⊝- | ✓ | ± |
| debug() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ | ± |
| dir() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| dirxml() | ✓ | ✓ | -⊝- | ✓ | -⊝- | ✓ | ± |
| error() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ± |
| exception() | -⊝- | ✓ | -⊝- | -⊝- | -⊝- | -⊝- | ± |
| group() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ | ✓ |
| groupCollapsed() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ | ✓ |
| groupEnd() | ✓ | ✓ | ✓ | ✓ | -⊝- | ✓ | ✓ |
| info() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| log() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ± |
| markTimeline() | -⊝- | -⊝- | -⊝- | -⊝- | -⊝- | ✓ | -⊝- |
| profile() | ✓ | ✓ | (devtools) | ✓ | -⊝- | ✓ | -⊝- |
| profileEnd() | ✓ | ✓ | (devtools) | ✓ | -⊝- | ✓ | -⊝- |
| table() | ✓ | ✓ | -⊝- | -⊝- | -⊝- | -⊝- | -⊝- |
| time() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ± |
| timeEnd() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ± |
| timeStamp() | ✓ | ✓ | -⊝- | -⊝- | -⊝- | -⊝- | -⊝- |
| trace() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ± |
| warn() | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
Спасибо автору блога за свежие сведения и таблицы, относящиеся к методам консоли. Зарядившись попкорном, продолжим разговор. Имеем все методы, чтобы пользоваться, но чаще всего не нужно всех. Часто достаточно одного, но универсального console.log. Есть много задач, где нужны скромные, но кроссбраузерные возможности.
Несколько сниппетов (вставок кода с функциями), для различных применений
Всё, что выше — это красиво, годится как справочник, довольно полно и хорошо. Но нужны решения, а не теория — ведь для каждой мелкой задачи понадобятся похожие решения.
Опыт показывает, что совсем не нужно иметь исчерпывающую поддержку всех функций — чаще всего достаточно одной или нескольких, и больше интересны сервисные функции: отключить консоль полностью одной переменной или выражением (когда код выложен на продакшн), выводить только ошибки по переменной или готовить ошибки для отсылки в техподдержку проекта, иметь управляемый вывод сообщений в виде нескольких вариантов.
Сложные и некроссбраузерные функции скорее не нужны, чем нужны: красивый вывод таблиц, не позволяющий отлаживаться в IE или Safari, будет скорее мешать, заставит возвращаться к уровню настроек консоли в неподходящие моменты.
Поэтому, исходя из опыта, примеры будут максимально простые, но работающие и без лишнего кода. Если части кода не понадобится, проще выбрать для проекта или страницы менее сложный пример.
Вначале надо проделать собственные измышления о том, что нам надо иметь. Нелюбители читать чьи-то измышления могут на этом оставить статью. На основании них будут построены примеры.
1. Дизайн кода функций.
Поговорим и выберем дизайн кода. Это — не дизайн страницы, это — то, как код будет смотреться в текстовом редакторе.
Для отладки имеем 2 стандартных способа и, соответственно, дизайна — функции типа alert/confirm/prompt и методы объекта console. Замещать стандартные имена функций и методов — всё же, не всегда хорошо. Эа исключением случаев, когда надо предотвратить ошибки реализаций, как в IE. Для своей отладки, на мой взгляд, целесообразнее выбрать другое имя для функций или их группы. Например, я экспериментировал с применением слова «Alert», с большой буквы, но и оно показалось длинным после нескольких проектов, и я перешёл на «wcl()» — символическое сокращение от «window.console.log». Если вам не понравился выбор, подставьте в примеры свой вариант.
Из «wcl()» логично и понятно следуют остальные сокращения — «wci» — window.console.info; wcw — window.console.warn; wce — window.console.error. Такие слова редко встречаются в именах перемеенных, достаточно короткие и нормально отыскиваются взглядом или поиском по проекту. Для таймингов добавим wct(), а для сброса консоли — wcc().
Эти функции предлагается класть сразу в глобальный объект. Это не будет засорять пространство глобального объекта, потому что на продакшене их можно при желании выкусить из кодов проекта. А применение экономит не менее 2 символов или больше, чем если бы они были в объекте (типа C.log, C.err. ).
На этом дизайн не закончен — достаточно удобным оказался ещё такой финт, чтобы приписать их в методы объекта String.
String.prototype.wcl = wcl; Не спешите поднимать негодующие руки — это не нарушение чистых принципов, потому что работать это будет, опять же, на этапе отладки, разработки. На чистом проекте их тоже можно из кода выкусить. А помогает способ тем, что отладочные сообщения легко искать через Ctrl-F.
'Ajax_request'.wcl(data); //даёт вывод 'Ajax_request' Object //Равносильно wcl('Ajax_request', data); Найти в коде этот фрагмент — по строке » Ajax_request’ » (с апострофом в конце). В начале строки мы вольны поставить свои дополнительные символы для лучшего выделения сообщения в логе, например»= javascript»>var noConsole =0, win = window ,wcl = function(a)< a = a!==undefined ? a :''; //консоль как метод строки или функция, с отключением по noConsole ==1 if(win.console && !noConsole) win.console.log.apply(console, this instanceof String ? ["'=="+ this +"'"].concat([].slice.call(arguments)) : arguments); >; String.prototype.wcl = wcl;
Здесь есть пара элементов простой уличной магии: первая строка функции позволяет не указывать аргументов и не иметь ошибок для выражений вида ‘место_трассировки_116’.wcl(). А выражение [].slice.call(arguments) позволяет приобрести коллекции аргументов свойство массива, чтобы они без ошибок могли участвовать в операции concat(). (Об этом нередко спрашивают на собеседованиях: каким способом вы превращаете коллекцию в массив?)
Если решили вообще отказаться от свойства объекта, получается совсем коротко (тут вопрос — в дизайне кода, устроит ли нас написание только в формате wcl(. )):
var noConsole =0, win = window ,wcl = function()< //консоль как метод строки или функция, с отключением по noConsole ==1 if(win.console && !noConsole) win.console.log(arguments); >; Не проверяем отсутствие аргументов, поскольку просто «wcl();» без аргументов использовать не будем. Будет работать и в IE, если открыто окно инструментов разработчика.
2.2. Простое логирование с IE
Непонимание браузером IE того, что console.log — это функция, приводит к ещё одному витку магии (и, в общем, немного замедляет работу во всех бр-рах, поэтому лучше использовать, если действительно нужен IE).
var noConsole =0, win = window ,wcl = function(a)< a = a!==undefined ? a :''; //консоль как метод строки или функция, с откл. по noConsole ==1, +IE if(win.console && !noConsole) Function.prototype.apply.call(console.log, console, this instanceof String ? ["'=="+ this +"'"].concat([].slice.call(arguments)) : arguments); >; String.prototype.wcl = wcl; 2.3. Четыре уровня сообщений в логах
Если хотим немного раскрасить вывод, чтобы на цвет различать важность и характер сообщений своего проекта, воспользуемся копипейстом используем написанный в 2.1 код для работы 4 похожих и всеми поддерживаемых функций — log, warn, info, error. Поскольку копипейст в коде — не лучший, хотя и простой метод, скопируем следующий сниппет, где копипейст уже преобразован в цикл, и добавлена интересная возможность — указать уровень сообщений, которые будут выводиться в лог. Уровни:
0: warn, (warning)
1: info,
2: log,
3: error.
Некоторая переменная logLevel будет указывать, ниже какого уровня сообщения не выводить.
(function(w, logLevel, wcA)< var lvl =0 ,$x = function(el, h); for(var i in wcA) //консоль[i] как метод строки или функция w[i] = (function(lvl, wcAI, i)< return function(a)< a = a!==undefined|| arguments.length ? a :''; if(w.console && logLevel ; > >)(lvl++, wcA[i], [i]); w.wcc = w.console.clear; $x(String.prototype, ); >)(window, /*logLevel*/ 0, Скрытый текстif(!Array.indexOf) //old browser support Array.prototype.indexOf = function(obj)< for(var i =0, iL = this.length; i < iL; i++) if(this[i] == obj) return i; return -1; >; if(!document.getElementsByClassName) document.getElementsByClassName = function(className)< if(!className) return []; var e = document.getElementsByTagName('*') ,list = []; for(var i =0, iL = e.length; i < iL; i++)< var clss = e[i].className.split(' '); if(clss.indexOf(className) >-1) list.push(e[i]); > return list; >;
$e() — это способ генерации блоков:
Скрытый текст
var $e = function(g)> if(g.ht || g.at)< var at = g.at ||<>; if(g.ht) at.innerHTML = g.ht;> if(at) for(var i in at) < if(i=='innerHTML') o[i] = at[i]; else o.setAttribute(i, at[i]);>g.apT && g.apT.appendChild(o); //ставится по ориентации, если новый return o; >
var logOnScreen =1 ,logLevel =0 //0..4 ,consoleOrig ,loadLogger = function(onScreen, logLevel)< logLevel = logLevel !==undefined ? logLevel : 3; var w = window, wcA ='].concat([].slice.call(arguments)) .join(' ') +'
'; cons.scrollTop = Math.max(0, cons.scrollHeight); > > >)(lvl++, consA[i], i.charAt(0).toUpperCase() + i.substr(1) ); > w.console.clear = function(a) >else cons && (cons.style.display ='none'); lvl =0; for(var i in wcA) //консоль[i] как метод строки или функция w[i] = (function(lvl, wcAI, i)< return function(a)< a = a!==undefined|| arguments.length ? a :''; if(w.console && logLevel ; > >)(lvl++, wcA[i], [i]); w.wcc = w.console.clear; $x(String.prototype, ); >;
Запускается этот логгер после загрузки DOM, потому что может использоваться див для вывода логов.
if(window.addEventListener) this.addEventListener('DOMContentLoaded',tst,!1); else this.attachEvent('onload',tst); var tst = function()< loadLogger(logOnScreen, logLevel); wcl('tst1'); wcl(); 'tst2'.wcl(); 'tst3'.wcl(>); 'tst-wcw'.wcw(120) 'tst-wci'.wci(121) 'tst-wcl'.wcl(122) 'tst-wce'.wce(123) >;
Если высота текста превысит максимальную высоту блока, будет действовать подкрутка скролла строкой «cons.scrollTop = Math.max(0, cons.scrollHeight);».
3. Дизайн таймингов
Есть основания не придерживаться формата логов группы «time*», потому что в исходном формате они малоинформативны. Используется только один аргумент, а строка вывода содержит только сосчитанное время. Чтобы строка не пустовала, лучше заполнить её одним из форматов логов, например, wci(), поставив в него посчитанный интервал и другие значения из остальных аргументов. Правда, для этого надо продублировать механизм подсчёта, сделав заодно его и для IE. Это же даст возможность выводить значения в див.
Сделаем для начала проще — пусть таймеры работают только для консоли. Но у нас есть избыточная форма: контекстный метод и обычная функция. Пусть 'x'.wct() будет стартом таймера, а wct('x') — его окончанием. Если же аргументов больше двух — выводится 2 строки: обычный лог, а затем тайминг.
В этой системе нет места timeStamp(), хотя можно было бы придумать для них функцию wcts(), тоже с любым количеством аргументов. Но лучше придерживаться минимализма.
(свернём вброс кода, похожего на прежний)
var logOnScreen =0 ,logLevel =1 //0..4 ,logTime =1 ,consoleOrig ,loadLogger = function(onScreen, logLevel)< logLevel = logLevel !==undefined ? logLevel : 3; var w = window, wcA ='].concat([].slice.call(arguments)) .join(' ') +'
'; cons.scrollTop = Math.max(0, cons.scrollHeight); > > >)(lvl++, consA[i], i.charAt(0).toUpperCase() + i.substr(1) ); > w.console.clear = function(); >else cons && (cons.style.display ='none'); lvl =0; for(var i in wcA) //консоль[i] как метод строки или функция w[i] = (function(lvl, wcAI, i)< return function(a)< a = a!==undefined|| arguments.length ? a :''; if(w.console && logLevel ; > >)(lvl++, wcA[i], [i]); w.wcc = w.console.clear; w.wct = !document.all && logTime ? (function(lvl, wcAI, i) < return function(a)< arguments.length ? (arguments.length !=1 || this != w ? this.wcl.apply(this,arguments) :0 ,console.timeEnd.call(console, this != w ? this : a) ): console.time.call(console,this); >>)() : function()<>; $x(String.prototype, ); >;
Проверить его можно так:
var tst = function()< loadLogger(logOnScreen, logLevel); 'x'.wct() wcl('tst1'); wcl(); 'tst2'.wcl(); 'y'.wct() 'tst3'.wcl(>); wct('x') wct('y','другие данные') >;
Выглядит:
Фиддл: jsfiddle.net/spmbt/Wgah8