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();
