From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/tools/web_console/helpers/index.html | 125 +++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/zh-cn/tools/web_console/helpers/index.html (limited to 'files/zh-cn/tools/web_console/helpers/index.html') diff --git a/files/zh-cn/tools/web_console/helpers/index.html b/files/zh-cn/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..d8a52db1d6 --- /dev/null +++ b/files/zh-cn/tools/web_console/helpers/index.html @@ -0,0 +1,125 @@ +--- +title: Web控制台帮助 +slug: Tools/Web_Console/Helpers +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}
+ +

命令列表

+ +

由Web控制台提供的JavaScript命令行工具中包含了一些内置的帮助性函数，它们可以用来简化一些特定任务。

+ +
+
$(selector, element)
+
使用 selector 值查找一个CSS选择器，返回 element 元素后代中第一个匹配的节点。如果未指定，则 element 默认为 document。相当于 {{ domxref("document.querySelector()") }} 或者调用该页面的 $ 函数（在它存在的前提下）。
+
参考 QuerySelector code snippet。
+
$$(selector, element)
+
使用 selector 值查找一个CSS选择器，返回 element 元素后代中所有匹配的节点组成的数组。如果未指定，则 element 默认为 document。它类似于 {{ domxref("document.querySelectorAll()") }}，但是返回值是数组，而不是 {{ domxref("NodeList") }}。
+
$0
+
当前页面中，正在检查的元素。
+
$_
+
存储在控制台命令行中执行的上一个表达式的结果。例如，如果输入"2+2"，回车键之后再输入"$_"，按下回车键后控制台将输出4。
+
$x(xpath, element, resultType)
+
求出 element 上下文中 XPath（xpath）表达式的值并返回一个包含所有匹配节点的数组。如果未指定，则 element 默认为 document。resultType 参数指定返回结果的类型，它可能是一个 XPathResult constant 类型或者是一个相应的字符串："number"，"string"，"bool"，"node"，"nodes"；如果未提供该参数，则使用 ANY_TYPE。
+
:block
+
（从Firefox 80版本开始可用）后跟一个未引用的字符串，阻止URL中包含该字符串的请求。在 Network Monitor 中，该字符串会显示在 Request Blocking sidebar 中并被选中。如果需要取消阻止，就用 :unblock。
+
cd() {{deprecated_inline("gecko74")}}
+
将JavaScript执行上下文切换到该页面上一个不同的iframe框架。该函数接受多种不同方法来确认具体要切换到哪一个框架。
+
详情请查看 working with iframes。
+
clear()
+
清除控制台输出区域。
+
clearHistory()
+
就像一个普通的命令行一样，控制台命令行记住你曾经输入的命令（remembers the commands you've typed）。使用该函数来清除控制台的键入命令历史记录。
+
 copy()
+
将其中的参数部分复制到剪贴板。如果参数是一个字符串，则复制它的字面内容。如果参数是一个DOM节点，则复制它的 outerHTML 。否则，就针对该参数调用 JSON.stringify 方法，然后将结果复制到剪贴板。
+
help() {{Deprecated_Inline(62)}}
+
:help {{Gecko_MinVersion_Inline(62)}}
+
显示帮助文本。事实上，在经过一个令人愉快的递归后，会把你带到这个页面。
+
inspect()
+
提供一个对象，为它生成一份 rich output。一旦选择了输出区域中的对象，就可以使用键盘上的箭头按键来浏览对象详情。
+
keys()
+
提供一个对象，返回它所有的键（或属性名）。这是 Object.keys 的简写。
+
pprint() {{Obsolete_Inline(74)}}
+
以一种可读的方式格式化指定值。这在转储对象或者数组内容时非常有用。
+
:screenshot
+
使用给定的文件名创建当前页面的屏幕快照。如果没有提供文件名，图片文件将用以下格式命名：
+
Screen Shot yyy-mm-dd at hh.mm.ss.png
+
这个命令有如下可选参数：
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
命令类型描述
--clipboardboolean如果指明，该参数将使屏幕快照复制到剪贴板。
--delaynumber在创建屏幕快照之前延迟等待的秒数。
--dprnumber创建屏幕快照时使用的设备像素比率。
--fileboolean如果指明，屏幕快照将保存到文件里，即便其它选项（例如：--clipboard）也存在。
--filenamestring用来保存屏幕快照的文件名。这个文件有一个".png"扩展名。
--fullpageboolean如果指明，整个网页将被保存。有了这个参数，即使是超出了当前窗口边界的页面部分也会包含在屏幕快照里。当使用这一参数时，"-fullpage"字样会被追加到文件名中。
--selectorstring指定一个单一元素的CSS选择器。当提供这一参数时，只有这个元素才会被包含在屏幕快照中。
+
+
:unblock
+
（从Firefox 80版本开始可用）后跟一个未引用的字符串，取消阻止URL中包含该字符串的请求。在 Network Monitor 中，该字符串会被从 Request Blocking sidebar 中移除。如果该字符串之前未被阻止，也不会抛出错误信息。
+
values()
+
提供一个对象，返回它所有的值。与 keys() 是伙伴函数。
+
+ +

请参照 Console API 获取更多关于该内容的详细信息。

+ +

变量

+ +
+
tempN
+
查看器中的 Use in Console 选项（选中任意一个元素，右键菜单中有该选项）为节点生成了一个变量例如 temp0，temp1，temp2 等等来引用该节点。
+
+ +

示例

+ +

查看DOM节点的内容

+ +

假如你有一个DOM节点叫做"title"。事实上，你正在阅读的这个页面恰好有一个，所以你可以打开Web控制台，尝试下面的内容。

+ +

让我们先来看看调用 $() 和 inspect() 方法之后返回节点的内容：

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

这会自动生成该对象的富表示形式（rich output），为你显示匹配CSS选择器 "#title" 的节点内容，当然就是拥有 "title" 的ID的元素啦。你可以使用键盘的上下方向键来浏览输出的内容，右方向键用来展开一个项目，而左方向键是折叠一个项目。

+ +

另请参阅

+ + -- cgit v1.2.3-54-g00ecf