path: root/files/ru/tools/web_console/index.html

---
title: Веб-консоль
slug: Tools/Web_Console
tags:
  - NeedsTranslation
  - Tools
  - TopicStub
  - Web Development
  - Веб-консоль
  - Отладка
  - Руководство
  - 'веб-разработка:инструменты'
translation_of: Tools/Web_Console
---
<div>{{ToolsSidebar}}</div>

<p>Веб-консоль:</p>

<ol>
 <li>Выводит информацию, связанную с веб-страницей: сетевые запросы, ошибки и предупреждения JavaScript и CSS, а также сообщения об ошибках, предупреждения и информационные сообщения, выдаваемые кодом JavaScript, выполняющимся в контексте страницы;</li>
 <li>Позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в её контексте.</li>
</ol>

<p>Это часть замены старой <a href="/ru/docs/Error_Console" title="ru/docs/Error_Console">Консоли Ошибок</a>, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определённой веб-странице и показывает только связанную с ней информацию.</p>

<p>На другой половине Консоли ошибок заменили — <a href="/ru/docs/Tools/Browser_Console" title="/ru/docs/Tools/Browser_Console">Консоль браузера</a>, которая выводит ошибки, предупреждения и сообщения от кода браузера и от дополнений.</p>

<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>

<h2 id="Opening_the_Web_Console" name="Opening_the_Web_Console">Как открыть Веб Консоль</h2>

<p>Чтобы открыть Веб-консоль, выберите «Веб-консоль» в меню (Веб-)разработка в Меню Firefox (или меню Инструменты, если Вы настроили показывать панель меню или Вы работаете на Mac OS X), или нажмите её комбинацию клавиш <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> в OS X).</p>

<p>Внизу окна браузера появится <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window" title="/ru/docs/Tools/DevTools_Window">Набор инструментов</a> с выбранной Веб-консолью (в <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window#Toolbar" title="/ru/docs/Tools/DevTools_Window#Toolbar">Панели инструментов разработчика</a> она называется просто «Консоль»):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Под <a href="/ru/docs/Tools/DevTools_Window#Toolbar" title="/ru/docs/Tools/DevTools_Window#Toolbar">панелью инструментов окна инструментов разработчика</a>, интерфейс веб-консоли разделён на три части:</p>

<ul>
 <li><a href="#filtering-and-searching" title="#filtering-and-searching">Панель инструментов</a>: вдоль верхнего края — панель инструментов с кнопками типа «Сеть» ("Net"), «CSS», «JS», "Защита" ("Security"), "Журнал" ("Logging") и "Сервер". Эта панель — для фильтрации выводимых сообщений.</li>
 <li><a href="#command-line" title="#command-line">Командная строка</a>: вдоль нижнего края — командная строка, в которую можно вводить выражения JavaScript</li>
 <li><a href="#message-display-pane" title="#message-display-pane">Поле вывода сообщений</a>: между панелью инструментов и командной строкой, занимая большую часть окна, располагается пространство, в которое Веб-консоль выводит сообщения.</li>
</ul>

<h2 id="Поле_вывода_сообщений"><a name="message-display-pane">Поле вывода сообщений</a></h2>

<p>Большую часть Веб-консоли занимает поле вывода сообщений:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>В поле вывода сообщений можно увидеть:</p>

<ul>
 <li><a href="/ru/docs/Tools/Web_Console#HTTP_requests">HTTP-запросы</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#JavaScript_errors_and_warnings">предупреждения и ошибки JavaScript</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#CSS_errors.2C_warnings.2C_and_reflow_messages">предупреждения, ошибки и события перерисовки CSS (event reflow)</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Security_warnings_and_errors">предупреждения и ошибки безопасности</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#console_API_messages">вызовы консольного API</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output сообщения</a>: команды посылаемые в браузер через командную строку Веб консоли, и их результат выполнения.</li>
</ul>

