Ching Wei : This is My Life - 工作、攝影、旅遊

FireFox真的是很棒的軟體，有一大堆的外掛。
昨天突然看到一篇文章，有教一下FireBug如何Debug。
跟我之前的用法都不太一樣，很屌。
看文章可能不知道在說啥鬼東西，看影片最實在。
【影片】

完整的Firebug Command Line API在：
http://www.getfirebug.com/console.html (過去瞧瞧 Go~)

下面為原始文章的內容

3 分鐘學會用 firebug 除錯 (點我去看原始文章)

firebug 是 firefox 的一個插件.
可以說是當前用來 debug javascript 程式的最佳選擇.
firebug 還提供了一些好用的函式可以讓您的測試更順暢.

這段影片 展示了 firebug 提供的一些好用的函式.

廢話不多說, 馬上來看看吧:

1. 印出一般訊息 : console.log

就像許多程式語言中的 'print' 語句, firebug 提供的 console.log 語句可以直接印出變數值.
例如

console.log(變數);

或者印出包含變數的敘述

console.log("敘述: %d"%變數);

2. 印出具有提示圖示的訊息 console.info/console.warn/console.error

與印出一般訊息(console.log)使用的方式完全相同, console.info/console.warn/console.error 只是會在訊息前加上相應圖示

console.info(a) 提示圖示

console.warn(b) 警示圖示

console.error(c) 錯誤圖示

3. 使用除錯介面 debugger

只要在想要除錯的地方前加上一行加上 debugger 語句

debugger;
.....

執行時就會彈出一個互動式的除錯介面.
除錯介面提供了單步執行等功能, 並即時取得當前各相關變數的狀態.
也可以看到迴圈每次執行後改變的值



4. 計算花費時間 console.time/console.timeEnd

對於 AJAX 程式來說有些動作會花費較多的時間, 使用

console.time("跑")
.....
console.timeEnd("跑完")

將要測試的程式段包起來, 執行時就會印出該段程式所花費的執行時間

再增加一個蠻好用的

console.profile([title])

Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.

console.profileEnd()

Turns off the JavaScript profiler and prints its report.