1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
---
title: Веб-Консоль Помощь
slug: Tools/Web_Console/Helpers
tags:
- Веб-консоль
- Веб-разработка
- Отладка
translation_of: Tools/Web_Console/Helpers
---
<div>{{ToolsSidebar}}</div><h2 id="Команды">Команды</h2>
<p>Командная строка JavaScript, предоставляемая Веб-Консолью, предлагает несколько встроенных вспомогательных функций, которые делают определённые задачи проще.</p>
<dl>
<dt><code>$()</code></dt>
<dd>Ищет CSS-селектор, возвращая первый найденный элемент. Эквивалентно {{ domxref("document.querySelector()") }} или же вызывается функция $, в случае, если таковая найдена на странице.</dd>
<dt><code>$$()</code></dt>
<dd>Ищет CSS-селектор, возвращая перечень соответствующих ему DOM-узлов. Это упрощённый вариант, используемый вместо {{ domxref("document.querySelectorAll()") }}.</dd>
<dd>Начиная с билда Firefox 41 этот метод больше не является упрощением для {{ domxref("document.querySelectorAll()")}}, а наоборот возвращает массив элементов.</dd>
<dt><code>$0</code></dt>
<dd>Ныне исследуемый элемент страницы.</dd>
<dt><code>$_</code></dt>
<dd><em>Появилась в Firefox 39. </em>Хранит результат последнего выражения, выполненного через командную строку. Например, если вы введёте "2+2 <enter>", затем "$_ <enter>", то консоль ответит "4".</dd>
<dt><code>$x()</code></dt>
<dd>Оценивает <a href="/en-US/docs/XPath">XPath</a>-выражение и возвращает массив соответствующих ему узлов.</dd>
<dt><code>keys()</code></dt>
<dd>Задаёт объект, возвращает перечень ключей (или имён свойств) характерных объекту. Является упрощённым вариантом <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a>.</dd>
<dt><code>values()</code></dt>
<dd>Задаёт объект, возвращает перечень значений объекта; является дополнением для <code>keys()</code>.</dd>
<dt><code>clear()</code></dt>
<dd>Очищает область вывода консоли.</dd>
<dt><code>inspect()</code></dt>
<dd>Задаёт объект, открывает инспектор объектов.</dd>
<dt><code>pprint()</code></dt>
<dd>Форматирует указанные значения до читаемого вида; полезно для дампа содержимого объектов и массивов.</dd>
<dt><code>help()</code></dt>
<dd>Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведёт вас к этой странице.</dd>
<dt><code>cd()</code></dt>
<dd>Переключает механизм оценки контекста JavaScript к другому айфрейму, имеющемуся на странице. Смотрите страницу <a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">работа с айфреймами</a>.</dd>
<dt><code>copy()</code></dt>
<dd><em>Появилась в Firefox 38.</em> Копирует аргумент в клипборд. Если аргумент является строкой, то он копируется как есть. Если аргумент является DOM-узлом, то копируется его <code><a href="/en-US/docs/Web/API/Element/outerHTML">outerHTML</a></code>. Можно также использовать функцию <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code>, которая также вызовет аргумент и скопирует его значение в клипборд.</dd>
<dt><code>clearHistory()</code></dt>
<dd><em>Появилась в Firefox 39.</em> Как и любая другая командная строка, Веб-консоль <a href="/en-US/docs/Tools/Web_Console#Command_history">помнит введённые вами команды</a>. Используйте функцию для очистки истории командной строки.</dd>
<dt>Пожалуйста, обратитесь к тексту<a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console"> API консоли</a> для получения большей информации о записи контента.</dt>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Пример_Смотрим_на_содержимое_DOM-узлов">Пример: Смотрим на содержимое DOM-узлов</h3>
<p>Допустим, у вас есть DOM-узел с ID "title". На самом деле такой ID есть и у страницы, которую вы сейчас читаете, т.е. вы можете открыть Веб-консоль и попробовать прямо сейчас.</p>
<p>Давайте посмотрим на содержимое этого узла, используя <code>функции</code>:<code> $()</code> и <code>inspect()</code></p>
<pre><code>inspect($("#title"))</code></pre>
<p>Автоматически откроется окно объектного инспектора, показывающее содержимое DOM-узла, соответствующего CSS-селектору "#title", являющемуся элементом ID "title".</p>
<h3 id="Пример_Дамп_содержимого_DOM-узла">Пример: Дамп содержимого DOM-узла</h3>
<p>Это нормально и хорошо, если вы столкнулись с какими-то проблемами, используя браузер, но, давайте представим, что вы делаете удалённую отладку для пользователя и должны посмотреть на содержимое узла. В таком случае, ваш пользователь может открыть Веб-консоль, сделать дамп содержимого узла, затем скопировать текст получившегося лога, и отправить его вам по электронной почте, используя для всех своих действий функцию <code>pprint()</code></p>
<pre>pprint($("#title"))
</pre>
<p>Консоль изрыгнёт содержимое узла, так что, вы сможете взглянуть на него. Конечно, полезней использовать функцию не для DOM-узлов, но вы уже поняли идею...</p>
|
