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