您的位置:首页 > 其它

开启博客之旅

BradyCC 2018-11-25 19:37 30 查看

开启博客之旅

我的第一篇博客

每个人都有属于自己的第一篇博客 ,我也不例外。我不善于言表,写博客是为了让自己养成良好的习惯。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

标签: