首页 / 知识

关于javascript：WebKit / Safari的控制台API在哪里？

2023-04-14 22:09:00

Where is the console API for WebKit/Safari?

WebKit / Safari支持控制台对象，这与Firebug相似。但是到底支持什么呢？有Firebug的控制台文档，但是在哪里可以找到Safari / WebKit的控制台文档？

支持的方法最初是：

console.log()
console.error()
console.warn()
console.info()

较新版本的WebKit还添加了以下方法，使WebKit控制台API与Firebug的控制台API几乎相同：

console.count()
console.debug()
console.profileEnd()
console.trace()
console.dir()
console.dirxml()
console.assert()
console.time()
console.profile()
console.timeEnd()
console.group()
console.groupEnd()

(基于WebKit每晚构建的WebKit-SVN-r37126的新信息，在编写这些方法时，Safari中尚不提供这些信息)

Apple在Safari开发者指南的控制台部分记录了控制台API。

我知道这是一个古老且可以回答的问题，但是您也可以打开控制台并键入console.__proto__，您将获得它支持的所有内容的扩展列表。

试试看：

1	console.dir(console)

Firebug的控制台API文档已移至此处：

http://getfirebug.com/wiki/index.php/Console_API

目前，Safari浏览器的控制台网址已损坏。

好。

这是副本(请按"运行代码段")：
enter image description here

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

<wyn>

<h1 id="pageTitle">The Console
The console offers a way to inspect and debug your webpages. Think of it as the Terminal of your web content. The console has access to the DOM and JavaScript of the open page. Use the console as a tool to modify your web content via interactive commands and as a teaching aid to expand your knowledge of JavaScript. Because an object’s methods and properties autocomplete as you type, you can see all available functions that are valid in Safari.
Ok.


For example, open the console and type <wyn>$$(‘p’)[1]</wyn>。 (<wyn>$$</wyn>是<wyn>document.querySelectorAll</wyn>的简写，请参见表5-1 中的更多速记命令。)因为本段是此页面上<wyn>p</wyn>元素的第二个实例。 (从0开始的索引中的<wyn>[1]</wyn>)，该节点表示此段。当您将鼠标悬停在节点上时，其在页面上的位置会明显突出显示。您可以展开节点以查看其内容，甚至可以按Command-C将其复制到剪贴板。
好。

<section> <h2 class =" jump">命令行API 
您可以使用表5-1 中列出的控制台命令来更详细地检查HTML节点和JavaScript对象。在控制台中以交互方式键入命令行API。
好。


如果您的脚本与命令行API函数共享相同的函数名称，则脚本中的函数优先。
好。

<table class =" graybox" border =" 0" cellspacing =" 0" cellpadding =" 5"> <caption class =" tablecaption">表5-1 Web Inspector控制台中可用的命令</ caption> <tbody> <tr > <th scope =" col" class =" TableHeading_TableRow_TableCell"> 
命令
好。

</ th> <th scope =" col" class =" TableHeading_TableRow_TableCell"> 
描述
好。

</ th> </ tr> <tr> <td scope =" row"> 
<wyn>$(</wyn>选择器<wyn>)</wyn>
好。

</ td> <td> 
<wyn>document.querySelector</wyn>的简写。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>$$(</wyn>选择器<wyn>)</wyn>
好。

</ td> <td> 
<wyn>document.querySelectorAll</wyn>的简写。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>$x(</wyn> xpath <wyn>)</wyn>
好。

</ td> <td> 
返回与给定的 XPath 表达式匹配的元素数组。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>$0</wyn>
好。

</ td> <td> 
表示内容浏览器中当前选定的节点。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>$</wyn> 1..4
好。

</ td> <td> 
分别表示内容浏览器中的最后一个，倒数第二个，倒数第三个和倒数第四个节点。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>$_</wyn>
好。

</ td> <td> 
返回最后计算的表达式的值。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>dir(</wyn>对象<wyn>)</wyn>
好。

</ td> <td> 
打印对象的所有属性。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>dirxml(</wyn>对象<wyn>)</wyn>
好。
</ td> <td> 
打印对象的所有属性。如果对象是节点，则打印该节点和所有子节点。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>keys(</wyn>对象<wyn>)</wyn>
好。

</ td> <td> 
打印对象自身属性名称的数组。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>values(</wyn>对象<wyn>)</wyn>
好。

</ td> <td> 
打印对象自身属性值的数组。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>profile(</wyn> [title] <wyn>)</wyn>
好。

</ td> <td> 
启动JavaScript分析器。可选参数<wyn>title</wyn>包含要在配置文件报告的标题中打印的字符串。请参见 JavaScript和事件记录。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>profileEnd()</wyn>
好。

</ td> <td> 
停止JavaScript分析器并打印其报告。请参见 JavaScript和事件记录。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>getEventListeners(</wyn>对象<wyn>)</wyn>
好。

</ td> <td> 
打印包含该对象的附加事件侦听器的对象。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>monitorEvents(</wyn> object [，类型] <wyn>)</wyn>
好。