<p>Каждое сообщение показывается в отдельной строке:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <td><strong>Время (Time)</strong></td>
   <td>Время когда сообщение было записано. Начиная с Firefox 28 и новее, по умолчанию время сообщения не выводится. Но при необходимости можно изменить это поведение активировав вывод времени в <a href="/ru/docs/Tools_Toolbox#Settings">настройках Инструментов</a>.</td>
  </tr>
  <tr>
   <td><strong>Категория (Category)</strong></td>
   <td>
    <p><strong>Категория</strong>: указывает на тип сообщения:</p>

    <ul style="margin-left: 40px;">
     <li><strong>чёрный</strong>: HTTP-запрос</li>
     <li><span style="color: #0099ff;"><strong>голубой</strong></span>: CSS: предупреждения/ошибки/лог</li>
     <li><strong><span style="color: #ff8c00;">оранжевый</span></strong>: JavaScript: предупреждения/ошибки</li>
     <li><span style="color: #ff0000;"><strong>красный</strong></span>: безопасность: предупреждения/ошибки</li>
     <li><span style="color: #a9a9a9;"><strong>светло-серый</strong></span>: сообщения которые выводятся в консоль с помощью <a href="/ru/docs/Web/API/console" title="/ru/docs/Web/API/console">консольного API </a>c использованием кода JavaScript</li>
     <li><span style="color: #696969;"><strong>Dark Gray</strong></span>: input/output из интерфейса <a href="/ru/docs/Tools/Web_Console#The_command_line_interpreter">интерпретатора командной строки</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><strong>Тип (Type)</strong></td>
   <td>Для все сообщений за исключением HTTP запросов и интерактивного input/output, иконка обозначает тип сообщения: ошибка (X), предупреждение(!), или просто информационное сообщение(i).</td>
  </tr>
  <tr>
   <td><strong>Сообщение (Message)</strong></td>
   <td>Само сообщение.</td>
  </tr>
  <tr>
   <td><strong>Количество повторов (Occurrences)</strong></td>
   <td>Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадёт только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.</td>
  </tr>
  <tr>
   <td><strong>Имя файла и номер строки<br>
    (Filename:Line number)</strong></td>
   <td>
    <p>Для сообщений JavaScript, CSS, и консольного API, можно отследить строку с кодом которая стала причиной этого сообщения. Консоль также покажет ссылку на файл и номер строки ставшей причиной сообщения..</p>

    <p>Начиная с Firefox 36, сообщение также включает в себя в номер колонки в строке.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>По умолчанию консоль очищается каждый раз когда вы открываете новую страницу или перезагружает текущую. Чтобы переопределить это поведение, активируйте опцию "Enable persistent logs" в <a href="/ru/docs/Tools_Toolbox#Common_preferences">Настройках</a>.</p>

<h3 id="HTTP_запросы">HTTP запросы</h3>

<p>HTTP запросы записываются следующим образом:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <td>Время (Time)</td>
   <td>Время записи сообщения</td>
  </tr>
  <tr>
   <td>Категория (Category)</td>
   <td>Показывает что сообщение является HTTP запросом.</td>
  </tr>
  <tr>
   <td>Метод (Method)</td>
   <td>Вид запроса HTTP</td>
  </tr>
  <tr>
   <td><strong>URI</strong></td>
   <td>целевая ссылка URI</td>
  </tr>
  <tr>
   <td>Резюме (Summary)</td>
   <td>Версия и статус HTTP протокола, время выполнения запроса.</td>
  </tr>
 </tbody>
</table>



<p>Нажав мышкой на сообщение вы увидите следующее окно с более детальной информацией о запросе и ответе на него:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="display: block; height: 502px; margin-left: auto; margin-right: auto; width: 430px;"> <span id="result_box" lang="ru"><span>Прокрутка</span> <span>вниз</span> <span>показывает</span> <span>заголовки ответа</span><span>.</span> <span>По умолчанию</span> <span>веб-консоль</span> <span>не записывает в журнал</span> <span>запрос и ответ</span> <span>тела</span><span>: чтобы сделать это</span><span>, войдите в</span> <span>контекстное меню</span> <span>веб-консоли</span> <span>и выберите</span> <span>"</span></span>Log Request and Response Bodies<span lang="ru"><span>",</span> <span>перезагрузите страницу</span><span>, а затем</span> <span>вы увидите их</span> <span>в окне "</span> </span>Inspect Network Request<span lang="ru"> <span>"</span><span>.</span></span></p>

