[唸書] 我們回不去沒有 firebug 的日子了 @ 熱血青年很向上

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

出場人物介紹：

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

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

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

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

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

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

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

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

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

小批連忙打開 Mozilla Firefox，這是一種瀏覽器，因為上次客戶說希望網站能在五種瀏覽器上都能正常執行才安裝的，小批連外掛都沒有裝過。好險這款瀏覽器的智商比小批還高，只要透過 Firefox 打開 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;">。在此處所做的修改不會寫入到檔案中，只要畫面重新整理，所做的調整就會消失）

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

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

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

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

世界末日好像也沒有那麼近嘛。（茶）

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

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

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

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

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

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

console.debug("要印出的內容")：白底黑字，最素的一款記錄模式，可以用來區別屬於「除錯訊息」的 log 資訊。
console.info("要印出的內容")：藍底黑字，最前面有 "i" 圖示，可以用來區別屬於「訊息」的 log 資訊。
console.warn("要印出的內容")：黃底黑字，最前面有驚嘆號圖示，可以用來區別屬於「警告」的 log 資訊。
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 所在之處的螢火蟲。

【參考資源】