Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Веб-консоль

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

Веб-консоль:

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

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

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

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

Чтобы открыть Веб-консоль, выберите «Веб-консоль» в меню (Веб-)разработка в Меню Firefox (или меню Инструменты, если Вы настроили показывать панель меню или Вы работаете на Mac OS X), или нажмите её комбинацию клавиш CtrlShiftK (CommandOptionK в OS X).

Внизу окна браузера появится Набор инструментов с выбранной Веб-консолью (в Панели инструментов разработчика она называется просто «Консоль»):

Под панелью инструментов окна инструментов разработчика, интерфейс веб-консоли разделён на три части:

  • Панель инструментов: вдоль верхнего края — панель инструментов с кнопками типа «Сеть» ("Net"), «CSS», «JS», "Защита" ("Security"), "Журнал" ("Logging") и "Сервер". Эта панель — для фильтрации выводимых сообщений.
  • Командная строка: вдоль нижнего края — командная строка, в которую можно вводить выражения JavaScript
  • Поле вывода сообщений: между панелью инструментов и командной строкой, занимая большую часть окна, располагается пространство, в которое Веб-консоль выводит сообщения.

Поле вывода сообщений

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

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

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

Время (Time) Время когда сообщение было записано. Начиная с Firefox 28 и новее, по умолчанию время сообщения не выводится. Но при необходимости можно изменить это поведение активировав вывод времени в настроках Инструментов.
Категория (Category)

Категория: указывает на тип сообщения:

  • чёрный: HTTP-запрос
  • голубой: CSS: предупреждения/ошибки/лог
  • оранжевый: JavaScript: предупреждения/ошибки
  • красный: безопасность: предупреждения/ошибки
  • светло-серый: сообщения которые выводятся в консоль с помощью консольного API cс использование  кода JavaScript
  • Dark Gray: input/output из интерфейса интерпретатора командной строки
Тип (Type) Для все сообщений за исключением HTTP запросов и интерактивного input/output, иконка обозначает тип сообщения: ошибка (X), предупреждение(!), или просто информационное сообщение(i).
Сообщение (Message) Само сообщение.
Количество повторов (Occurrences) Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадет только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.
Имя файля и номер строки
(Filename:Line number)

Для сообщений JavaScript, CSS, и консольного API, можно отследить строку с кодом которая стала причиной этого сообщения. Консоль также покажет ссылку на файл и номер строки ставшей причиной сообщения..

Начиная с Firefox 36, сообщение также включает в себя в номер колонки в строке.

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

HTTP запросы

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

Время (Time) Время записи сообщения
Категория (Category) Показывает что сообщение является HTTP запросом.
Метод (Method) Вид запроса HTTP
URI целевая ссылка URI
Резюме (Summary) Версия и статус HTTP протокола, время выполнения запроса.

 

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

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

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

Сообщения журнала сети не отображаются по умолчанию. Используйте filtering  чтобы показать их.

XHR

С Firefox 38 и далее, веб-консоль показывает, когда сетевой запрос был сделан как XMLHttpRequest:

Кроме того, с Firefox 38 и далее, вы можете filter сетевые запросы так, чтобы только видеть XMLHttpRequests.

Как и обычный журнал запроса сетевых сообщений, журналы запросы XMLHttpRequest не отображаются по умолчанию. Использовать filtering feature to show them.

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

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

CSS ошибки, сообщения и переформатирование сообщения

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

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

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

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

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

  Переформатирования события регистрируются как "Журнал" сообщений, в отличие от ошибок CSS или предупреждений. По умолчанию они отключены. Вы можете включить их, нажав на кнопку "CSS" в toolbar и выбрать "Журнал".

Каждое сообщение маркируется "переформатирование" и показывает время, необходимое для выполнения переформатирования :

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

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

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

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

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

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

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

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

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

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

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

