console 指令進行 JS 調試的靈活用法

1.console.log() 占位符

console.log 支援的占位符包括：字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）：

console.log('字元串: %s, 整數: %d, 浮點數: %f, 對象: %o', '哈哈哈', 666, 6.66, {name: 'cedric'}); // 字元串: 哈哈哈, 整數: 666, 浮點數: 6.66, 對象: {name: "cedric"}
           

2.console.log() 添加 css 樣式

console.log('%c這句話含css樣式', 'color: #fff; background-color: #6666ff; padding: 8px 16px; border-radius: 6px');
           

3.顯示不同資訊

console.log('正常'); 

console.info('資訊');

console.error('錯誤');

console.warn('警告');
           

4. console.dir()

列印對象，不常用

5. console.table()

列印表格

6. 分組顯示

console.group("第一組");
    console.log("第一組第一條");
    console.log("第一組第二條");
console.groupEnd();
　　
console.group("第二組資訊");
    console.log("第二組第一條");
    console.log("第二組第二條");
console.groupEnd();
           

7. console.trace() 追蹤函數的調用軌迹。

foo();

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

列印結果：

8. console.time()和console.timeEnd() 顯示代碼運作時間

console.time("代碼運作時間");

　　for(var i=0;i<100000;i++){ }
console.timeEnd("代碼運作時間");
           

代碼運作時間: 3.316162109375ms