Веб-консоль:
Это часть замены старой Консоли Ошибок, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определенной веб-странице и показывает только связанную с ней информацию.
На другой половине Консоли ошибок заменили — Консоль браузера, которая выводит ошибки, предупреждения и сообщения от кода браузера и от дополнений.
{{EmbedYouTube("C6Cyrpkb25k")}}
Чтобы открыть Веб-консоль, выберите «Веб-консоль» в меню (Веб-)разработка в Меню Firefox (или меню Инструменты, если Вы настроили показывать панель меню или Вы работаете на Mac OS X), или нажмите её комбинацию клавиш CtrlShiftK (CommandOptionK в OS X).
Внизу окна браузера появится Набор инструментов с выбранной Веб-консолью (в Панели инструментов разработчика она называется просто «Консоль»):
Под панелью инструментов окна инструментов разработчика, интерфейс веб-консоли разделён на три части:
Большую часть Веб-консоли занимает поле вывода сообщений:
В поле вывода сообщений можно увидеть:
Каждое сообщение показывается в отдельной строке:
| Время (Time) | Время когда сообщение было записано. Начиная с Firefox 28 и новее, по умолчанию время сообщения не выводится. Но при необходимости можно изменить это поведение активировав вывод времени в настроках Инструментов. |
| Категория (Category) |
Категория: указывает на тип сообщения:
|
| Тип (Type) | Для все сообщений за исключением HTTP запросов и интерактивного input/output, иконка обозначает тип сообщения: ошибка (X), предупреждение(!), или просто информационное сообщение(i). |
| Сообщение (Message) | Само сообщение. |
| Количество повторов (Occurrences) | Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадет только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений. |
| Имя файля и номер строки (Filename:Line number) |
Для сообщений JavaScript, CSS, и консольного API, можно отследить строку с кодом которая стала причиной этого сообщения. Консоль также покажет ссылку на файл и номер строки ставшей причиной сообщения.. Начиная с Firefox 36, сообщение также включает в себя в номер колонки в строке. |
По умолчанию консоль очищается каждый раз когда вы открываете новую страницу или перезагружает текущую. Чтобы переопределить это поведение, активируйте опцию "Enable persistent logs" в Настройках.
HTTP запросы записываются следующим образом:
| Время (Time) | Время записи сообщения |
| Категория (Category) | Показывает что сообщение является HTTP запросом. |
| Метод (Method) | Вид запроса HTTP |
| URI | целевая ссылка URI |
| Резюме (Summary) | Версия и статус HTTP протокола, время выполнения запроса. |
Нажав мышкой на сообщение вы увидите следующее окно с более детальной информацией о запросе и ответе на него:
Прокрутка вниз показывает заголовки ответа. По умолчанию веб-консоль не записывает в журнал запрос и ответ тела: чтобы сделать это, войдите в контекстное меню веб-консоли и выберите "Log Request and Response Bodies", перезагрузите страницу, а затем вы увидите их в окне " Inspect Network Request ".
Только первый мегабайт данных регистрируется для каждого запроса или ответа тела, поэтому очень большие запросы и ответы будут обрезаны.
Сообщения журнала сети не отображаются по умолчанию. Используйте filtering чтобы показать их.
С Firefox 38 и далее, веб-консоль показывает, когда сетевой запрос был сделан как XMLHttpRequest:
Кроме того, с Firefox 38 и далее, вы можете filter сетевые запросы так, чтобы только видеть XMLHttpRequests.
Как и обычный журнал запроса сетевых сообщений, журналы запросы XMLHttpRequest не отображаются по умолчанию. Использовать filtering feature to show them.
JavaScript ошибки выглядят вот так:
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 это мета-ошибка для регистрации соответствующих сообщений о проблемах безопасности в веб-консоль. Если у вас есть идеи для полезных функций, таких как те, что обсуждаемые здесь, или заинтересованы в содействии, проверьте мета-ошибку и ее зависимости.
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
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
console.warn("a warning");
 |
| API | Message content |
|---|---|
info() |
The argument to
console.info("some info");
 |
