Веб-консоль

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

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

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

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

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

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

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

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

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

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

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

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

• HTTP-запросы
• предупреждения и ошибки JavaScript
• предупреждения, ошибки и события перерисовки CSS (event reflow)
• предупреждения и ошибки безопасности
• вызовы консольного API
• Input/output сообщения: команды посылаемые в браузер через командную строку Веб консоли, и их результат выполнения.

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

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

HTTP запросы

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, потому что каждый раз, когда вы возвращаете стиль, который был недействительным в ранее вызваной записи, вы принуждаете к  синхронному переформатированию.

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

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

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

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

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:

• provides extra information for certain types
• enables detailed examination of the object's properties
• provides richer information for DOM elements, and enables you to select them in the Inspector

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:

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

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

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

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

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

Global shortcuts

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