--- title: Console slug: Web/API/Console tags: - API - DOM - NeedsCompatTable - Reference - Référence(2) - Веб-консоль - Отладка - Справочник по DOM Gecko translation_of: Web/API/Console --- <div>{{APIRef("Console API")}}</div> <p>Объект <strong>Console</strong> служит для доступа к средствам отладки браузера (например, <a href="/ru/docs/Tools/Web_Console">Web Console (Веб-консоль)</a> в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.</p> <p>Доступ к <strong>Console </strong>можно получить через свойство глобального объекта, то есть: {{domxref("Window")}} в браузере (в JavaScript), {{domxref("WorkerGlobalScope")}} — в <code>workers </code>это специальный способ доступа через свойство <code>console</code>. Он известен как {{domxref("Window.console")}}, и на него ссылаются для простоты так: "<code>console</code>".</p> <pre class="brush: js">console.log("Failed to open the specified link")</pre> <p>Ниже описаны <a href="#Methods">методы</a>, доступные в объекте Console и приведены несколько примеров их <a href="#Usage">использования</a>.</p> <p>{{AvailableInWorkers}}</p> <h2 id="Методы">Методы</h2> <dl> <dt>{{domxref("Console.assert()")}}</dt> <dd>Выводит в консоль (имеется ввиду веб-консоль) сообщение и стек вызова метода, если первый аргумент <code>false</code>.</dd> <dt>{{domxref("Console.clear()")}}</dt> <dd>Очистка консоли.</dd> <dt>{{domxref("Console.count()")}}</dt> <dd>Выводит количество вызовов метода с определённой меткой (передаётся в параметре метода)</dd> </dl> <dl> <dt>{{domxref("Console.countReset()")}}</dt> <dd>Обнуляет значение счётчика с заданным значением.</dd> </dl> <dl> <dt>{{domxref("Console.debug()")}}</dt> <dd>Синоним для <code>log()</code></dd> <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt> <dd>Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволит вам посмотреть дочерние объекты и их свойства.</dd> <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt> <dd> <p>Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет - в виде JavaScript-объекта (как в виде "console.dir()").</p> </dd> <dt>{{domxref("Console.error()")}}</dt> <dd>Выводит сообщение об ошибке. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd> <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> <dd>Синоним для <code>error();</code></dd> <dt>{{domxref("Console.group()")}}</dt> <dd>Создаёт новую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группировку</a> сообщений, сдвигая все следующие выводимые строки вправо на один уровень. Для завершения <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы </a>вызовите <code>groupEnd()</code>.</dd> <dt>{{domxref("Console.groupCollapsed()")}}</dt> <dd>Создаёт новую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группировку </a>сообщений, сдвигая все следующие сообщения вправо на один уровень; в отличие от <code>group()</code> вывод происходи в свёрнутую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группу</a>, требующую раскрыть её вручную по кнопке. Для завершения <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы </a>вызовите <code>groupEnd()</code>.</dd> <dt>{{domxref("Console.groupEnd()")}}</dt> <dd>Выход из текущей <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы</a>.</dd> <dt>{{domxref("Console.info()")}}</dt> <dd>Информационное сообщение. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd> <dt>{{domxref("Console.log()")}}</dt> <dd>Общий метод вывода информации. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd> <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> <dd>Запускает профайлер, встроенный в браузер (например, <a href="/ru/docs/Tools/Производительность">Firefox performance tool</a>). Вы можете указать метку профиля (по желанию).</dd> <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> <dd>Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, <a href="/ru/docs/Tools/Производительность">Firefox performance tool</a>).</dd> <dt>{{domxref("Console.table()")}}</dt> <dd>Отображает табличные данные в виде таблицы.</dd> <dt>{{domxref("Console.time()")}}</dt> <dd>Запускает <a href="/ru/docs/Web/API/console#Timers">таймер</a> с именем из переданного параметра. Можно запустить одновременно до 10,000 таймеров на странице.</dd> <dt>{{domxref("Console.timeEnd()")}}</dt> <dd>Останавливает указанный <a href="/ru/docs/Web/API/console#Timers">таймер</a> и записывает в лог, сколько прошло секунд от его старта.</dd> <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> <dd>Ставит маркер в браузерном инструменте измерения производительности <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> или <a href="/ru/docs/Tools/Производительность/Waterfall">Waterfall</a>.</dd> <dt>{{domxref("Console.trace()")}}</dt> <dd>Вывод <a href="/ru/docs/Web/API/console#Stack_traces">трассировки стека</a>.</dd> <dt>{{domxref("Console.warn()")}}</dt> <dd>Выводит предупреждающее сообщение. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd> </dl> <h2 id="Usage">Использование</h2> <h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console"><a id="Outputting_text_to_the_console">Вывод текста в консоль</a></h3> <p>Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать, используя функции {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}}. Их вывод стилизован по-разному, и вы можете использовать фильтры, предоставляемые браузером, чтобы видеть только интересующие вас вещи.</p> <p>Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.</p> <h4 id="Вывод_одного_объекта">Вывод одного объекта</h4> <p>Простейший способ для вывода одного объекта:</p> <pre class="brush: js">var someObject = { str: "Some text", id: 5 }; console.log(someObject); </pre> <p>Вывод будет таким:</p> <pre>[09:27:13.475] ({str:"Some text", id:5})</pre> <h4 id="Вывод_нескольких_объектов">Вывод нескольких объектов</h4> <p>Вы можете выводить несколько объектов, просто перечисляя их в вызываемой функции:</p> <pre class="brush: js">var car = "Dodge Charger"; var someObject = {str:"Some text", id:5}; console.info("My first car was a", car, ". The object is: ", someObject);</pre> <p>Вывод будет таким:</p> <pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) </pre> <h4 id="Преобразование_строк_с_использованием_масок"><a id="Using_string_substitutions">Преобразование строк с использованием масок</a></h4> <p>Gecko 9.0 {{geckoRelease("9.0")}} ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:</p> <table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header">Подстановочный символ</td> <td class="header">Описание</td> </tr> <tr> <td>%o или %O</td> <td>Выводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода.</td> </tr> <tr> <td>%d или %i</td> <td>Выведет целое число. Поддерживается форматирование, например, console.log("АБВГД %.2d", 1.1) выведет число как две значащих цифры с лидирующим нулём: АБВГД 01</td> </tr> <tr> <td>%s</td> <td>Выводит строку.</td> </tr> <tr> <td>%f</td> <td>Выводит число с плавающей точкой. Поддерживается форматирование, например, console.log("АБВГД %.2f", 1.1) выведет число до двух знаков после запятой: АБВГД 1.10</td> </tr> </tbody> </table> <p>Каждая из масок выбирает следующий аргумент из списка параметров. Пример:</p> <pre>for (var i=0; i<5; i++) { console.log("Hello, %s. You've called me %d times.", "Bob", i+1); } </pre> <p>Вывод будет таким:</p> <pre>[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. </pre> <h4 id="Стилизация_вывода_консоли">Стилизация вывода консоли</h4> <p>Можно использовать директиву <code>"%c"</code> для применения стилей CSS при выводе в консоль. Часть текста до директивы не затрагивается стилем, а часть после - будет стилизована:</p> <pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px;");</pre> <div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> <div class="note"> <p><strong>Note</strong>: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.</p> </div> <div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> <p>Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> похожий, но создаёт новый блок свёрнутым, что потребует нажать на кнопку, для своего раскрытия для чтения.</p> <div class="note"><strong>Note:</strong> Свёрнутые группы не поддерживаются пока в Gecko; в настоящее время <code>метод groupCollapsed()</code> работает так же как и <code>group()</code>.</div> <p>Для выхода из текущей группы просто вызовите <code>console.groupEnd()</code>. Пример:</p> <pre class="brush: js">console.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"); </pre> <p>Вывод будет таким:</p> <p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> <p>{{h3_gecko_minversion("Timers", "10.0")}}</p> <p>Для расчёта длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте <code>console</code>. Для запуска таймера вызовите функцию <code>console.time</code><code>(),</code> при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите <code>console.timeEnd()</code>, передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.</p> <p>Рассмотрим пример:</p> <pre class="brush: js">console.time("answer time"); alert("Click to continue"); console.timeEnd("answer time"); </pre> <p>этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно <code>alert</code>:</p> <p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> <p>Заметьте, что имя таймера отображено и при старте таймера и при его остановке.</p> <div class="note"><strong>Заметьте:</strong> Это важно: если вы используете таймер для записи таймингов сетевого трафика, то таймер отобразит общее время для операции, в то время как время, отображаемое в панели "Сеть" это только время, требуемое для заголовка. Если у вас включено логирование времени тела ответа, то время ответа для заголовка и для тела должно соответствовать времени, которое вы у видите в консоли.</div> <h3 id="Трассировка_стека_вызова">Трассировка стека вызова</h3> <p>Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали {{domxref("console.trace()")}}. Например, такой код:</p> <pre>foo(); function foo() { function bar() { console.trace(); } bar(); } </pre> <p>Вывод в консоль будет похож на этот:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> <h2 id="Замечания">Замечания</h2> <ul> <li>По крайней мере в Firefox, если страница определяет свой объект <code>console</code>, то этот объект переопределяет объект <code>console</code>, встроенный в Firefox.</li> <li>До {{Gecko("12.0")}}, методы объекта <code>console</code> работали только, если открыта панель "Веб-консоль" (Web Console). Начиная с {{Gecko("12.0")}}, вывод кешируется до тех пор, пока панель Веб-консоль не откроется, и сразу отобразится в ней.</li> <li>Стоит отметить, что встроенный в Firefox объект <code>console</code> совместим с таким же объектом, предоставляемым плагином <a class="external" href="http://getfirebug.com/">Firebug</a>.</li> </ul> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li><a href="/ru/docs/Tools" title="Tools">Tools</a></li> <li><a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоль</a> - как Веб-консоль в Firefox обрабатывает вызовы API-консоли</li> <li><a href="/ru/docs/Tools/Remote_Debugging">Удалённая отладка </a>- как посмотреть вывод в консоль, когда цель отладки находится на мобильном устройстве</li> <li><a href="/ru/Firefox_OS/Using_the_App_Manager">Отладка приложений в Firefox OS</a> - использование Менеджера приложений для отладки приложений, запущенных на Firefox OS</li> <li><a href="/ru/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/ru/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> - как сделать логирование на устройствах на Firefox OS</li> </ul> <h3 id="Реализации_в_браузерах">Реализации в браузерах</h3> <ul> <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> <li><a href="http://msdn.microsoft.com/ru/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> </ul>