<p><span id="result_box" lang="ru"><span>Только первый</span> <span>мегабайт</span> <span>данных</span> <span>регистрируется</span> <span>для каждого</span> <span>запроса или ответа</span> <span>тела, поэтому</span> <span>очень большие</span> <span>запросы и ответы</span> <span>будут обрезаны</span><span>.</span></span></p>

<p><span id="result_box" lang="ru"><span>Сообщения журнала</span> <span>сети</span> <span>не отображаются</span> <span>по умолчанию.</span> <span>Используйте</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> <span class="short_text" id="result_box" lang="ru"><span> чтобы</span> <span>показать их</span></span>.</p>

<h4 id="XHR">XHR</h4>

<p><span id="result_box" lang="ru"><span>С</span> <span>Firefox</span> <span>38</span> <span>и далее,</span> <span>веб-консоль</span> <span>показывает, когда</span> <span>сетевой запрос</span> <span>был сделан</span> <span>как</span></span> <a href="/ru/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>

<p><span class="short_text" id="result_box" lang="ru"><span>Кроме того, с</span> <span>Firefox</span> <span>38</span> <span>и далее,</span> <span>вы можете</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filter</a> <span class="short_text" id="result_box" lang="ru"><span>сетевые запросы</span> <span>так</span><span>, чтобы</span> <span>только</span> <span>видеть</span></span> XMLHttpRequests.</p>

<p><span id="result_box" lang="ru"><span>Как и обычный</span> <span>журнал</span> <span>запроса</span> <span>сетевых сообщений</span><span>,</span> <span>журналы</span> <span>запросы XMLHttpRequest</span> <span>не отображаются</span> <span>по умолчанию.</span> <span>Использовать</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> feature to show them.</p>

<h3 id="JavaScript_ошибки_и_предупреждения">JavaScript ошибки и предупреждения</h3>

<p>JavaScript ошибки выглядят вот так:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="CSS_ошибки_сообщения_и_переформатирование_сообщения">CSS ошибки, сообщения и <span id="result_box" lang="ru"><span>переформатирование</span></span> сообщения</h3>

<p>CSS сообщения выглядят так:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>По умолчанию, CSS предупреждения и регистрирования сообщений не отображаются.</p>

<h4 id="Отправка-события">Отправка-события</h4>

<p><span id="result_box" lang="ru"><span>Веб-консоль</span> <span>также регистрирует</span> <span>события</span> </span> <span id="result_box" lang="ru"><span>переформатированные</span></span> <span lang="ru"><span> в</span> <span>CSS категорию</span><span>.</span> </span> <span id="result_box" lang="ru"><span>Переформатирование</span></span> <span lang="ru"> <span>это</span> <span>название</span> <span>операции,</span><span> которой браузер</span> <span>вычисляет</span> <span>расположение</span> <span>части или всей страницы</span><span>.</span> </span> <span id="result_box" lang="ru"><span>Переформатирования</span></span><span lang="ru"> <span>происходят, когда</span> <span>изменение</span> <span>произошли</span> <span>на странице, чтобы</span> <span>браузер</span> <span>считал, что</span> <span>влияет на</span> <span>расположение</span><span>.</span></span> <span lang="ru"><span>.</span> <span>Многие</span> <span>события могут вызвать</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>, в том числе</span><span>:</span> <span>изменение размера окна браузера</span><span>, активируя</span> <span>как</span> </span> <span class="short_text" id="result_box" lang="ru"><span>псевдоклассы</span></span> <a href="/ru/docs/Web/CSS/:hover">:hover</a>, <span class="short_text" id="result_box" lang="ru"><span>или</span> <span>манипулирование</span></span> DOM в JavaScript.</p>

