From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/tools/web_console/helpers/index.html | 66 ++ files/ru/tools/web_console/index.html | 719 +++++++++++++++++++++ .../web_console/opening_the_web_console/index.html | 23 + .../ru/tools/web_console/split_console/index.html | 18 + 4 files changed, 826 insertions(+) create mode 100644 files/ru/tools/web_console/helpers/index.html create mode 100644 files/ru/tools/web_console/index.html create mode 100644 files/ru/tools/web_console/opening_the_web_console/index.html create mode 100644 files/ru/tools/web_console/split_console/index.html (limited to 'files/ru/tools/web_console') diff --git a/files/ru/tools/web_console/helpers/index.html b/files/ru/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..fd55c2d723 --- /dev/null +++ b/files/ru/tools/web_console/helpers/index.html @@ -0,0 +1,66 @@ +--- +title: Веб-Консоль Помощь +slug: Tools/Web_Console/Helpers +tags: + - Веб-консоль + - Веб-разработка + - Отладка +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}

Команды

+ +

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

+ +
+
$()
+
Ищет CSS-селектор, возвращая первый найденный элемент. Эквивалентно {{ domxref("document.querySelector()") }} или же вызывается функция $, в случае, если таковая найдена на странице.
+
$$()
+
Ищет CSS-селектор, возвращая перечень соответствующих ему DOM-узлов. Это упрощённый вариант, используемый вместо {{ domxref("document.querySelectorAll()") }}.
+
Начиная с билда Firefox 41 этот метод больше не является упрощением для {{ domxref("document.querySelectorAll()")}}, а наоборот возвращает массив элементов.
+
$0
+
Ныне исследуемый элемент страницы.
+
$_
+
Появилась в Firefox 39. Хранит результат последнего выражения, выполненного через командную строку. Например, если вы введёте "2+2 <enter>", затем "$_ <enter>", то консоль ответит "4".
+
$x()
+
Оценивает XPath-выражение и возвращает массив соответствующих ему узлов.
+
keys()
+
Задаёт объект, возвращает перечень ключей (или имён свойств) характерных объекту. Является упрощённым вариантом Object.keys.
+
values()
+
Задаёт объект, возвращает перечень значений объекта; является дополнением для keys().
+
clear()
+
Очищает область вывода консоли.
+
inspect()
+
Задаёт объект, открывает инспектор объектов.
+
pprint()
+
Форматирует указанные значения до читаемого вида; полезно для дампа содержимого объектов и массивов.
+
help()
+
Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведет вас к этой странице.
+
cd()
+
Переключает механизм оценки контекста JavaScript к другому айфрейму, имеющемуся на странице. Смотрите страницу работа с айфреймами.
+
copy()
+
Появилась в Firefox 38. Копирует аргумент в клипборд. Если аргумент является строкой, то он копируется как есть. Если аргумент является DOM-узлом, то копируется его outerHTML. Можно также использовать функцию JSON.stringify, которая также вызовет аргумент и скопирует его значение в клипборд.
+
clearHistory()
+
Появилась в Firefox 39. Как и любая другая командная строка, Веб-консоль помнит введённые вами команды. Используйте функцию для очистки истории командной строки.
+
Пожалуйста, обратитесь к тексту API консоли для получения большей информации о записи контента.
+
+ +

Примеры

+ +

Пример: Смотрим на содержимое DOM-узлов

+ +

Допустим, у вас есть DOM-узел с ID "title". На самом деле такой ID есть и у страницы, которую вы сейчас читаете, т.е. вы можете открыть Веб-консоль и попробовать прямо сейчас.

+ +

Давайте посмотрим на содержимое этого узла, используя функции: $() и inspect()

+ +
inspect($("#title"))
+ +

Автоматически откроется окно объектного инспектора, показывающее содержимое DOM-узла, соответствующего CSS-селектору "#title", являющемуся элементом ID "title".

+ +

Пример: Дамп содержимого DOM-узла

+ +

Это нормально и хорошо, если вы столкнулись с какими-то проблемами, используя браузер, но, давайте представим, что вы делаете удалённую отладку для пользователя и должны посмотреть на содержимое узла. В таком случае, ваш пользователь может открыть Веб-консоль, сделать дамп содержимого узла, затем скопировать текст получившегося лога, и отправить его вам по электронной почте, используя для всех своих действий функцию pprint()

+ +
pprint($("#title"))
+
+ +

Консоль изрыгнёт содержимое узла, так что, вы сможете взглянуть на него. Конечно, полезней использовать функцию не для DOM-узлов, но вы уже поняли идею...

diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html new file mode 100644 index 0000000000..db38988978 --- /dev/null +++ b/files/ru/tools/web_console/index.html @@ -0,0 +1,719 @@ +--- +title: Веб-консоль +slug: Tools/Web_Console +tags: + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - Веб-консоль + - Отладка + - Руководство + - 'веб-разработка:инструменты' +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}

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

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

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

+ +

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

+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +

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

+ +

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

+ +

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

+ +

+ +

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

+ + + +

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

+ +

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

+ +

+ +

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

+ + + +

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

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Время (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.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + +
APIMessage 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();
+ +

+
+ +

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

+ + + + + + + + + + + + + + +
APIMessage content
warn() +

The argument to warn().

+ + 
+console.warn("a warning");
+
+ +

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

+ + + + + + + + + + + + + + +
APIMessage content
info() +

The argument to info().

+ + 
+console.info("some info");
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APIMessage 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");
+ +

 

+ +

Если аргумент — это узел 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.

+ +

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

+ +

+ +

Accessing variables

+ +

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

+ +

+ +

Автозавершение

+ +

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:

+ +

+ +

Объявление переменных

+ +

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

+ +

+ +

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

+ +

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

+ +

Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте 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

+ +

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

+ +

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 +
+

Новое в 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..

+ +

Выделение и инспектирование узлов DOM

+ +

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

+ +

{{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") }}

+ +

Global shortcuts

+ +

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

diff --git a/files/ru/tools/web_console/opening_the_web_console/index.html b/files/ru/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..41f3e760cc --- /dev/null +++ b/files/ru/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,23 @@ +--- +title: Opening the Web Console +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}

To open the Web Console:

+ + + +

The Toolbox will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the DevTools toolbar):

+ +

+ +

The Web Console's interface is split into three horizontal sections:

+ + diff --git a/files/ru/tools/web_console/split_console/index.html b/files/ru/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..8085c9a199 --- /dev/null +++ b/files/ru/tools/web_console/split_console/index.html @@ -0,0 +1,18 @@ +--- +title: Разделённая консоль +slug: Tools/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +

Вы можете использовать консоль вместе с другими инструментами. Находясь в другом инструменте панели инструментов, просто нажмите клавишу Esc или выберите команду «Показать разделенную консоль» в меню панели инструментов. Панель инструментов теперь будет разделена, с исходным инструментом вверху и веб-консолью внизу.

+ +

Вы можете закрыть разделенную консоль, снова нажав Esc или выбрав команду меню «Скрыть разделенную консоль».

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Как обычно, $0 работает как сокращение для элемента, выбранного в данный момент в Инспекторе:

+ +

При использовании разделенной консоли с отладчиком, областью действия консоли является текущий выполняемый кадр стека. Таким образом, если вы нажмете точку останова в функции, область действия будет областью действия функции. Вы получите автозаполнение для объектов, определенных в функции, и сможете легко изменять их на лету:

+ +

-- cgit v1.2.3-54-g00ecf