console深入理解

Posted 2020-09-02 文思飞扬

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

 

下面一一介绍： 

console.log() 用于输出普通信息

console.info() 用于输出提示性信息

console.error() 用于输出错误信息

console.warn() 用于输出警示信息

console.debug() 用于输出调试信息

上面的5种方法，都可以使用printf风格的占位符，不过，占位符的种类比较少，只支持字符（％s），整数（％d或％i），浮点数（％f）和对象（％o）四种

 

console.dirxml() 用来显示网页的某个节点（node）所包含的html／xml代码

window.onload = function () {
        var mytable = document.getElementById(‘mytable‘);
        console.dirxml(mytable);
    }

 

console.group() 输出一组信息的开头

console.groupEnd() 结束一组输出信息

这两个结合使用输出一组信息

 

console.assert() 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台

var isDebug = false;

console.assert(isDebug, ‘为false时输出的log信息。。。‘)

 

console.conunt() 统计代码被执行的次数

function myFunction(){

console.count("myFunction 被执行的次数")

}

myFunction();

myFunction();

// myFunction 被执行的次数: 1

// myFunction 被执行的次数: 2

 

console.dir() 直接将DOM节点以对象的方式进行输出，也可以输出对象，查看对象的方法和属性

console.dirxml() 只是输出DOM结构

 

console.time() 计时开始

console.timeEnd() 计时结束

//第一种方法是使用console.time来统计实例化1000000个对象所需的时间

console.time(‘Array initialize‘)

var array = new Array(1000000);

for(var i = array.length-1; i > -1; i--){

array[i] = new Object();

}

//第二种方法是用传统的时间差相减来统计的

console.timeEnd("Array initialize");

// Array initialize: 150ms

 

var start = new Date().getTime();

var array = new Array(1000000);

for(var i = array.length-1; i > -1; i--){

array[i] = new Object();

}

console.log(new Date().getTime()-start);

// 160

 

console.profile() 和 console.profileEnd() 配合使用来查看CPU使用的相关信息。如果没有用上面的方法的话 Profiles面板里没有CPU的相关信息，只有使用该方法后才有

 

console.timeLine 和 console.timeLineEnd 配合一起记录一段时间轴， 同上面的方法

 

console.trace() 堆栈跟踪相关的调试

 

 控制台的一些快捷键

1、方向键盘的上下键

2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的

3、$0-$4 代表最近5个你选择过的DOM节点，$0是最近一次点选的DOM节点， $1是上上次点选的DOM节点，最多保存5个，如果不够则返回undefined

4、Chrome控制台中支持jQuery的选择器，也就是说可以直接$(‘body‘)选择DOM节点

5、copy() 通过此命令可以将在控制台中获取到的内容复制到键贴板

copy(document.body)， 可以任意粘贴到哪

6、keys(obj) 和 values(obj) 返回属性名和值组成的数组

7、console.table(obj) 将对象直接生成table，在console中显示

8、monitor & unmonitor 接收一个函数名作为参数，函数每次被执行了都会在控制台输出一条信息，里面包含了函数名称及执行时所传入的参数， 解除了监视就不在控制台输出信息了

monitor(sayHello);

sayHello(‘angela‘);

sayHello(‘Phoebe‘);

unmonitor(sayHello);

// function sayHello called with arguments: angela

// function sayHello called with arguments: Phoebe

 

• $ // 简单理解就是 document.querySelector 而已。
• $$ // 简单理解就是 document.querySelectorAll 而已。
• $_ // 是上一个表达式的值
• $0-$4 // 是最近5个Elements面板选中的DOM元素，待会会讲。
• dir // 其实就是 console.dir
• keys // 取对象的键名, 返回键名组成的数组
• values // 去对象的值, 返回值组成的数组

 

console.log(‘%c‘,"padding:50px 300px;line-height: 120px;background:url(‘http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.git‘) no-repeat");

%c应该是占位符的意思吧

 

console.clear()