<p><span id="result_box" lang="ru"><span>Поскольку</span> <span>переформатирования</span></span><span lang="ru"> <span>могут</span> <span>быть дорогостоящими вычислениями</span><span> и</span> <span>непосредственно влияют на</span> <span>пользовательский интерфейс</span><span>,</span> <span>они могут иметь</span> <span>большое влияние на</span> <span>отзывчивость</span> <span>веб-сайта или</span> <span>веб-приложения</span><span>.</span> <span>При </span></span> <span id="result_box" lang="ru"><span>переформатировании</span></span><span lang="ru"> <span>события</span> <span>веб-консоль</span> <span>может дать вам</span> <span>понять в какой момент оно начинает</span><span> инициацию</span><span>,</span> <span>как долго</span> <span>они принимаются к</span> <span>выполнению и</span><span>,</span> <span>если</span> <span>есть</span> </span><span id="result_box" lang="ru"><span>переформатирования</span></span> <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> <span class="short_text" id="result_box" lang="ru"><span>сработавшие</span> <span>от</span></span> JavaScript, то <span class="short_text" id="result_box" lang="ru"><span>какой код</span> <span>вызвал</span> <span>их</span></span> .</p>

<p>  <span id="result_box" lang="ru"><span>Переформатирования</span></span> <span lang="ru"><span>события регистрируются</span> <span>как</span> <span>"Журнал" сообщений</span><span>, в отличие от</span> <span>ошибок</span> <span>CSS</span> <span>или предупреждений</span><span>.</span> <span>По умолчанию они</span> <span>отключены</span><span>.</span> <span>Вы можете включить</span> <span>их, нажав на</span> <span>кнопку</span> <span>"CSS</span><span>"</span> <span>в</span></span> <a href="#filtering-and-searching">toolbar</a> и выбрать "Журнал".</p>

<p><span id="result_box" lang="ru"><span>Каждое сообщение</span> <span>маркируется "</span><span>переформатирование</span><span>"</span> <span>и показывает</span> <span>время, необходимое для</span> <span>выполнения</span> <span>переформатирования</span></span> :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;"> <span id="result_box" lang="ru"><span>Если</span> <span>переформатирование</span></span><span lang="ru"> <span>является синхронным</span> </span><span id="result_box" lang="ru"><span>переформатированием</span></span><span lang="ru"><span>, вызванным</span> <span>JavaScript</span><span>,</span> <span>будет также показана</span> <span>ссылка на</span> <span>строку кода</span><span>, инициировавшего</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>:</span></span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;"> <span class="short_text" id="result_box" lang="ru"><span>Нажмите на ссылку</span><span>, чтобы открыть файл</span> <span>в</span></span> <a href="/ru/docs/Tools/Debugger">Debugger</a>.</p>

<h4 id="Синхронные_и_асинхронные_переформатирования"><a name="synchronous-and-asynchronous-reflows"></a> <span class="short_text" id="result_box" lang="ru"><span>Синхронные</span> <span>и асинхронные</span> </span><span id="result_box" lang="ru"><span>переформатирования</span></span> <a name="synchronous-and-asynchronous-reflows"></a></h4>

<p><span id="result_box" lang="ru"><span>Если</span> сделанное <span>изменение</span> <span>аннулирует</span> <span>текущую схему</span> <span>-</span> <span>например,</span> <span>окно браузера</span> <span>изменяется</span> <span>или</span> <span>некоторые</span> <span>JavaScript</span> <span>изменяют</span> <span>CSS</span> <span>элемент -</span> <span>макет</span> <span>не пересчитывается</span> <span>немедленно.</span> <span>Вместо</span></span><span lang="ru"> <span>переформатирования </span></span><span lang="ru"> <span>в асинхронном режиме</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>решает что это</span> <span>должно быть сделано</span> <span>(как правило</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>перекрашивается</span><span>)</span><span>.</span> <span>Таким образом,</span> <span>браузер может</span> <span>накопить</span> <span>коллекцию</span> <span>основанную на недействующих </span><span>изменениях</span> <span>и</span> <span>пересчитать</span> <span>их эффект</span> <span>сразу</span><span>.</span></span></p>

<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript код</span> <span>читает что</span> <span>стиль</span><span> был изменён</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчётом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет  вызвать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p>

