console深入理解

["$$", "$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()
原文地址:https://www.cnblogs.com/wenwenli/p/6483085.html