js的console你知道多少

Posted 2021-02-06 叶家伟的博客

js的console你知道多少？

1. 列出所有的console属性

   console.dir(console) 或者
   console.dirxml(console)

2. 记录代码执行时间

   console.time("test");
   var count = 0;
   for(var i=0; i < 10000; i++) {
       count++;
   }
   console.timeEnd("test");

3. 输出消息格式化

   console.log("Hello, %s", "world");
   支持的格式符号  
       %s        字符串
       %i %d     整数
       %f        浮点
       %o        dom元素
       %O        js对象
       %c        css样式
   给输出的消息添加样式
       console.log("%cHello %cWorld", "color:red;font-size:xx-large", "color: green;font-size:large");

4. 消息分组

   console.group() 输入此代码，输出消息可折叠
   console.groupCollapsed() 和group的功能类似
   console.groupEnd() 退出分组

5. 展示调用堆栈

   function f1() {
       f2();
   }
   
   function f2() {
       f3();
   }
   
   function f3() {
       // 方式1，直接调用trace
       console.trace();
   
       // 方式2，访问属性
       var e = new Error("test");
       console.log(e.stack);
   }
   
   f1()

6. 用表格展示

   console.table({"a":"1","b":"2"})

7. 对相同的值计数

   console.count("1"); // 1
   console.count("1"); // 2

8. 清屏

   console.clear();

9. 断言测试

   console.assert(1==="1") // 报错
   console.assert(1=="1") // 不报错