<pre class="brush: js notranslate">var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;</pre>

<p><span id="result_box" lang="ru"><span>Из-за этого,</span> <span>эта хорошая</span> <span>идея избежать</span> <span>чередования</span> <span>чтения и записи</span> <span>вызовов выше указанных основ</span> <span>стилей</span><span>, когда</span> <span>воздействует</span> <span>DOM</span><span>, потому что</span> <span>каждый раз, когда</span> <span>вы возвращаете</span> <span>стиль, который</span> <span>был</span> <span>недействительным</span> <span>в ранее вызванной</span> <span>записи</span><span>,</span> <span>вы принуждаете к </span> <span>синхронному</span> <span>переформатированию</span></span><span lang="ru"><span>.</span></span></p>

<h3 id="Предупреждения_безопасности_и_ошибки"><span class="short_text" id="result_box" lang="ru"><span>Предупреждения безопасности и</span> <span>ошибки</span></span></h3>

<p><span id="result_box" lang="ru"><span>Предупреждения безопасности и</span> <span>ошибки</span> <span>выглядят следующим образом</span></span> :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"> <span id="result_box" lang="ru"><span>Сообщения</span> <span>безопасности</span><span> показанные в </span><span>веб-консоли помогают разработчикам</span> <span>найти</span> <span>потенциальные или фактические</span> <span>уязвимости в</span> <span>своих сайтах</span><span>.</span> <span>Кроме того, многие</span> <span>из этих сообщений</span> <span>помогают обучающимся</span> <span>разработчикам</span><span>, потому что они</span> <span>заканчиваются</span> <span>"Подробной</span><span>" ссылкой ведущей</span><span> вас</span> <span>на страницу</span> <span>со</span> <span>справочной информации и рекомендациями</span> <span>для смягчения</span> <span>этой проблемы.</span></span></p>

<p><span id="result_box" lang="ru"><span>Полный список</span> <span>сообщений</span> <span>безопасности</span> <span>выглядит следующим образом</span></span> :</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <th scope="col">Сообщение</th>
   <th scope="col">Подробности</th>
  </tr>
  <tr>
   <td>Blocked loading mixed active content</td>
   <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанные</span><span> активные доли</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span> <span>для загрузки</span> <span>"</span><span>активные доли</span><span>"</span><span>, такие как</span> <span>скрипты</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>заблокировал</span> <span>активные доли</span></span>. Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Blocked loading mixed display content</td>
   <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанное отображение долей</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span><span>, чтобы загрузить</span> <span>"</span><span>отображение долей</span><span>"</span><span>,</span> <span>таких как изображения</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>заблокировал</span> <span>эти отображения долей</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Loading mixed (insecure) active content on a secure page</td>
   <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанные</span><span> активные доли</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span> <span>для загрузки</span> <span>"</span><span>активные доли</span><span>"</span><span>, такие как</span> <span>скрипты</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>загрузил эти</span> <span>активные доли</span></span><span lang="ru"><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Loading mixed (insecure) display content on a secure page</td>
   <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанное отображение долей</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span><span>, чтобы загрузить</span> <span>"</span><span>отображение долей</span><span>"</span><span>,</span> <span>таких как изображения</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>загрузил</span> <span>эти отображения долей</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td>
   <td>Смотрите <a href="/ru/docs/Security/CSP">Content Security Policy</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td>
   <td>Смотрите <a href="/ru/docs/Security/CSP">Content Security Policy</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td>
   <td><span id="result_box" lang="ru"><span>Страницы, содержащие</span> <span>регистрационные</span> <span>формы</span> <span>должны</span> <span>быть поданы</span> <span>через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td>
   <td><span id="result_box" lang="ru"><span>Формы</span><span>, содержащие</span> <span>поля пароля</span> <span>должны представить</span> <span>их через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td>
   <td><span id="result_box" lang="ru"><span>плавающие фреймы</span><span>, содержащие</span> <span>регистрационные</span> <span>формы</span> <span>должны</span> <span>быть поданы</span> <span>через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>The site specified an invalid Strict-Transport-Security header.</td>
   <td>Смотрите <a href="/ru/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>
    <div class="geckoVersionNote">
    <p>Новое в Firefox 36</p>
    </div>

    <p>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.</p>
   </td>
   <td>
    <p><span id="result_box" lang="ru"><span>Сайт</span> <span>использует сертификат</span> <span>чья подпись</span> <span>использует</span> <span>алгоритм хеширования</span> <span>SHA-1</span><span>.</span></span></p>

    <p><span id="result_box" lang="ru"><span>SHA-</span><span>1</span> <span>по-прежнему</span> <span>до сих пор широко</span> <span>используется</span> <span>в сертификатах</span><span>,</span> <span>но он</span> <span>начинает</span> <span>показывать свой возраст</span><span>.</span> <span>Веб-сайтам и</span> <span>центрам сертификации</span><span> рекомендуется</span> <span>перейти на</span> <span>более сильные</span> <span>хэш-алгоритмы</span> <span>в</span> <span>будущем</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> статью рассказывающую подробнее.</p>

    <p><span id="result_box" lang="ru"><span>Обратите внимание</span><span>, что сертификат</span> <span>SHA-</span><span>1</span> <span>не</span> <span>может</span> <span>быть</span> <span>собственным сертификат</span>ом <span>вашего сайта</span><span>,</span> <span>но может</span> <span>свидетельствовать о</span> <span>принадлежности к</span> <span>сертификации, которая</span> <span>использовалась</span> <span>для подписи сертификата</span> <span>вашего сайта</span><span>.</span></span></p>
   </td>
  </tr>
 </tbody>
