Chrome 开发者工具（二）------ Console

Console 是最最常用到的模块，开发必备。

 

一、控制台信息如何高效查看？

 

　　控制台可以看到 JS 的报错信息、提示信息、及代码中打印的信息

　　下图是百度首页的信息，其中红框中：

　　1、向右的三角图标（Show console sidebar），可以分别查看不同类型的信息

　　2、禁止图标（Clear console），清空控制台的所有信息，刷新页面后恢复

　　3、眼睛图标（Create live expression），可以打开动态表达式输入框

　　　　输入要监控的表达式，执行频率是 250 毫秒

　　　　例如输入 Date.now()，可以看到显示的当前时间戳在实时变化，

　　4、Filter 过滤框，可以过滤有关键字的信息，或没有关键字的信息

　　　　输入中划线“”-“”，会看到自动显示出三种过滤方式：context、source、url

　　　　选择一种方式，并在冒号后输入关键字，会显示除关键字以外的信息

　　　　中划线去掉，会检索到只有关键字相关的信息

　　　　普通字符也可以当做关键字检索

　　　　可用正则表达式检索

　　5、选择显示的 Log 等级

　　　　Verbose：从Chromium58开始，仅显示 console.debug() 的输出

　　　　Info：仅显示 console.info() 的输出

　　　　Warnning：仅显示 console.warn() 的输出

　　　　Errors：仅显示 console.error() 的输出

　　　　Default：默认勾选Info、Warnings、Errors

　　6、设置图标，控制台相关设置信息，勾选开启

　　　　Hide network：隐藏网络信息，不记录 404 和 500 系列信息

　　　　Preserve log：刷新页面可以保留控制台信息

　　　　Selected context only：只显示当前上下文

　　　　Group similar：类似的消息会折叠显示

　　　　Log XMLHttpRequests：是否显示每一个 XMLHttpRequests

　　　　Eager Evaluation：控制台写表达式时，显示预览结果

　　　　Autocomplete from history：自动生成历史消息

　　　　Evaluate triggers user activation：检测触发用户激活

　　

 

二、Console 可用的方法有哪些？

 

　　在控制台输入 console 可以看到所有属性，主要看一些常用的

　　

 

 

　　1、常用打印日志信息，输出结果都一样，都可以输出任意类型的数据，且可以输出多个数据

　　　　console.log()

　　　　console.error()

　　　　console.info()

　　　　console.warn()

　　　　console.debug()

　　2、console.assert()，输出断言错误时的信息

　　　　例：console.assert(1 > 2, 'error');  当第一个参数的结果是 false 时，输出第二个参数

　　3、console.clear()，清空 console 信息

　　4、console.count()，通常写在循环或函数中，显示当前行代码第几次执行，参数是任意数据

　　5、console.dir()，将对象以树形结构输出

　　6、console.group()、console.groupEnd()，分组显示信息，可以嵌套使用

　　　　console.group('G1')

　　　　console.log(11)

　　　　console.groupEnd('G1')

　　　　console.group('G2')

　　　　console.log(22)

　　7、console.time()、console.timeEnd()，用于计时，分别显示开始时间和结束时间

　　8、console.table()，以表格的形式显示数据

　　9、console.trance()，跟踪函数调用链，显示函数被哪些函数调用过

 

三、听说 Console 还可以格式化输出？

 

　　共有四种占位符：

　　%f：浮点数

　　%c：字符

　　%d 或 %i：整数

　　%o：对象

//输出带有样式的文字
console.log("%c这是蓝色的20号字","color:blue;font-size:20px;");
//输出图片
console.log("%c","background:url(‘http://www.baidu.com/img/tupian.jpg‘)");
//格式化输出日期
console.log("今天是%i年%i月%i日",2016,05,04);
//输出小数
console.log("%f是圆周率",3.141592653);
var obj = {
　　name : ‘pelli‘,
　　age : 24
}
console.log("%o",obj);

 

四、可以直接在控制台执行 js 脚本

　　非常方便 JS 脚本验证调试。

　　注意，打印结果之前的换行是 Shift + Enter