有趣的Console

console是前端开发必备调试技能,console 对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。由于不同的浏览器,所以再往下看的时候,最好在浏览器调试里面,输入以下代码:

console.context()

下图是在Chrome里面打印出来的

20180612141434.png

方法

console.assert():判断第一个参数是否为真,false 的话抛出异常并且在控制台输出相应信息。
console.clear():清空控制台。
console.count():以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数。
console.debug()console.log 方法的别称,使用方法可以参考 console.log()
console.dir(): 打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性。
console.dirxml():如果可以,打印 XML/HTML 元素表示的指定对象,或者 JavaScript 对象视图。
console.error():打印一条错误信息。
console.group():打印树状结构,配合groupCollapsed以及groupEnd方法。
console.groupCollapsed():创建一个新的内联 group。使用方法和 group 相同,不同的是 groupCollapsed 打印出来的内容默认是折叠的。
console.groupEnd():结束当前 Tree
console.info():打印以感叹号字符开始的信息,使用方法和 log 相同。
console.log():打印字符串,使用方法比较类似 Cprintf 格式输出 。
console.profile():可以以第一个参数为标识,开始 javascript 执行过程的数据收集。和 Chrome 控制台选项开 Profiles 比较类似。
console.profileEnd():配合 profile 方法,作为数据收集的结束。
console.table():将数据打印成表格。
console.time():计时器,接受一个参数作为标识。
console.timeEnd():接受一个参数作为标识,结束特定的计时器。
console.timeStamp(): 添加一个标记到浏览器的 TimelineWaterfall 工具。
console.trace():打印stack trace
console.warn():打印一个警告信息。

字符串替代和格式设置

说明符输出
%s将值格式化为字符串
%d or %i将值格式化为整型
%f将值格式化为浮点值
%o将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样
%O将值格式化为可扩展 JavaScript 对象
%c将 CSS 样式规则应用到第二个参数指定的输出字符串
//使用数字说明符设置 document.childNodes.length 的值的格式。同时使用浮点说明符设置 Date.now() 的值的格式。
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());
//将您的日志输出设置为蓝色的大字体
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

Demo

使用 console.table() 方法查看结构化的数据和比较数据对象。可以轻松地查看包含类似数据的对象和数组。调用时,此方法将提取对象的属性并创建一个标头。行数据则来自每个索引的属性值。

在最基本的形式中,您只需要一个由具有相同属性的多个对象组成的数组,console.table() 命令将执行剩余操作:

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

20180612143443.png

可以使用 console.table() 的第二个参数记录更多高级对象。定义一个包含您希望显示的属性字符串的数组,如下所示:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

20180612143636.png

Console API 参考:https://developers.google.com/web/tools/chrome-devtools/console/console-reference

标签: JavaScript, console

添加新评论