</table>

<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> <span id="result_box" lang="ru"><span>это</span> <span>мета-</span><span>ошибка</span> <span>для регистрации</span> <span>соответствующих</span> <span>сообщений о проблемах безопасности</span> <span>в веб-консоль</span><span>.</span> <span>Если у вас есть</span> <span>идеи для</span> <span>полезных</span> <span>функций, таких как</span> <span>те, что</span> <span>обсуждаемые здесь</span><span>,</span> <span>или заинтересованы</span> <span>в содействии</span><span>, проверьте</span> <span>мета-ошибку</span> <span>и её зависимости</span><span>.</span></span></p>

<h3 id="Сообщения_консоли_API"><span class="short_text" id="result_box" lang="ru"><span>Сообщения</span> <span>консоли API</span></span></h3>

<p><br>
 <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>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 <a href="/ru/docs/Web/API/console">documentation page</a>.</p>

<p>From Firefox 40 onwards, the Web Console can display console messages from <a href="/ru/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/ru/docs/Web/API/ServiceWorker_API">Service Workers</a>, and <a href="/ru/docs/Mozilla/ChromeWorkers">Chrome Workers</a>. Check the relevant options in the <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">Filtering dropdown menu</a> to see them.</p>

<h4 id="Сообщения_об_ошибках">Сообщения об ошибках</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.error"><code>error()</code></a></td>
   <td>
    <p>The argument to <code>error()</code>.</p>

    <pre class="brush: js notranslate">
console.error("an error");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;">
    <p>The console will display a full stack trace for errors:</p>

    <pre class="brush: js notranslate">
function error() {
  console.error("an error");
}

function call_error() {
  error();
}

call_error();</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7745/console-error-stack.png" style="display: block; height: 109px; margin-left: auto; margin-right: auto; width: 497px;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.exception"><code>exception()</code></a></td>
   <td>An alias for <code>error()</code>.</td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.assert"><code>assert()</code></a></td>
   <td>
    <p>If the assertion succeeds, nothing. If the assertion fails, the argument:</p>

    <pre class="brush: js notranslate">
console.assert(false, "My assertion always fails");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;">
    <p>The console will display a full stack trace for assertions:</p>

    <pre class="brush: js notranslate">
function assertion() {
  console.assert(false, "assertion failed");
}

function call_assertion() {
  assertion();
}

call_assertion();</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7743/console-assert-stack.png" style="display: block; height: 111px; margin-left: auto; margin-right: auto; width: 497px;"></p>
   </td>
  </tr>
 </tbody>