| API | Message content |
|---|---|
count() |
The label supplied, if any, and the number of times this occurrence of 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
console.log("logged");
Если аргумент — это узел DOM, консоль выдаст его в виде инспектируемого rich text:
|
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 в выводе консоли. Смотрите Использование групп в консоли для более детальной информации.
Начиная с Firefox 31, вы можете использовать спецификатор формата "%c" для стилизации консольных сообщений:
console.log("%cMy stylish message", "color: red; font-style: italic");
Команды, отправленные браузеру через командную строку, как и результаты их выполнения, выводятся в поле вывода сообщений Веб-консоли в следуюем виде:
Темно-серая полоса служит индикатором того, что это сообщения ввода/вывода, тогда как направление стрелки обозначает разлчия между вводом и выводом.
Для фильтрации сообщений в поле вывода сообщений Веб-консоли используется панель вверху.
Чтобы увидеть только сообщения определённого типа, нажмите на кнопку, название которой соответствует желаемому типу сообщений ("Net", "CSS", и т.д.). Нажатие на основную часть кнопки включает/выключает отображение сообщений выбранного типа, тогда как нажатие на стрелку в правой части кнопки вызывает выпадающее меню с более специфическими вариантами фильтров для сообщений выбранного типа (например, вывод только предупреждений и сообщений об ошибках).
Начиная с Firefox 40, можно настроить опции фильтра "Logging", чтобы видеть сообщения от workers и add-ons:
Чтобы видеть только сообщения, содержащие определённую строку, введите её в поле с меткой "Filter output".
Наконец, Вы можете использовать эту панель для очистки всех выведенных сообщений.
Вы можете выполнять JavaScript-код в реальном времени, используя командную строку в Web-консоли.
Для ввода выражений просто введите в командную строку и нажмите Enter. Для ввода выражений, состоящих из нескольких строк, используйте комбинацию ShiftEnter вместо Enter.
Введённое выражение отобразится в окне сообщений, с выводом результата последующей строкой:
Вы можете получить доступ к переменным на странице; это могут быть как внутренние переменные например в объекте window , так и переменные, добавленные с помощью Javascript кода - например с помощью jQuery:
У командной строки есть функционал автоподстановки: начните вводить несколько начальных букв - и появится всплывающее окно с возможными вариантами завершения команды:
Нажмите Enter или Tab, чтобы принять нужную подсказку, перемещайтесь вверх/вниз с помощью стрелок к другим вариантам подсказок или просто продолжайте набирать текст, если Вам не подходит ни один из вариантов.
Консоль выдает подсказки из области видимости текущего активного фрейма. Это значит, что если Вы уже достигли точки останова в функции, то у Вас будут доступны автоподстановки только для объектов, которые находятся в одной области видимости с этой функцией.
Вы можете получать такие же подсказки для элементов массива:
Вы можете объявить ваши собственные переменные, и в последующем обращаться к ним:
Командная строка запоминает введённые ранее команды: чтобы перемещаться вперёд и назад по истории, используйте стрелки вниз и вверх на клавиатуре.
Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте clearHistory() helper function.
Если страница содержит встроенные iframes, Вы можете использовать команду cd() чтобы изменить область видимости в консоли на область определенного iframe, и после этого Вы сможете выполнять функции, которые содержит объект document в этом iframe. Существует три способа выбрать iframe используя cd():
Вы можете передать DOM-элемент для определенного iframe :
var frame = document.getElementById("frame1");
cd(frame);
Вы можете передать CSS селектор для определенного iframe:
cd("#frame1");
Вы можете передать глобальный объект Window для определенного iframe:
var frame = document.getElementById("frame1");
cd(frame.contentWindow);
Для переключения контекста видимости обратно к окну верхнего уровня, введите cd() без аргументов:
cd();
Предположим у нас есть документ, который содержит iframe:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
</body>
</html>
В этом iframe определена новая функция:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function whoAreYou() {
return "I'm frame1";
}
</script>
</head>
<body>
</body>
</html>
Вы можете переключиться на контекст iframe например так:
cd("#frame1");
Сейчас Вы сможете видеть, что глобальный объект Window это теперь наш iframe:
и сможете выполнить вызов функции, определенной в этом iframe:
{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}
When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:
The Web Console provides rich output for many object types, including the following:
Object |
 |
Array |
 |
Date |
 |
Promise |
Новое в Firefox 36
|
RegExp |
 |
Window |
 |
Document |
 |
Element |
 |
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..
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.
{{EmbedYouTube("G2hyxhPHyXo")}}
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:
{{ Page ("ru/docs/tools/Keyboard_shortcuts", "web-console") }}
{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}
