Firebug,陪你快快樂樂 debug,啾咪 ^.<

以下為方便舉例,所以設計一個模擬情境,若有雷同純屬巧合。


出場人物介紹:

  • 小批,搞不清楚狀況的工程師 (programmer),腦容量約一顆馬鈴薯大小,永遠記不得檔案位置。
  • 阿特,休假無敵多的設計師 (art),熱愛雲遊四海的生活。
  • 阿Q,話不多的測試工程師 (quality engineer),毫無反應,就只是個長老。


我好熱愛 Firebug 之 CSS配置不求人

小批覺得這天簡直是世界末日。

主管一上班就告訴他,網站的超連結顏色看起來不夠和氣生財,「設什麼灰色,也太暗淡了吧,都要過年了欸!今天下班前,你去把它改成紅色的讓我看看。」

可是平常負責修改網頁 CSS 的阿特,這時候又去法國喝咖啡了,要不曉得過幾天才會回來。小批知道主管最討厭別人說「這個我辦不到欸」,但是若答應下來、又不能如期改給主管看,大概也會淪入被釘在牆上的命運。

平常阿特休假都會開手機,小批隨時 call out,都可以得到答案;但是僅限於阿特在國內的時候。這次阿特出國,為了防止手機進入帳單爆增的漫遊模式,阿特早早就昭示天下,他這次會把手機關掉,回台灣才會開機。

「小事,怎會世界末日,明天才 2012。裝 Firebug,改,抓圖,好了。」小批正在寫 e-mail 向阿特哭訴這次的情境,希望阿特看到信趕快回應,阿Q突然從小批右手邊冒出來,嚇得小批跳起來。

「什麼 Firebug?是你平常用的那個長得像蟑螂的玩意嗎?」小批抓住阿Q的袖子問。

「它是螢‧火‧蟲。」阿Q揮一揮衣袖不帶走一片雲彩地走了。

小批連忙打開 Mozilla Firefox,這是一種瀏覽器,因為上次客戶說希望網站能在五種瀏覽器上都能正常執行才安裝的,小批連外掛都沒有裝過。好險這款瀏覽器的智商比小批還高,只要透過 Firefox 打開 firebug 的網頁,點選畫面上「新增至 Firefox」的按鈕,再依照視窗上的提示點選下一步或同意安裝之類的按鈕,很快地就裝好了。

Firebug 使用心得:在搜尋引擎輸入 "firebug",就可以找到 firebug 的專屬頁面;點選 "新增至 firefox",再依照瀏覽器提示按確認就可以完成安裝囉!

但是接下來要怎麼辦啊……

一陣亂按之際,小批突然發現,按下右鍵時,選單多了「觀察元素」。點下去後,視窗下半部跑出了 Firebug 的觀察視窗,小批一陣摸索後在視窗右側的「樣式」分頁裡找到想嘗試修改的 CSS。小批記得字體顏色的 CSS 屬性是 color,但是一緊張,就忘了紅色怎麼拼、只記得是 r 開頭。好險 Firebug 提示小批,r 開頭的屬性有一個叫做 "red"。輸入後,按下 Enter,畫面上的元素果然馬上變成紅色。

(註:在這邊是以修改 element.style 為例,這個 class 表示我們將修改目前選取到的元素,輸入後,會以 inline style 的方式插入到元素中,比方說 <a href="http://infuture.pixnet.net" style="color: red;">。在此處所做的修改不會寫入到檔案中,只要畫面重新整理,所做的調整就會消失)

Firebug 使用心得:對準要修改的元素按下右鍵,就可以在右鍵選單找到"觀察元素",點下去就能選取元素、進行觀察與暫時性的修改

小批連忙將連結文字修改成紅色的畫面抓下來,寄給主管。每天平均 check mail 兩百遍的主管,很快地從他的隔間裡走出來,「嗯,紅的好,紅的大吉大利。你去把檔案改一改吧。」

晴天霹靂!小批再次感覺到世界末日向他逼近!因為這個網站架構滿大的,阿特所設定的 CSS 組合多達上百組、檔案也分成十幾個,每次小批想要修改任何元素的顏色,老是搞不清楚該改哪個檔案(小批常常想問總務,公司申請擴充設備的申請書裡,有沒有「擴充腦容量」這個選項)。阿特不在,小批該怎麼找到檔案呢?

此時小批回到座位上一陣摸索,發現一樣在 Firebug 視窗右側的「樣式」分頁裡,許多 CSS 後頭都有個超連結。小批先是直接點下去,發現 Firebug 載入了該份 CSS 檔案的所有內容,但是這時還是不知道路徑何在……

此時靈光一現,再點點右鍵,看到「開啟至新分頁」,小批趕緊點下去,發現到開啟的新分頁裡,網址列就有完整的檔案路徑。小批趕緊按照檔案路徑找出檔案,在適當的位置把剛才在 Firebug 視窗中嘗試修改的 CSS 寫進去。重新整理網頁後,畫面果然出現期待中的配色。

世界末日好像也沒有那麼近嘛。(茶)

Firebug 使用心得:也可以透過這個工具很方便地找到 CSS 所屬的檔案路徑!





我好熱愛 Firebug 之 告別 alert,正經 debug

