博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
console对象
阅读量:4594 次
发布时间:2019-06-09

本文共 3303 字,大约阅读时间需要 11 分钟。

console对象提供浏览器控制台的接入,不同的浏览器工作的方式是不一样的,这里介绍一些大都会提供的接口api。
 
我们可以在任何的全局变量中使用,例如 、 以及在workers中的特殊定义。

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

方法

判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息。
以参数为标识记录调用的次数,调用时在console打印标识以及调用次数。
 
console.log方法的别称,使用方法可以参考
打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性。
打印一条错误信息,使用方法可以参考  。
error方法的别称,使用方法参考
打印树状结构,配合groupCollapsed以及groupEnd方法;
使用方法和group相同,不同的是groupCollapsed打印出来的内容默认是折叠的。
结束当前Tree
打印以感叹号字符开始的信息,使用方法和log相同
打印字符串,使用方法比较类似C的printf格式输出,可参考   。
可以以第一个参数为标识,开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似,具体可参考
配合profile方法,作为数据收集的结束。
将数据打印成表格。
计时器,接受一个参数作为标识。
接受一个参数作为标识,结束特定的计时器。
打印 .
打印一个警告信息,使用方法可以参考  。

Usage

Outputting text to the console

console对象中较多使用的主要有四个方法, , , 和。他们都有特定的样式,如果有C开发经验的同学会发现它可以格式化打印字符类似于printf方法。如果你想要为console打印的字符定义css或者打印图片的话可以参考 

打印单个对象

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})

格式化打印

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 首次发布对string substitutions的支持.你可以在传递给console的方法的时候使用下面的字符以期进行参数的替换。

Substitution string Description
%o 打印javascript对象,可以是整数、字符串以及JSON数据
%d or %i 打印整数
%s 打印字符串
%f 打印浮点数

当要替换的参数类型和预期的打印类型不同时,参数会被转换成预期的打印类型。

for (var i=0; i<5; i++) {  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);}console.log("I want to print a number:%d","string")

The output looks like this:

[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.[13:14:13.489] I want to print a number:NaN

我们发现"string"字符串被转换成数字失败成转换成 

为console定义样式

你可以使用"%c"为打印内容定义样式:

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

Using groups in the console

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

Timers

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的统计次数

Stack traces

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

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

The output in the console looks something like this:

Notes

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

See also

  •  - Firefox console对象
  •  - 移动端开发console的使用
  •  - Firefox OS Console 控制
  •  - Firefox OS 控制台信息记录

其他实现

  • ;
  • ;
  • ;
  • .

转载于:https://www.cnblogs.com/AllenChou/p/5855833.html

你可能感兴趣的文章
20145205 《Java程序设计》实验报告三:敏捷开发与XP实践
查看>>
利用Spring.NET实现WCF的AOP编程
查看>>
第三方,解决模型无法在获取网络数据之后传值问题
查看>>
对比 Git 与 SVN,这篇讲的很易懂
查看>>
【snmp】Linux开启snmp及查询
查看>>
CSU 1532: JuQueen(线段树)
查看>>
设定MyEclipse编辑代码区域文字的大小及非keyword的字体、字形和颜色
查看>>
LeetCode【6】. ZigZag Conversion --思路图解与java实现
查看>>
git 合并分支
查看>>
NSNotification与NSNotificationCenter
查看>>
qt 中文乱码 处理QByteArray类型里含中文的数据
查看>>
跨库事务一致性问题的解决方式(例)
查看>>
ios build时,Undefined symbols for architecture xxx问题的总结
查看>>
JavaScript对象
查看>>
IIS7(Windows7)下最简单最强安装多版本PHP支持环境
查看>>
关于Cocos2d-x发布游戏的时候遇到的问题和解决
查看>>
CSS学习笔记之样式声明
查看>>
rtmpdump代码分析 转
查看>>
codeforces #322 div 2 D. Three Logos (枚举)
查看>>
20145202马超《JAVA》预备作业1
查看>>