开启博客之旅

• 我的第一篇博客
• Console用法总结
• 一、什么是Console?
• 二、为什么不直接使用 alert 或自己写的 log？
• 三、Console用法
• 1. 输出、清空信息
• 2. 当表达式expression为false时，输出信息
• 3. 数据表格化
• 4. 统计代码执行时间
• 5. 分组输出信息
• 6. 统计代码执行次数
• 7. 将对象以树结构显示 / 列出对象的所有方法
• 8. 输出节点所包含的所有html/xml代码

我的第一篇博客

每个人都有属于自己的第一篇博客 ，我也不例外。我不善于言表，写博客是为了让自己养成良好的习惯。31岁才转行做前端开发，记忆力已大不如前，很多时候需要靠笔记和百度解决问题，但这并不是长久之计。每天写一篇博客，在对工作中遇到问题总结的同时，也可以加深记忆，这点对我来说尤为重要。

Console用法总结

一、什么是Console?

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象可以输出信息到 Console 窗口中。

二、为什么不直接使用 alert 或自己写的 log？

alert 弹出窗口会中断程序，而且 alert 显示对象 4000 永远显示为[object ]。
log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好。

三、Console用法

1. 输出、清空信息

// 输出普通信息
console.log('普通信息');
// 输出提示信息
console.info('提示信息');
// 输出错误信息
console.error('错误信息');
// 输出警告信息
console.warn('警告信息');
// 清空console中的所有信息
console.clear();

console.log() 方法第一个参数支持类似 C 语言 printf 字符串替换模式。支持下面几种替换模式：

1. %s 代替字符串
2. %d 代替整数
3. %f 代替浮点值
4. %o 代替Object

console.log("%d年%d月%d日",2016,8,22);    // 输出结果为:2016年8月22日
console.log("%d年%s月%d日",2016,'08',22); // 输出结果为:2016年08月22日

2. 当表达式expression为false时，输出信息

// 当表达式expression为false时，输出信息
console.assert(expression, '当expression为false时才输出！');

3. 数据表格化

let thisObj = [
　　{ name: 'quber', email: 'qubernet@163.com', qq: 757200834 },
　　{ name: 'xm', email: 'xm@126.com', qq: 757200833 },
　　{ name: 'jack', email: 'jack@sina.com', qq: 757200832 },
　　{ name: 'maer', email: 'maer@gmail.com', qq: 757200831 }
];
console.table(thisObj);  // 将数组对象用表格的方式显示

4. 统计代码执行时间

console.time('统计时间'); // 创建计时器

var count = 0;
for (let i = 0; i < 999999999; i++) {
　　count++;
}
console.timeEnd('统计时间'); // 停止计时器，显示时间

5. 分组输出信息

console.group('分组1'); // 分组开始
console.log('分组1-1111');
console.log('分组1-2222');
console.log('分组1-3333');
console.groupEnd();   // 分组结束

console.group('分组2');
console.log('分组2-1111');
console.log('分组2-2222');
console.log('分组2-3333');
console.groupEnd();

6. 统计代码执行次数

function testFn() {
　　console.count('当前执行的次数');
}
testFn();
testFn();
testFn();

7. 将对象以树结构显示 / 列出对象的所有方法

let thisObj = {
　　name: 'quber',
　　age: 26,
　　fn: function() {
　　　　alert('quber');
　　}
};
console.dir(thisObj); // 将对象以树结构显示

console.dir(console); // 输出console的所有方法

8. 输出节点所包含的所有html/xml代码

// 输出节点所包含的所有html/xml代码
console.dirxml(document.getElementsByClassName('.kx-frm-gd')[0]);
console.dirxml($('.kx-frm-gd'))

以上是关于Console的总结，通过这些内容让我进一步认识了Chrome开发者自带工具功能的强大，可以更高效的做前端调试。

参考链接: https://www.geek-share.com/detail/2682834981.html