console
object provides access to the browser's debugging console (e.g. the
Web 控制台
in Firefox). The specifics of how it works varies from browser to browser, but there is a
de facto
set of features that are typically provided.
console
对象可以被访问从任何全局对象。
Window
在浏览作用域和
WorkerGlobalScope
as specific variants in workers via the property console. It's exposed as
Window.console
, and can be referenced as simply
console
。例如：
console.log("Failed to open the specified link")
此页面文档
方法
可用于
console
对象和给出一些
用法
范例。
注意
: The actual
console
interface is defined as all lower case (i.e. not
控制台
), for historical reasons.
console.assert()
false
.
console.clear()
清零控制台。
console.count()
Log the number of times this line has been called with the given label.
console.countReset()
Resets the value of the counter with the given label.
console.debug()
debug
.
console.dir()
显示指定 JavaScript 对象特性的交互列表。此列表允许使用披露三角关系审查子级对象的内容。
console.dirxml()
Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.
console.error()
console.exception()
error()
.
console.group()
groupEnd()
.
console.groupCollapsed()
group()
this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call
groupEnd()
.
console.groupEnd()
console.info()
console.log()
console.profile()
console.profileEnd()
console.table()
将表列数据显示为表格。
console.time()
console.timeEnd()
console.timeLog()
console.timeStamp()
console.trace()
console.warn()
The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the
console.log()
,
console.info()
,
console.warn()
，和
console.error()
methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.
There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.
The simplest way to use the logging methods is to output a single object:
var someObject = { str: "Some text", id: 5 };
console.log(someObject);
输出某种程度上看起来像这样：
[09:27:13.475] ({str:"Some text", id:5})
You can also output multiple objects by simply listing them when calling the logging method, like this:
var car = "Dodge Charger";
var someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);
此输出将看起来像这样：
[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
当传递字符串到某一
console
对象的接受字符串的方法 (譬如
log()
)，可以使用这些代入字符串：
%o
or
%O
输出 JavaScript 对象。点击对象名称将在审查器中打开关于它的更多信息。
%d
or
%i
console.log("Foo %.2d", 1.1)
将输出以 2 个显著数字 0 开头的数字:
Foo 01
%s
输出字符串。
%f
console.log("Foo %.2f", 1.1)
将输出数字到小数点后 2 位：
Foo 1.10
注意 ：精度格式在 Chrome 不工作
这些中的每个都将格式字符串后的下一自变量拉出参数列表。例如：
for (var i=0; i<5; i++) {
console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}
输出看起来像这样：
[13:14:13.481] Hello, Bob. You've called me 1 times. [13:14:13.483] Hello, Bob. You've called me 2 times. [13:14:13.485] Hello, Bob. You've called me 3 times. [13:14:13.487] Hello, Bob. You've called me 4 times. [13:14:13.488] Hello, Bob. You've called me 5 times.
可以使用
%c
指令把 CSS 样式应用到控制台输出：
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
The properties usable along with the
%c
syntax are as follows (at least, in Firefox — they may differ in other browsers):
background
and its longhand equivalents.
border
and its longhand equivalents
border-radius
box-decoration-break
box-shadow
clear
and
float
color
cursor
display
font
and its longhand equivalents
line-height
margin
outline
and its longhand equivalents
padding
text-*
特性如
text-transform
white-space
word-spacing
and
word-break
writing-mode
注意
: The console message behaves like an inline element by default. To see the effects of
padding
,
margin
, etc. you should set it to for example
display: inline-block
.
You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call
console.group()
。
console.groupCollapsed()
method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.
要退出当前组，只需调用
console.groupEnd()
。例如，给出这样的代码：
console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");
输出看起来像这样：
You can start a timer to calculate the duration of a specific operation. To start one, call the
console.time
()
method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the
console.timeEnd()
method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.
例如，给出这样的代码：
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:
Notice that the timer's name is displayed both when the timer is started and when it's stopped.
注意： It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call
console.trace()
. Given code like this:
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
控制台输出某种程度上看起来像这样：
| 规范 | 状态 | 注释 |
|---|---|---|
| 控制台 API | 实时标准 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
控制台
|
Chrome 1 | Edge 12 | Firefox 2 |
IE
8
|
Opera 10.5 | Safari 3 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 11 | Safari iOS 1 | Samsung Internet Android 1.0 |
assert
|
Chrome 1 | Edge 12 | Firefox 28 | IE 8 | Opera 11 | Safari 4 | WebView Android 1 | Chrome Android 18 | Firefox Android 28 | Opera Android 11 | Safari iOS 3.2 | Samsung Internet Android 1.0 |
clear
|
Chrome Yes | Edge 12 | Firefox 48 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 48 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
count
|
Chrome Yes | Edge 12 | Firefox 30 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 30 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
countReset
|
Chrome Yes | Edge ≤79 | Firefox 62 | IE No | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 62 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
debug
|
Chrome Yes | Edge 12 | Firefox 4 | IE Yes | Opera ? | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
dir
|
Chrome 1 | Edge 12 | Firefox 8 | IE 9 | Opera 11 | Safari 4 | WebView Android 1 | Chrome Android 18 | Firefox Android 8 | Opera Android 11 | Safari iOS 3.2 | Samsung Internet Android 1.0 |
dirxml
|
Chrome Yes | Edge 12 | Firefox Yes | IE Yes | Opera Yes | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android No | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
error
|
Chrome 1 | Edge 12 | Firefox 4 | IE 8 | Opera 10.5 | Safari 3 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 11 | Safari iOS 1 | Samsung Internet Android 1.0 |
exception
(an alias for
error
)
弃用
非标
|
Chrome No | Edge 13 — 79 | Firefox 28 | IE No | Opera No | Safari No | WebView Android No | Chrome Android No | Firefox Android 28 | Opera Android ? | Safari iOS No | Samsung Internet Android No |
group
|
Chrome 1 | Edge 12 | Firefox 4 | IE 11 | Opera Yes | Safari 4 | WebView Android 37 | Chrome Android 18 | Firefox Android 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android 1.0 |
groupCollapsed
|
Chrome 6 | Edge 12 | Firefox 52 | IE 11 | Opera ? | Safari 5.1 | WebView Android 37 | Chrome Android 18 | Firefox Android 52 | Opera Android ? | Safari iOS ? | Samsung Internet Android 1.0 |
groupEnd
|
Chrome 1 | Edge 12 | Firefox 9 | IE 11 | Opera Yes | Safari 4 | WebView Android 37 | Chrome Android 18 | Firefox Android 9 | Opera Android ? | Safari iOS ? | Samsung Internet Android 1.0 |
info
|
Chrome Yes | Edge 12 | Firefox 4 | IE 8 | Opera Yes |
Safari
Yes
|
WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
log
|
Chrome 1 | Edge 12 | Firefox 4 | IE 8 | Opera 10.5 | Safari 3 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 11 | Safari iOS 1 | Samsung Internet Android 1.0 |
profile
非标
|
Chrome 53 | Edge 12 | Firefox Yes | IE Yes | Opera ? | Safari ? | WebView Android 53 | Chrome Android 53 | Firefox Android 10 | Opera Android ? | Safari iOS ? | Samsung Internet Android 6.0 |
profileEnd
非标
|
Chrome Yes | Edge 12 | Firefox Yes | IE Yes | Opera ? | Safari ? | WebView Android Yes | Chrome Android Yes | Firefox Android 10 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
table
|
Chrome 27 | Edge 13 | Firefox 34 | IE No | Opera 11 | Safari 6.1 | WebView Android ≤37 | Chrome Android 27 | Firefox Android 34 | Opera Android 11 | Safari iOS 7 | Samsung Internet Android 1.5 |
time
|
Chrome 1 | Edge 12 | Firefox 10 | IE 11 | Opera 11 | Safari 4 | WebView Android 1 | Chrome Android 18 | Firefox Android 10 | Opera Android 11 | Safari iOS 3.2 | Samsung Internet Android 1.0 |
timeEnd
|
Chrome 1 | Edge 12 | Firefox 10 | IE 11 | Opera Yes | Safari 4 | WebView Android 1 | Chrome Android 18 | Firefox Android 10 | Opera Android ? | Safari iOS ? | Samsung Internet Android 1.0 |
timeLog
|
Chrome 72 | Edge 79 | Firefox 62 | IE No | Opera 60 |
Safari
No
|
WebView Android 72 | Chrome Android 72 | Firefox Android 62 | Opera Android ? | Safari iOS No | Samsung Internet Android 11.0 |
timestamp
非标
|
Chrome Yes | Edge 12 | Firefox Yes | IE 11 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 10 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
trace
|
Chrome 1 | Edge 12 | Firefox 10 | IE 11 | Opera 11 | Safari 4 | WebView Android 1 | Chrome Android 18 | Firefox Android 10 | Opera Android 11 | Safari iOS 3.2 | Samsung Internet Android 1.0 |
warn
|
Chrome Yes | Edge 12 | Firefox 4 | IE 8 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
| Available in workers | Chrome Yes | Edge 12 | Firefox 38 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 38 | Opera Android ? | Safari iOS ? | Samsung Internet Android Yes |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
console
对象，对象覆盖 Firefox 内置对象。