Сообщение Подробности
Blocked loading mixed active content Страница содержит смешанные активные доли: то есть, главная страница была подана через HTTPS, но попросил браузер для загрузки "активные доли", такие как скрипты, через HTTP. Браузер заблокировал активные доли. Смотрите Mixed Content чтобы узнать подробнее.
Blocked loading mixed display content Страница содержит смешанное отображение долей: то есть, главная страница была подана через HTTPS, но попросил браузер, чтобы загрузить "отображение долей", таких как изображения, через HTTP. Браузер заблокировал эти отображения долей. Смотрите Mixed Content чтобы узнать подробнее.
Loading mixed (insecure) active content on a secure page Страница содержит смешанные активные доли: то есть, главная страница была подана через HTTPS, но попросил браузер для загрузки "активные доли", такие как скрипты, через HTTP. Браузер загрузил эти активные доли. Смотрите Mixed Content чтобы узнать подробнее.
Loading mixed (insecure) display content on a secure page Страница содержит смешанное отображение долей: то есть, главная страница была подана через HTTPS, но попросил браузер, чтобы загрузить "отображение долей", таких как изображения, через HTTP. Браузер загрузил эти отображения долей. Смотрите Mixed Content чтобы узнать подробнее.
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. Смотрите Content Security Policy чтобы узнать подробнее.
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. Смотрите Content Security Policy чтобы узнать подробнее.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. Страницы, содержащие регистрационные формы должны быть поданы через HTTPS, а не HTTP.
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. Формы, содержащие поля пароля должны представить их через HTTPS, а не HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. плавающие фреймы, содержащие регистрационные формы должны быть поданы через HTTPS, а не HTTP.
The site specified an invalid Strict-Transport-Security header. Смотрите HTTP Strict Transport Security чтобы узнать подробнее.

Новое в Firefox 36

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

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

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

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

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

Сообщения консоли API


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

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

Сообщения об ошибках

API Message content
error()

The argument to error().

console.error("an error");

The console will display a full stack trace for errors:

function error() {
  console.error("an error");
}

function call_error() {
  error();
}

call_error();

exception() An alias for error().
assert()

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

console.assert(false, "My assertion always fails");

The console will display a full stack trace for assertions:

function assertion() {
  console.assert(false, "assertion failed");
}

function call_assertion() {
  assertion();
}

call_assertion();

Предупреждающие сообщения

API Message content
warn()

The argument to warn().

console.warn("a warning");

Информативные сообщения

API Message content
info()

The argument to info().

console.info("some info");

Журнальные сообщения

API Message content
count()

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

console.count(user.value);

dir()

Listing of the object's properties:

var user = document.getElementById('user');
console.dir(user);
dirxml() Aliased to log().
log()

The argument to log().

console.log("logged");

 

If the argument is a DOM node, the console gives you rich inspectable output for it:

table()

Display tabular data as a table.

time()

Notification that the specified timer started.

console.time("t");
timeEnd()

Duration for the specified timer.

console.timeEnd("t");
trace()

Stack trace:

console.trace();

Группировка сообщений

Вы можете использовать console.group() для создания indented groups in the console output. See Using groups in the console for more information on this.

Оформление сообщений

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

console.log("%cMy stylish message", "color: red; font-style: italic");

Input/output messages

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

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

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

You can use the toolbar along the top to constrain the results displayed.

To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).

From Firefox 40 onwards, you can adjust the "Logging" filter options so as to see messages from workers and add-ons:

Filtering by text

To see only messages that contain a specific string, type in the text box labeled "Filter output".

Clearing the log

Finally, you can use this toolbar to clear the log.

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

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

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

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

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

Accessing variables

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript like jQuery:

Autocomplete

The command line has autocomplete: enter the first few letters and a popup appears with possible completions:

Type Enter or Tab to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

You get autocomplete suggestions for array elements, as well:

Назначение переменных

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

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

The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.

From Firefox 39 onwards, this history is persisted across sessions. To clear the history, use the clearHistory() helper function.

Работа с iframes

If a page contains embedded iframes, you can use the cd() command to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using cd():

You can pass the iframe DOM element:

