Firebug 與Chrome 的console 好用招術 - 朝陽科技大學

請做一點語法練習 再回來看console 使用技巧。

注意： 以下的指令/函數僅適用於console； 在正式的程式碼裡面可能會無效! jQuery 的css selector 語法太好用了， 大家 ... javascript 語法練習 callback RE簡介 RE規則 JSRE 統計加總 json console 風格工具 jQuery讀檔 #以下舊的# 新手急上手 檢查語法 firebug 網頁混搭 外掛 light dark 我的部落格: 人權 玩具 快速跳到: 社群活動 本層目錄 上層目錄 此頁@朝陽 此頁@資管 English Firebug與Chrome的console好用招術 Javascript程式設計師一定要會用console來除錯。

在firefox或chrome裡面，按ctrl-shift-i打開「開發者工具」， 然後切換到「主控台/console」分頁。

分頁最下方有一列可以輸入命令。

請做一點語法練習 再回來看console使用技巧。

注意：以下的指令/函數僅適用於console； 在正式的程式碼裡面可能會無效! jQuery的cssselector語法太好用了，大家都忍不住要支援它。

即使一個頁面並沒有引用jQuery， 你還是可以在firebug裡面用cssselector的語法。

比方說，請開一個分頁檢視 「令開發者愛恨交織的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了。

如果錯誤發生在別人寫的函式庫裡面，該怎麼辦? 通常是因為我們傳進去的參數不正確。

例如在函式庫改版升級時，特別容易出現這種狀況。

這時要先問：到底是自己的哪一行程式碼去呼叫到這個函式庫的-- 我們需要挖出stack來看。

但是stack的資訊一直變化， 顯然不可能隨時更新給我們看。

必須先在console分頁底下，從左上角啟動「breakonallerrors」， 再切換到script分頁，右側有一個stack子分頁。

重新整理頁面，你的程式再次執行時，會停在出錯的地方， 此時從stack子分頁就可看到一層層的呼叫歷史。

這篇有更多小技巧教學。

大推 HowtoNotHateJavaScript:TipsfromtheFrontline。

也請搜尋「firebugconsoletips」 或「firebugconsoletricks」。

本頁最新版網址: https://www.cyut.edu.tw/~ckhung/b/js/console.php; 您所看到的版本:August19201901:29:37. 作者:朝陽科技大學資訊管理系洪朝貴 寶貝你我的地球,請 減少列印,多用背面,丟棄時做垃圾分類。

本文件以 CreativeCommonsAttribution-ShareAlikeLicense 或以 FreeDocumentLicense方式公開授權大眾自由複製/修改/散佈。