chrome下console使用详解

1.console.log

释义:向控制台输出普通信息
如果参数只是字符串:

console.log("在控制台会输出普通信息");

如果有两个参数,第一个参数是加了%c(注意小写)的字符串,那么在控制台输出时就会按照第二个参数给出的样式输出(下面的info,error,warn都可以使用%c格式输出文字)

console.log("%c这里会输出红色,20字号的文字","font-size:20px;color:red");

2.console.info

释义:向控制台输出提示信息

console.info("这是一条提示信息");

3.console.error

释义:向控制台输出错误信息

console.error("这是一条错误信息");

4.console.warn

释义:向控制台输出警示信息

console.warn("这是一条警息");

5.console.group,console.groupEnd

• console.group:开始一组输出信息,可以嵌套,形成子信息,要结束当前组的信息输出,要调用console.groupEnd
• console.groupEnd:结束一组输出信息

console.log("%ckitchen api","font-size:18px;color:red");
console.group("vueComp方法");
console.log("该方法是生成一个可装配的组件");
console.group("参数(Object)");
console.log("path:载入组件的路径");
console.log("cache:是否开启缓存")
console.groupEnd();
console.groupEnd();

6.console.table

释义:以表格形式将数据输出

var data = [
{"name":"尼古拉斯.赵四","age":32},
{"name":"岳云鹏","age":"32"}
];
console.log(data);

7.console.assert

释义:断言

var isDebug = false;
console.assert(isDebug,"如果前一个参数是false,控制台将输出这段话")

如果第一个参数不是布尔型,会自动转成布尔型(0,false,"",null,undefined,NaN转为false,其他均为true),不过建议直接写false或者true

8.console.count

释义:统计某个代码片段执行了多少次

function runCount () {
//...代码逻辑
console.count("runCount执行次数:")}
runCount();
runCount();
runCount();
runCount();

9.console.dir

释义:将传入对象的属性,包括子对象的属性,以列表形式输出:

var obj = { name : "li4065", sex : "man", age : 29}
console.dir(obj);
console.dir(document.body); //以列表形式,把body的相关属性展示出

PS.另外还有个console.dirxml方法,是会把相关节点中的包含的html/xml输出,感觉没啥用。不如直接在控制台输入某个节点,会直接把该节点html/xml输出。

10.console.time,console.timeEnd

• console.time:生成一个记时器,并开始记时
• console.timeEnd:结束某个指定标示的记时两者配套使用,会把指定计时器运行时间计算出来

console.time("run"); //生成一个名为run的定时器
for(var i=0;i<1000;i++) { console.log("ces")};
console.timeEnd("run"); //结束名为run的定时器在chrome浏览器下

会输出:run: 96.274ms

11.console.profile,console.profileEnd

• console.profile:标记一个性能记录点,并开始进行性能记录
• console.profileEnd:结束某个性能记录可以在浏览器的profile的标签看到相关性能记录情况(记录名,就是profile中的名称)

function sayHi() { for(var i=0;i<1000;i++){ console.log("hi") }}
console.profile("记录sayHi的性能");
sayHi();
console.profileEnd("记录sayHi的性能");

记录性能除了可以用这种手写方式,也可以通过在profile标签下,进行操作来记录

12.console.trace

释义:追逐函数的调用过程(堆栈跟踪相关的调试)

function testTrace () {
var a = 12;
submit(a);
}
function submit (a) {
var b = 23;
add(a,b);
}
function add (a,b) {
console.log(a + b);
console.trace("追踪add相关的调用函数"); //如果这里不传值,控制台会把console.trace()当作记录的堆栈名}

13.在chrome控制台下,除了以上的相关方法,还有如下两个比较好用的方法:

• keys,values
  keys:返回传入对象所有属性名组成的数据.
  values:返回所有属性值组成的数组.
  var info={name:'li4065',sex:'man',age:'29'};
  keys(info); //把info存起来
  values(info); //获取info的相关数据
• monitor,unmonitor
  monitor:接收某个函数作为参数,该函数只要一执行,控制台就会输出相关信息
  unmonitor:移除对某个函数的监听
  function sayHi () {
  console.log("Hi");
  }
  monitor(sayHi);
  sayHi();
  unmonitor(sayHi);
  sayHi();