iThome online | iT邦部落格 | Windows 7 Club

載入中...

wordsmith

IT邦好手
8級

利用Firebug的console功能作JavaScript偵錯

Firebug是Firefox上的一個超好用plugin,在開發網頁時,不管是用來檢視DOM,修改CSS、甚至是Ajax程式的資料遞送,都能透過它來增加開發效率。



收到書籤:發佈到twitter      
分享時間:2008-03-20 12:12:18
▼ ADVERTISEMENT ▼
分享內容(
22

Firebug的功能何其多,也何其好用,但是有一個叫console的東西,一直被我視而不見,直到有一天,切過去看了一下,實在不明所以,於是祭出Google大神翻動一下網海,誰知不看萬事休矣,一看之下真是不得了了,這console真的是不可名狀之好物呀。

在console上可以直接執行JavaScript的語法,因此你可以利用console直接來操作網頁上的元件,我自己就經常用jQuery語法來取dom,直接修改語法,模擬實際修改的結果。

console上直得深究的地方很多,今天先來介紹個console.log的功能。

一般我們在JavaScript除錯時,通常會用到alert(),來抓取某個變數的變化,不過有時如果變數一多,想要得到一個有意義的顯示訊息就會很麻煩,例如:

var a = 5;
var b = 10;

我們如果想要知道 a、b兩個值的話,使用alert的話要這樣加工:

alert('a值是:'+a+',b值是:'+b);

這樣又是字串、又是變數的,很麻煩。

這時我們可以請出console.log來幫忙,透過console.log的話,就可以用:

console.log('a值是:%d,b值是:%d',a,b);

這種方式和php的printf方式一樣,對於偵錯時,比一直跳出的alert方便許多。

可惜的是這種方式只能在firefox上使用,而且由於IE不能辨識console.log,所以會顯示錯誤。

不過如果在開發階段,而且是用Firefox來輔助的話,console還是很好用的。

除了console.log,它還有console.info、console.warn、console.error等不同,完整的console API 可到

http://www.getfirebug.com/console.html

參考參考。

英文看不懂?沒關係,有個中文摘要讓你馬上明白,要不要6分鐘,不用!要不要5分鐘,不用!3分鐘馬上就學會!(這是這篇文章說的,沒在3分鐘學會請洽原文作者)。

圖為firebug執行console的狀況

利用Firebug的console功能作JavaScript偵錯
yce701116( IT邦初學者1級 )
2008-04-22 22:51:59
感謝分享這個資訊
fanylu60( IT邦初學者1級 )
2008-04-23 23:07:56
感謝提供分享
tgunlu( IT邦初學者1級 )
2008-04-23 23:48:01
謝謝分享
iT邦守護神
antijava( IT邦初學者1級 )
2008-04-27 20:37:59
分享自己的經驗,加油
tyc1220( IT邦初學者1級 )
2008-05-20 03:46:31
謝謝分享
bigmotor( IT邦初學者6級 )
2008-07-19 23:31:27
~感謝分享這個資訊~
jamesjan( IT邦好手1級 )
2008-08-16 09:24:58
相當好用
開發網頁時一定要用到的
gric( IT邦好手3級 )
2009-03-16 20:20:26
對日後設計網頁有幫助,謝謝分享咯!

回應

請填寫您的回應,長度限為1,000個字,回應不計點數,也不限使用次數



 

檢舉違規

違規事項:

*補充檢舉理由(可省略),字數不可超過100字

推薦

推薦理由:


*給回答者的鼓勵(可不填),字數不可超過100字

▼ ADVERTISEMENT ▼

訂閱每日摘要 HOT!

iT邦幫忙即日起提供「每日摘要」給尚未註冊的邦友,只要輸入您的E-mail,每日就可以收到最新的發問與分享
[查看最新的每日摘要]