Firebug 與 Chrome 的 console 好用招術

Javascript 程式設計師一定要會用 console 來除錯。 在 firefox 或 chrome 裡面， 按 ctrl-shift-i 打開 「開發者工具」， 然後切換到 「主控台/console」 分頁。 分頁最下方有一列可以輸入命令。

請做一點 語法練習 再回來看 console 使用技巧。 注意： 以下的指令/函數僅適用於 console； 在正式的程式碼裡面可能會無效!

jQuery 的 css selector 語法太好用了， 大家都忍不住要支援它。 即使一個頁面並沒有引用 jQuery， 你還是可以在 firebug 裡面用 css selector 的語法。 比方說， 請開一個分頁檢視 「令開發者愛恨交織的 javascript」， 然後在 console 裡這樣抓出該網頁上所有的超連結： urls = $('a') 或抓出所有的 strong： strong = $('strong')。

想要在 console 上面同時印出好幾個變數的名字跟變數的內容嗎? 用 「,」 比用 「+」 方便多了： console.log('urls: ', urls, ' strong:', strong) 這樣就可以看到物件內容而不是只顯示一個 「Object」。 (我以前一直用 JSON.stringify()， 太辛苦了!)

變數名字如果很長， 可以只打前面幾個字母就好， 它會列出符合名稱的少少幾個變數清單讓你選； 如果只有一個符合的變數， 手不必離開鍵盤， 直接按 Tab 鍵讓它自動完成。 請在 臺灣人口互動統計圖 頁面打開 console， 打 G.fu 然後按 Tab 鍵、 再按 Enter。 另外再試試 G.tar 然後選 G.targetCensusData。 這個複雜的資料結構內容， 改用 dir() 以樹狀結構方式呈現來看比較清楚。 如果資料是二維陣列或是類似二維陣列的有規律資料結構， 還可以用 console.table() 表格方式來看更清楚。 也可以指定只顯示部分欄位。 以下這幾句請比較一下： 

G.targetCensusData
dir(G.targetCensusData)
console.table(G.targetCensusData)
console.table(G.targetCensusData, ['name', '男', '女'])

打很長的命令， 覺得寫在一列太擠太難讀嗎? 在 firebug 裡， console 右側上下角各有一個 「顯示命令編輯器」 的按鈕， 按下去會出現一個 (多列的) 小編輯器。 在 chrome 裡， 按 shift-enter 可以繼續延伸編輯上一列未完成的指令。

執行 document.body.contentEditable = true 之後， 你的瀏覽器突然就變成 html 編輯器了! 若要儲存， 可以切換到 firebug 的 html 分頁， 在最外層物件 (html) 上面按右鍵， 選 「複製 html」， 然後開 vim 或 geany 或 nano 任何一個編輯器， 把它貼上去就 ok 了。

再在 script 分頁底下切換到 stack 子分頁 先在 console 分頁底下啟動 「break on all errors」 如果錯誤發生在別人寫的函式庫裡面， 該怎麼辦? 通常是因為我們傳進去的參數不正確。 例如在函式庫改版升級時， 特別容易出現這種狀況。 這時要先問： 到底是自己的哪一行程式碼去呼叫到這個函式庫的 -- 我們需要挖出 stack 來看。 但是 stack 的資訊一直變化， 顯然不可能隨時更新給我們看。 必須先在 console 分頁底下， 從左上角啟動 「break on all errors」， 再切換到 script 分頁， 右側有一個 stack 子分頁。 重新整理頁面， 你的程式再次執行時， 會停在出錯的地方， 此時從 stack 子分頁就可看到一層層的呼叫歷史。

這篇 有更多小技巧教學。 大推 How to Not Hate JavaScript: Tips from the Frontline。 也請搜尋 「firebug console tips」 或 「firebug console tricks」。