Skip to main content

3 分鐘學會用 firebug 除錯

· 2 min read

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

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

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

印出一般訊息 : console.log

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

console.log (變數);

或者印出包含變數的敘述

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

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

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

console.info (a) 提示圖示 console.warn (b) 警示圖示 console.error (c) 錯誤圖示

使用除錯介面 debugger

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

debugger; .....

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

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

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

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

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