VSCode之使用 console 的五大技巧

console API 提供了允许开发人员执行调试任务的功能。console API 通过console对象使用。console对象提供了浏览器控制台调试的接口，可以通过只读属性window.console获取到，也可以简单的通过console引用。

一、打开控制台面板

1、打开 Chrome 开发者工具：

1. 按F12打开；
2. 在页面元素上右键点击，选择 “检查”；
3. 在 Chrome 菜单中选择更多工具 > 开发者工具；
4. 使用快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)。

2、打开控制台面板：

1. 按 Esc 键自动弹出；
2. 点击控制台按钮；
3. 使用快捷键 Ctrl + 2 (Windows) 或 Cmd + 2 (Mac)。
4. 使用快捷键 Ctrl + ] (Windows) 或 Cmd + ] (Mac)。

二、打印消息

1. 根据事件级别选择打印消息的类型
   

   1、通过选择log(日志)、info(信息)、warn(警告)、error(错误)等不同的方法，可以以适当的颜色打印不同事件级别的消息。
   2、点击右键，可以选择另存为...下载消息。
   3、点击按钮所有级别后可以筛选只展示选中的事件级别。

   console.log('console.log');
   console.info('console.info');
   console.warn('console.warn');
   console.error('console.error');

   

2. 在log()方法中使用占位符。需要注意的是，当要替换的参数类型和预期的打印类型不同时，参数会被转换成预期的打印类型。

   let str = 'str',
       ints = 1,
       floats = 0.5,
       obj = {};
   console.log('String: %s, Int: %d, Float: %f, Object: %o', str, ints, floats, obj);
   // String: str, Int: 1, Float: 0.5, Object: {}

三、优化样式

1. 使用{}包装变量，使输出结果更易读。

   let names = 'chair',
       inventory = 5,
       unitPrice = 45.99;
   console.log(names, inventory, unitPrice);
   // chair 5 45.99
   
   console.log({ names, inventory, unitPrice }); // 使用 {} 包装
   // {names: 'chair', inventory: 5, unitPrice: 45.99}

2. 使用console.table()将列表型的数据打印成表格。table()方法会把所有元素罗列在每一列，可以使用可选的columns参数选择要显示的列的子集。点击表格的列名可以按升序或降序重排，拖动中间的边框可以调整列宽。

   const items = [
       { name: 'chair', inventory: 5, unitPrice: 45.99 },
       { name: 'table', inventory: 10, unitPrice: 123.75 },
       { name: 'sofa', inventory: 2, unitPrice: 399.5 },
   ];
   console.table(items);
   console.table(items, ["name"]);

   
   
   

3. 配合使用console.table()和{}


   console.table({ name, inventory, unitPrice });

   

4. 使用console.dir()打印显示一个由特定的 JavaScript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。
   

   console.log({ name, inventory, unitPrice }); // 使用 {} 包装
   // {name: 'chair', inventory: 5, unitPrice: 45.99}
   
   console.dir({ name, inventory, unitPrice })

   

5. 使用console.group()进行消息的分组。
   
   1、group()创建了一个新的内联分组，后续所有打印内容将会以子层级的形式展示，可调用 groupEnd()来闭合组。

   2、使用console.groupCollapsed()内容打印出的方法默认是折叠的，用户必须点击按钮才能将折叠的内容打开。可调用groupEnd()来闭合组。

   console.group();
     console.log('Test message');
     console.group();
       console.log('Another message');
       console.log('Something else');
     console.groupEnd();
   console.groupEnd();

   

   console.group();
       console.log('Test message');
       console.groupCollapsed();
               console.log('Another message');
               console.log('Something else');
       console.groupEnd();
   console.groupEnd();

   

四、优化缺陷调试

1. 使用console.assert()断言，如果断言为false，则将一个错误消息写入控制台。如果断言是true，没有任何反应。

   console.assert(true,  'the word is %s', 'foo');
   console.assert(false, 'the word is %s', 'foo');
   // 断言失败： the word is foo

2. 使用console.trace()跟踪，trace()方法向控制台输出一个堆栈跟踪。

   function foo() {
     function bar() {
       console.trace();
     }
     bar();
   }
   foo();

   

3. 使用console.time()计算时间，time()会启动一个以入参作为特定名称的计时器。

   1、入参用来标记这个计时器，作为参数调用console.timeLog()可在控制台输出计时器的值，作为参数调用console.timeEnd()可以停止计时并将经过的时间在终端中打印出来。
   2、在显示页面中可同时运行的计时器上限为10,000。
   

   console.time('Timer');
   let total = 0;
   for (let j = 1; j <= 100; j++) {
     total += j;
   }
   console.timeLog('Timer');      // Timer: 0.066162109375 ms
   console.log('Result', total);  // Result 5050
   console.timeEnd('Timer');      // Timer: 0.148193359375 ms

4. 使用console.count()输出count()被调用的次数，方法接受一个可选参数label。如果提供了label，会记录使用该特定label调用count()的次数，countReset()会重置与label关联的计数。

   for (let i = 0; i < 2; i++) {
     console.count();
   }
   // default: 1
   // default: 2
   
   console.count();
   // default: 3
   
   console.count('Bob');
   console.count('Bob');
   console.countReset('Bob')
   console.count('Bob');
   // Bob: 1
   // Bob: 2
   // Bob: 1

5. 使用console.clear()清除消息

   1、运行console.clear()会清空控制台信息并返回控制台数据已被清除。

   2、如果在设置中选择开启“在浏览时保留日志”，运行console.clear()不会清空信息，而是会返回由于要“保留日志”，系统已阻止console.clear()发挥作用。

   

五、使用控制台的技巧

1. 使用实时表达式

   

2. 可在偏好设置中勾选显示时间戳等配置控制台设置