有趣的Console
console
是前端开发必备调试技能,console
对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。由于不同的浏览器,所以再往下看的时候,最好在浏览器调试里面,输入以下代码:
console.context()
下图是在Chrome里面打印出来的
方法
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()
:打印字符串,使用方法比较类似 C
的 printf
格式输出 。console.profile()
:可以以第一个参数为标识,开始 javascript
执行过程的数据收集。和 Chrome
控制台选项开 Profiles
比较类似。console.profileEnd()
:配合 profile
方法,作为数据收集的结束。console.table()
:将数据打印成表格。console.time()
:计时器,接受一个参数作为标识。console.timeEnd()
:接受一个参数作为标识,结束特定的计时器。console.timeStamp()
: 添加一个标记到浏览器的 Timeline
或 Waterfall
工具。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]]);
可以使用 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"]);
Console API 参考:https://developers.google.com/web/tools/chrome-devtools/console/console-reference
你写作时间正好是我的生日,祝我生日快乐吧!
朋友,祝你生日快乐:)