var frame = document.getElementById("frame1");
cd(frame);

You can pass a CSS selector that matches the iframe:

cd("#frame1");

You can pass the iframe's global window object:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

To switch the context back to the top-level window, call cd() with no arguments:

cd();

For example, suppose we have a document that embeds an iframe:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

The iframe defines a new function:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

You can switch context to the iframe like this:

cd("#frame1");

Now you'll see that the global window's document is the iframe:

And you can call the function defined in the iframe:

Helper commands

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

$()
Looks up a CSS selector string, returning the first element that matches. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.
$$()
Looks up a CSS selector string, returning a list of DOM nodes that match. This is a shortcut for document.querySelectorAll().

From Firefox 41, this method is no longer a shortcut for document.querySelectorAll() and instead returns an array of elements.
$0
The currently-inspected element in the page.
$_
New in Firefox 39. Stores the result of the last expression executed in the console's command line. For example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4.
$x()
Evaluates an XPath expression and returns an array of matching nodes.
keys()
Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.
values()
Given an object, returns a list of the values on that object; serves as a companion to keys().
clear()
Clears the console output area.
inspect()
Given an object, opens the object inspector for that object.
pprint()
Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
help()
Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
cd()
Switch JavaScript evaluation context to a different iframe in the page. See working with iframes.
copy()
New in Firefox 38. Copy the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.
clearHistory()
New in Firefox 39. Just like a normal command line, the console command line remembers the commands you've typed. Use this function to clear the console's command history.
Please refer to the Console API for more information about logging from content.

Rich output for objects

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

Type-specific rich output

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

Object
Array
Date
Promise

New in Firefox 36

RegExp
Window
Document
Element

Examining object properties

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

To dismiss this panel press Esc..

Highlighting and inspecting DOM nodes

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

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

The split console

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

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

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

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

  Windows OS X Linux
Открыть веб-консоль Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
Искать в панели показа сообщений Ctrl + F Cmd + F Ctrl + F
Очистить панель инспектирования объекта Escape Escape Escape
Переместить фокус на командную строку Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K

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

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

  Windows OS X Linux
Scroll to start of console output (new in Firefox 34, and only if the command line is empty) Home Home Home
Scroll to end of console output (new in Firefox 34, and only if the command line is empty) End End End
Прокрутить вверх вывод консоли Page up Page up Page up
Прокрутить вниз вывод консоли Page down Page down Page down
Переместиться назад по истории команд Up arrow Up arrow Up arrow
Переместиться вперёд по истории команд Down arrow Down arrow Down arrow
Перейти в начало строки Home Ctrl + A Ctrl + A
Перейти в конец строки End Ctrl + E Ctrl + E
Выполнить текущее выражение Enter Enter Enter
Добавить новую строку, чтобы войти в режим ввода многострочного выражения Shift + Enter Shift + Enter Shift + Enter

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

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

  Windows OS X Linux
Выбрать текущее предложение в окне автодополнения Tab Tab Tab
Закрыть окно автодополнения Escape Escape Escape
Перейти к предыдущему предложению в окне автодополнения вверх вверх вверх
Перейти к следующему предложению в окне автодополнения вниз вниз вниз
Прокрутить вверх предложения в окне автодополнения Page up Page up Page up
Прокрутить вниз предложения в окне автодополнения Page down Page down Page down
Scroll to start of autocomplete suggestions (new in Firefox 34) Home Home Home
Scroll to end of autocomplete suggestions (new in Firefox 34) End End End

Global shortcuts

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

  Windows OS X Linux
Увеличить размер шрифта Ctrl + + Cmd + + Ctrl + +
Уменьшить размер шрифта Ctrl + - Cmd + - Ctrl + -
Сбросить размер шрифта Ctrl + 0 Cmd + 0 Ctrl + 0

Метки документа и участники

 Внесли вклад в эту страницу: Tihoem, lfybc, kirillivan0ff, uleming, Aleksej, bassam, Sheppy
 Обновлялась последний раз: Tihoem,