iT邦幫忙

22

利用Firebug的console功能作JavaScript偵錯

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


0
yce701116
iT邦研究生 1 級 ‧ 2008-04-22 22:51:59

感謝分享這個資訊

0
fanylu60
iT邦研究生 1 級 ‧ 2008-04-23 23:07:56

感謝提供分享

0
tgunlu
iT邦研究生 1 級 ‧ 2008-04-23 23:48:01

謝謝分享

0
海綿寶寶
iT邦大神 1 級 ‧ 2008-04-27 20:37:59

分享自己的經驗,加油

0
tyc1220
iT邦研究生 1 級 ‧ 2008-05-20 03:46:31

謝謝分享

0
bigmotor
iT邦研究生 5 級 ‧ 2008-07-19 23:31:27

~感謝分享這個資訊~

0
jamesjan
iT邦高手 1 級 ‧ 2008-08-16 09:24:58

相當好用
開發網頁時一定要用到的

0

對日後設計網頁有幫助,謝謝分享咯!

我要留言

立即登入留言