</table>

<h4 id="Предупреждающие_сообщения">Предупреждающие сообщения</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.warn"><code>warn()</code></a></td>
   <td>
    <p>The argument to <code>warn()</code>.</p>

    <pre class="brush: js notranslate">
console.warn("a warning");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Информативные_сообщения">Информативные сообщения</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.info"><code>info()</code></a></td>
   <td>
    <p>The argument to <code>info()</code>.</p>

    <pre class="brush: js notranslate">
console.info("some info");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Журнальные_сообщения">Журнальные сообщения</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.count"><code>count()</code></a></td>
   <td>
    <p>The label supplied, if any, and the number of times this occurrence of <code>count()</code> has been called with the given label:</p>

    <pre class="brush: js notranslate">
console.count(user.value);</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.dir"><code>dir()</code></a></td>
   <td>
    <p>Listing of the object's properties:</p>

    <pre class="brush: js notranslate">
var user = document.getElementById('user');
console.dir(user);</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></td>
   <td>Aliased to <code>log()</code>.</td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.log"><code>log()</code></a></td>
   <td>
    <p>The argument to <code>log()</code>.</p>

    <pre class="brush: js notranslate">
console.log("logged");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;">


    <p>Если аргумент — это узел DOM, консоль выдаст его в виде <a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">инспектируемого</a> rich text:</p>

    <p><img alt="" src="https://mdn.mozillademos.org/files/10807/console-log.png" style="display: block; height: 79px; margin-left: auto; margin-right: auto; width: 458px;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.table"><code>table()</code></a></td>
   <td>
    <p>Display tabular data as a table.</p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.time"><code>time()</code></a></td>
   <td>
    <p>Notification that the specified timer started.</p>

    <pre class="brush: js notranslate">
console.time("t");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></td>
   <td>
    <p>Duration for the specified timer.</p>

    <pre class="brush: js notranslate">
console.timeEnd("t");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.trace"><code>trace()</code></a></td>
   <td>
    <p>Stack trace:</p>

    <pre class="brush: js notranslate">
console.trace();</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Группировка_сообщений">Группировка сообщений</h4>

<p>Вы можете использовать <code>console.group()</code> для создания indented groups в выводе консоли. Смотрите <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">Использование групп в консоли</a> для более детальной информации.</p>

<h4 id="Оформление_сообщений">Оформление сообщений</h4>

<p>Начиная с Firefox 31, вы можете использовать спецификатор формата <code>"%c"</code> для стилизации консольных сообщений:</p>

<pre class="brush: js notranslate">console.log("%cMy stylish message", "color: red; font-style: italic");</pre>

<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div>

<h3 id="Сообщения_вводавывода">Сообщения ввода/вывода</h3>

<p>Команды, отправленные браузеру через <a href="#command-line">командную строку</a>, как и результаты их выполнения, выводятся в <a href="#message-display-pane">поле вывода сообщений</a> Веб-консоли в следующем виде:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">Темно-серая полоса служит индикатором того, что это сообщения ввода/вывода, тогда как направление стрелки обозначает различия между вводом и выводом.</p>

<h3 id="Фильтрация_и_поиск"><a name="filtering-and-searching">Фильтрация и поиск</a></h3>

<h4 id="Фильтрация_по_типу">Фильтрация по типу</h4>

<p>Для фильтрации сообщений в <a href="#message-display-pane">поле вывода сообщений</a> Веб-консоли используется панель вверху.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;">Чтобы увидеть только сообщения определённого типа, нажмите на кнопку, название которой соответствует желаемому типу сообщений ("Net", "CSS", и т.д.). Нажатие на основную часть кнопки включает/выключает отображение сообщений выбранного типа, тогда как нажатие на стрелку в правой части кнопки вызывает выпадающее меню с более специфическими вариантами фильтров для сообщений выбранного типа (например, вывод только предупреждений и сообщений об ошибках).</p>

<p>Начиная с Firefox 40, можно настроить опции фильтра "Logging", чтобы видеть сообщения от workers и add-ons:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10805/console-worker-filtering.png" style="display: block; height: 355px; margin-left: auto; margin-right: auto; width: 855px;"></p>