</ td> <td> 
开始记录分配给给定对象的所有事件。可选参数<wyn>types</wyn>定义要记录的特定事件或事件类型，例如"单击"。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>unmonitorEvents(</wyn> object [，类型] <wyn>)</wyn>
好。

</ td> <td> 
停止记录分配给给定对象的所有事件。可选参数<wyn>types</wyn>定义特定的事件或事件类型以停止记录，例如"单击"。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>inspect(</wyn>对象<wyn>)</wyn>
好。

</ td> <td> 
检查给定的对象；这与单击"检查"按钮相同。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>copy(</wyn>对象<wyn>)</wyn>
好。

</ td> <td> 
将给定的对象复制到剪贴板。
好。

</ td> </ tr> <tr> <td scope =" row"> 
<wyn>clear()</wyn>
好。

</ td> <td> 
清除控制台。
好。

</ td> </ tr> </ tbody> </ table> 
表5-1 中列出的函数是常规的JavaScript函数，它们是Web Inspector环境的一部分。这意味着您可以像使用任何JavaScript函数一样使用它们。例如，您可以将控制台API命令链分配给变量以创建有用的速记。 清单5-1 显示了如何快速查看附加到所选节点的所有事件类型。
好。

列出5-1查找与此元素关联的事件
好。

<table> <tbody> <tr> <td scope =" row"> [cc lang="javascript"]var evs = function () {

1	return keys(getEventListeners($0));<span></span>

1	};<span></span>

定义此功能后，检查此网页右上角的放大镜，然后在控制台中键入evs()。返回包含字符串" click"的数组，因为该元素附加了click事件侦听器。

好。

当然，这些功能不应包含在您网站的JavaScript文件中，因为它们在浏览器环境中不可用。仅在Web Inspector控制台中使用这些功能。控制台API 中介绍了可包含在脚本中的控制台功能。

好。

控制台API

您可以使用表5-2 中列出的命令，将消息输出到控制台，在时间轴上添加标记，并直接从脚本控制调试器。

好。

重要说明：存在这些功能是为了辅助开发，不应包含在您的任何生产JavaScript中。

好。

好。

<表class =" graybox" border =" 0" cellspacing =" 0" cellpadding =" 5">

表5-2控制台API中可用的JavaScript函数 < tbody>

功能

好。

描述

好。

console.assert(expression, object)

好。

断言给定表达式是否为真。如果断言失败，则在活动查看器中打印错误并增加错误数量。如果断言成功，则不打印任何内容。

好。

console.clear()

好。

清除控制台。

好。

console.count([title])

好。

打印此行被调用的次数。

好。

console.debug(object)

好。

console.log()的别名。

好。

console.dir(object)

好。

打印对象的属性和值。

好。

console.dirxml(node)

好。

打印HTML或XML节点的DOM树。

好。

console.error(object)

好。

将带有错误图标的消息输出到控制台。增加活动查看器中显示的错误数。

好。

console.group([title])

好。

在给定标题的披露下打印后续日志。

好。

console.groupEnd()

好。

结束先前声明的控制台分组。

好。

console.info(object)

好。

console.log()的别名。

好。

console.log(object)

好。

使用日志图标将对象打印到控制台。增加活动查看器中显示的日志数。

好。

console.markTimeline(标签)

好。

用绿色垂直虚线标记时间轴，该虚线指示何时调用此代码行。请参见记录时间轴。

好。

console.profile( [title] )

好。

启动JavaScript分析器。可选参数title包含要在配置文件报告的标题中打印的字符串。请参见 JavaScript和事件记录。

好。

console.profileEnd( [title] )

好。

停止JavaScript分析器并打印其报告。请参见 JavaScript和事件记录。

好。

console.time(名称)

好。

启动与给定名称关联的计时器。用于计时代码段的持续时间。

好。

console.timeEnd(名称)

好。

停止与给定名称关联的计时器，并将经过的时间打印到控制台。

好。

console.trace()

好。

在调用函数时打印堆栈跟踪。参见图4-2 。

好。

console.warn(对象)

好。

将带有警告图标的消息打印到控制台。增加活动查看器中显示的警告数量。

好。

debugger

好。

在当前行停止执行JavaScript。这等效于以编程方式设置断点。请参见断点。

好。

更新：2016-09-13

好。

控制台对象表面上具有内置的" API"，形式为"私有属性"，您可以通过在Webkit javascript-console中执行此操作来显示

1
2
3
4
5

> for(o in console) console.dir(o)
_commandLineAPI
log
warn
…

_commandLineAPI：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

> console.dir(_commandLineAPI)
CommandLineAPI
$0:"—"
$1:"—"
$2:"—"
$3:"—"
$4:"—"
$$: bound: function () {
$x: bound: function (xpath, context) {
clear: bound: function () {
copy: bound: function (object) {
dir: bound: function () {
dirxml: bound: function () {
inspect: bound: function (object) {
keys: bound: function (object) {
monitorEvents: bound: function (object, types) {
profile: bound: function () {
profileEnd: bound: function () {
unmonitorEvents: bound: function (object, types) {
values: bound: function (object) {
__proto__: CommandLineAPI

控制台支持文档对象