相信很多 web 开发者跟我一样有个习惯, 经常会不自觉的打开感兴趣网站的控制台 (Console). 很多公司会在控制台中打印一些招聘或者安全警告的信息. 作为一位开发者, 当然更多的关心的是这些效果是如何实现的. 今天我们不妨来重写认识下 Console 这个 API 对象.
简介
Javascript console 是被提供用来访问浏览器 Debug 控制台的一个全局对象, 一般我们可以直接通过 console 或者 window.console 的方式访问该对象. 通常我们会利用该对象 debug 调试, 当然你也可以跟其他公司一样, 在上面发招聘信息.
其实除去我们平时常用的
console.log,console.error,console.warn,console.info
方法外, 其实 console 还有很多非常有用的 API. 当然, 事先已经知道的同学当我没说. 先看下列这张表:
方法 | 用途 |
---|---|
console.assert() | 判断第一个参数是否为真,false 的话抛出异常并且在控制台输出相应信息。 |
console.clear() | 清空控制台 |
console.count() | 以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数。 |
console.debug() | console.log 方法的别称,使用方法可以参考 console.log() |
console.dir() | 打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性。 |
console.dirxml() | 如果可以,打印 XML/html 元素表示的指定对象,或者 JavaScript 对象视图。 |
console.error() | 打印一条错误信息,使用方法可以参考 < a href="https://link.juejin.im?target=https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions" target="_blank" rel="nofollow noopener noreferrer" ztid="132" ow="105" oh="17">string substitution https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions 。 |
console.group() | 打印树状结构,配合 groupcollapsed 以及 groupEnd 方法; |
console.groupcollapsed() | 创建一个新的内联 group。使用方法和 group 相同,不同的是 groupcollapsed 打印出来的内容默认是折叠的。 |
console.groupEnd() | 结束当前 Tree |
console.info() | 打印以感叹号字符开始的信息,使用方法和 log 相同 |
console.log() | 打印字符串,使用方法比较类似 c 的 printf 格式输出,可参考 string substitution 。 |
console.profile() | 可以以第一个参数为标识,开始 javascript 执行过程的数据收集。和 chrome 控制台选项开 Profiles 比较类似,具体可参考 chrome profiles |
console.profileEnd() | 配合 profile 方法,作为数据收集的结束。 |
console.table() | 将数据打印成表格。console.table [en-US] |
console.time() | 计时器,接受一个参数作为标识。 |
console.timeEnd() | 接受一个参数作为标识,结束特定的计时器。 |
console.timeStamp() | 添加一个标记到浏览器的 Timeline 或 Waterfall 工具. |
console.trace() | 打印 < a href="https://link.juejin.im?target=https://developer.mozilla.org/en-US/docs/Web/API/console#Stack_traces" target="_blank" rel="nofollow noopener noreferrer" ztid="169" ow="61" oh="17">stack trace https://developer.mozilla.org/en-US/docs/Web/API/console#Stack_traces . |
console.warn() | 打印一个警告信息,使用方法可以参考 string substitution。 |
- var a = 'a', b = 'b', c = 222;
- console.log('String %s, String %s, Number %d', a, b,c)
- // console.log
- var text = '使用 CSS 样式'
- console.log("%c"+text,"font-family: Cabin, Helvetica, Arial, sans-serif;text-align: left;font-size:32px;color:#B21212;");
- var tableData = [{
- name: 't1',
- age: 25,
- },{
- name: 't2',
- age: 25,
- }]
- // console.log(tableData);
- console.table(tableData);
- // console.group
- console.group('action', 'A');
- console.log('%c prev state', "color: #dddddd", '\n', {
- name: 'a'
- });
- console.log('%c next state', "color: #dddddd", '\n', {
- name: 'b'
- });
- console.groupCollapsed();
- console.log('我是 group 折叠内容');
- console.groupEnd();
- console.groupEnd();
- function notEqual(a, b) {
- console.assert(a === b, {
- msg: 'a is not equal b',
- a: a,
- b: b
- });
- }
- // console.assert
- notEqual({a: 1}, {a: 2});
- https://developer.mozilla.org/en-US/docs/Web/API/console#Outputtingtexttotheconsole https://developer.mozilla.org/en-US/docs/Web/API/console#Outputting_text_to_the_console
- https://developer.mozilla.org/zh-CN/docs/Web/API/Console
来源: https://juejin.im/entry/5b4079d75188251b3950c0bf