阿特結束休假回國了。又回到風和日麗的好時光。小批悠哉地蹺起腳來吃著洋芋片,一邊瘋狂地點著畫面上的 alert 視窗。每次 debug,小批總是習慣把他想瞭解的值透過 alert 印出來。不過,每次選取不到頁面上的 DOM 元素,把目前抓到的內容印出來時,小批最害怕的就是看到:

  • [object object] ,天曉得兩個阿伯捷特是什麼玩意啊,抓對也是 object、抓錯也是 object 啊。
  • 有太多東西要檢視,所以設定太多個 alert,看到第五個就忘了第一個是什麼了。


「一直按螢幕上跳出來的 alert,不覺得好像在打地鼠?正經點阿~有 console 可以用咩。」阿Q再次端著剛泡好的大吉嶺從小批背後飄過,悠悠地撂下這句話。

「什麼 console?」小批趕緊上網搜尋,發現原來在 Firebug 主視窗裡,左邊視窗那個預設停用的「主控台」就是阿Q說的 console。可是怎麼用呢?

小批打開了他的程式碼,在他想印出內容的地方加上主控台的記錄指令。網路上說,主控台的記錄指令有四種:

  1. console.debug("要印出的內容"):白底黑字,最素的一款記錄模式,可以用來區別屬於「除錯訊息」的 log 資訊。
  2. console.info("要印出的內容"):藍底黑字,最前面有 "i" 圖示,可以用來區別屬於「訊息」的 log 資訊。
  3. console.warn("要印出的內容"):黃底黑字,最前面有驚嘆號圖示,可以用來區別屬於「警告」的 log 資訊。
  4. console.error("要印出的內容"):紅底紅字,最前面有 "X" 圖示,可以用來區別屬於「錯誤」的 log 資訊。

這幾種 log 指令,在 IE 8(含)以後的版本、Google Chrome,這兩款瀏覽器所附的開發者工具 (developer tool),皆可適用;但在較舊版本的瀏覽器由於不支援,因此執行到這些 console 指令時會跳出錯誤訊息。(註:按 F12 即可叫出 Firefox 的 Firebug,或 IE & Chrome 的開發者工具)

另外因為想要瞭解目前的程式碼執行所需時間,console 裡也提供 time() 這個方法來計算時間。用法是 console.time(“name”),試了一下,.time() 和 .timeEnd() 裡面的參數要設一樣的值。原本在網路上看到一個範例寫 console.time(“開始”); console.timeEnd(“結束”),試了半天都沒辦法取到執行時間。Orz


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>測試用網頁</title>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>

<divid="container">
    <pid="para"class="para">第一段</p>
    <pclass="para">第二段</p>
    <pclass="para">第三段</p>
</div>
</body>

<script type="text/javascript">
jQuery(document).ready(function () {
    console.time("paraAnimate");    // 開始計算執行時間
    console.info("選取 DOM 元素");     // 在主控台顯示訊息 (info)
    console.log($("#para"));        // 印出 DOM 物件
    $("#para").hide().show("slow"); // 這邊是小批正在開發的程式
    if ($("#para")) {
        console.warn("why1");       // 在主控台顯示警告 (warn)
    }
    if ($("#para").length != 3) {
        console.error("發生錯誤,元素個數應該是三個");      // 在主控台顯示錯誤 (error)
    }
    console.timeEnd("paraAnimate"); // 結束計算執行時間
});

</script>

</html>


小批看了主控台上的訊息記錄發現,奇怪,他明明就選標示為 para 的所有元素啊,不是應該是三個嗎?再定睛一看,才發現他誤把句號 (.) 打成井號 (#) 了,難怪只選到一個 id 為 para 的段落,而非選到三個類別 (class) 設定為 para 的段落!

小批接著試著使用 Script 分頁的偵錯工具。進入偵錯模式玩了一陣子後,小批發現,「繼續 (continue)」 可以按 F8 來執行。原本他想要逐個中斷點執行時,都照 Firebug 的提示按下 F5,然後就會發生整個網頁都重新整理的囧事。至於按下 F10 可以逐行執行、按下 F11 可以進入該行對應的 function 之中……這些快速鍵和 Visual Studio 之類的 IDE 很像,小批很快地就上手了。

(題外話:我稍微查了一下,發現已經有人把「按下 F5 這個工具提示應該寫成 F8」這個問題提報給原作者了,請期待新版會更正噢。 :D)

小批終於可以把腦容量空出來思考一下 bug 發生的原因,而不必再記憶 alert 上跳出來的訊息記得頭暈眼花了,把訊息印到主控台一目瞭然;也不用擔心畫面上的 alert 像打地鼠的關卡一樣不停冒出來,進入偵錯模式時也隨時都可以取消中斷點。






先前在噗浪上看過有人這麼說:會不會使用 debugger,將使開發效率 M 型化。建議先把 firebug 安裝起來,慢慢的就會用到你需要的功能啦。

喜歡嗎?安裝 Mozilla Firefox 網頁瀏覽器,接著安裝附加元件 firebug,你也可以養一隻幫你照亮 bug 所在之處的螢火蟲。



【參考資源】






, , , , , ,

小草 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 悄悄話