<h4 id="Фильтрация_по_тексту">Фильтрация по тексту</h4>

<p>Чтобы видеть только сообщения, содержащие определённую строку, введите её в поле с меткой "Filter output".</p>

<h4 id="Очистка_содержимого">Очистка содержимого</h4>

<p>Наконец, Вы можете использовать эту панель для очистки всех выведенных сообщений.</p>

<dl>
</dl>

<h2 id="Интерпретатор_командной_строки"><a name="command-line">Интерпретатор командной строки</a></h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Ввод_выражений">Ввод выражений</h3>

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

<p>Введённое выражение отобразится в окне сообщений, с выводом результата последующей строкой:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Получение_переменных">Получение переменных</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Автоподстановка">Автоподстановка</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Нажмите <kbd>Enter</kbd> или <kbd>Tab</kbd>, чтобы принять нужную подсказку, перемещайтесь вверх/вниз с помощью стрелок к другим вариантам подсказок или просто продолжайте набирать текст, если Вам не подходит ни один из вариантов.</p>

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Объявление_переменных">Объявление переменных</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="История_команд">История команд</h3>

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

<p>Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте <code>clearHistory()</code> <a href="/ru/docs/Tools/Web_Console#Helper_commands">helper function</a>.</p>

<h3 id="Работа_с_iframes">Работа с iframes</h3>

<p>Если страница содержит встроенные <a href="/ru/docs/Web/HTML/Element/iframe">iframes</a>, Вы можете использовать команду <code>cd()</code> чтобы изменить область видимости в консоли на область определённого iframe, и после этого Вы сможете выполнять функции, которые содержит объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Document">document</a> в этом iframe. Существует три способа выбрать iframe используя <code>cd()</code>:</p>

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

<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
cd(frame);</pre>

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

<pre class="brush: js notranslate">cd("#frame1");</pre>

<p>Вы можете передать глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> для определённого iframe:</p>

<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
cd(frame.contentWindow);
</pre>

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

<pre class="brush: js notranslate">cd();</pre>

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

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

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

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script&gt;
      function whoAreYou() {
        return "I'm frame1";
      }
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

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

<pre class="brush: js notranslate">cd("#frame1");</pre>

<p>Сейчас Вы сможете видеть, что глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> это теперь наш iframe:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">и сможете выполнить вызов функции, определённой в этом iframe:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>

<h3 id="Helper_commands">Helper commands</h3>

<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>

<h2 id="Rich_output_for_objects">Rich output for objects</h2>

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

<ul>
 <li><a href="/ru/docs/Tools/Web_Console#Type-specific_rich_output">provides extra information for certain types</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Examining_object_properties">enables detailed examination of the object's properties</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">provides richer information for DOM elements, and enables you to select them in the Inspector</a></li>
</ul>

<h3 id="Type-specific_rich_output">Type-specific rich output</h3>

<p>The Web Console provides rich output for many object types, including the following:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>Object</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Array</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Date</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Promise</code></td>
   <td>
    <div class="geckoVersionNote">
    <p>Новое в Firefox 36</p>
    </div>

    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
   </td>
  </tr>
  <tr>
   <td><code>RegExp</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Window</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Document</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Element</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
 </tbody>
</table>

<h3 id="Examining_object_properties">Examining object properties</h3>

<p>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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press <kbd>Esc</kbd>..</p>

<h3 id="Выделение_и_инспектирование_узлов_DOM">Выделение и инспектирование узлов DOM</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">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 <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector">Inspector</a> with that node selected.</p>

<h2 id="The_split_console">The split console</h2>

<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>

<p>You can use the console alongside other tools. While you're in another tool in the Toolbox, just press <kbd>Esc</kbd> or press the "Toggle split console" button in the <a href="/ru/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p>

<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Клавиши_быстрого_вызова">Клавиши быстрого вызова</h2>

<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "web-console") }}</p>

<h3 id="Global_shortcuts">Global shortcuts</h3>

<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>