这篇翻译不完整。请帮忙从英语翻译这篇文章

Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。

Console 对象可以在任何全局对象中访问,如 WindowWorkerGlobalScope 以及通过属性工作台提供的特殊定义。

它被浏览器定义为 Window.console,也可被简单的 console 调用。例如:

console.log("Failed to open the specified link")

下面介绍对象可用的方法以及对应方法的使用示例

方法

Console.assert()
判断第一个参数是否为真,false的话抛出异常并且在控制台输出相应信息。
Console.clear()
清空控制台。
Console.count()
以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数。
Console.countReset()
重置指定标签的计数器值。
Console.debug()
控制台打印一条“debug”级别的日志消息。
Note: 在Chromium 58 之后的版本,只有勾选了控制台中的 “Verbose” 日志级别才可见。
Console.dir()
打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性。This listing lets you use disclosure triangles to examine the contents of child objects.
Console.dirxml()

打印 XML/HTML 元素表示的指定对象,否则显示 JavaScript 对象视图。

Console.error()
打印一条错误信息,使用方法可以参考 string substitution
Console._exception() 
error方法的别称,使用方法参考 Console.error()
Console.group()
打印树状结构,配合groupCollapsed以及groupEnd方法;
Console.groupCollapsed()
创建一个新的内联 group。使用方法和group相同,不同的是groupCollapsed打印出来的内容默认是折叠的。
Console.groupEnd()
结束当前Tree
Console.info()
打印以感叹号字符开始的信息,使用方法和log相同
Console.log()
打印字符串,使用方法比较类似C的printf格式输出,可参考 string substitution
Console.profile()
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
Console.profileEnd()
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
Console.table()
将列表型的数据打印成表格。
Console.time()
计时器,接受一个参数作为标识。
Console.timeEnd()
接受一个参数作为标识,结束特定的计时器。
Console.timeStamp()
添加一个标记到浏览器的 Timeline 或 Waterfall 工具.
Console.trace()
打印 stack trace
Console.warn()
打印一个警告信息,可以使用 string substitution 和额外的参数。

用法

输出文本到控制台

console对象中较多使用的主要有四个方法console.log(), console.info(), console.warn(), 和console.error()
每一个结果在日志中都有不同的样式,可以使用浏览器控制台的日志筛选功能筛选出感兴趣的日志信息。
有两种途径使用这些方法,你可以简单的传入一组对象,其中的字符串对象会被连接到一起,输出到控制台。或者你可以传入包含零个或多个的替换的字符串,后面跟着被替换的对象列表。

打印单个对象

var someObject = { str: "Some text", id: 5 };
console.log(someObject);

打印结果类似下面:

[09:27:13.475] ({str:"Some text", id:5})

打印多个对象

你可以打印多个对象,就像下面一样:

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的方法的时候使用下面的字符以期进行参数的替换。

Substitution string Description
%o 或 %O 打印 JavaScript 对象,可以是整数、字符串或是 JSON 数据。 Clicking the object name opens more information about it in the inspector.
%d 或 %i 打印整数。Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%s 打印字符串。
%f 打印浮点数。Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10

Note: 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"为打印内容定义样式:

console.log("%cMy stylish message", "color: red; font-style: italic");

在控制台输出树状信息

Requires Gecko 9.0(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

你可以使用console.group方法来组织自己的打印内容以期获得更好的显示方式。

Note: groupCollapsed在 Gecko中显示方式和console.log相同并不会折叠。

示例:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

执行结果:

nesting.png

定时器

Requires Gecko 10.0(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)
我们可以使用time()方法来进行耗时的统计:
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

打印结果:

timerresult.png

Note: 需要注意的是当你统计网络请求时间的时候,header和 response body请求是分开的,换句话说response.header+response.body的时间= console.time的统计时间

堆栈跟踪

打印当前执行位置到console.trace()的路径信息.。

foo();

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

控制台的输出结果:

注意

  • 在Firefox中假如页面定义了console对象的方法,他会覆盖掉Firefox的对象。
  • Gecko 12.0之前的版本中,console object只会在控制台打开的情况下才会执行.自从 Gecko 12.0打印内容会被缓存起来再控制台打开的时候打印出来.
  • firefox内置的console对象与firebug插件提供的console对象是相互兼容的。

参考阅读

其他实现

文档标签和贡献者

最后编辑者: yoodz,