Nio 的個人網站

[ javascript ] firebug console 主控台訊息除錯

開始寫 javascript 要除錯通常從 alert（）開始，不過在遇到變數非字串時就需要另外寫函數處理。其實開發者的好幫手 - firebug 很早就提供主控台功能，除了看已寫好的 javascript 是否正確外，拿來提早顯示除錯訊息也不錯。

簡單記錄一下

• console.log('這裡應該要顯示');
  把要顯示的訊息出現在主控台，避免 alert 阻斷操作流程。
  
  除了一般的記錄還有
  
  • console.info('');
    
  • console.debug('');
  • console.warn('');
  • console.error('');
    
    
• 佔位顯示 console.log("%d年%d班共有學生%d人",3,10,50);
  %d  顯示數字
  %f   顯示浮點數字
  %o  顯示一個物件內容
  

  例如： var car={};
               car.door = '紅色';
               car.glass = '不透明';
  console.log("%o",car);
  顯示為 Objecj {door="紅色", glass="不透明"}
  

• 顯示物件內容 console.dir( var);
  要顯示物件內容最簡單的方式就是用這個。
  
  
• 顯示指定節點 html / xml
  　var table = document.getElementById("table1");
      console.dirxml(table);
  
• 分組顯示 console.group("");  console.groupEnd();
  訊息太多需要分組時，這樣用
  console.group("第一組");
  

  console.info('小明資料');
  console.info('小華資料');
  

  console.groupEnd();
  console.group("第二組");
  

  console.info('小王資料');
  console.info('小沈資料');
  

  console.groupEnd();
  
  
• 判斷是否為真 console.assert();
  var car = 2000;
  console.assert(car == 2001)
  
  
• 追蹤函數調用路徑 console.trace();
  把這個放在函數中，每當這個函數被調用時就會產生記錄。
  
  
• 計算程式運行時間 console.time(); console.timeEnd();
  就是計時功能，開頭用 console.time("計時器一");
  結束時用 console.timeEnd("計時器一");
  
  
• 性能分析  console.profile(); console.profileEnd();
  在目標區段前後加上，可產生分析表。
  
  

以上記錄有用過的方法，更詳細說明可以到這裡看。