幾種偵錯 javascript 的方式

Firebug 這大概是在 Firefox 上的首選。主要的特點有：

1. 以瀏灠器外掛方式的存在，可以對「任何」網站進行偵錯。
2. 顯示的方式可以是同一視窗，也可以在不同視窗。同時用兩個螢幕寫程式時更加方便。
3. 定義了 "console.log", "console.info" 等方法，用來印出訊息
4. 有可設中斷點﹑步進的偵錯器
5. 有命令列可以立刻執行任意的 javascript 運算

6. 也可以顯示 DOM 與 CSS 的資訊

   另外還有一個 Firebug Lite，是要開發人員自行在 HTML head 裡面加入 <script> 的。在 Firefox﹑IE﹑Safari 上都可以用。但不如外掛版來得方便。而且，顯示方面偶爾會有問題。 Javascript Shell 是在 Firefox 上的 Bookmarklet，要拖到工具列上使用，會彈出新的視窗。新的視窗可執行任意的javascript運算。 Javascript Shell on IE 前述 Javascript Shell 的 IE 版本。有一陣子這是我唯一能夠使用的 javascript 偵錯工具 。 IE Developer Toolbar 微軟官方出的 IE 工具列。這個其實沒有辨法拿來偵錯 Javascript，只能拿來觀察目前的 DOM 而已。就算是這樣也算是不錯的用處。 Safari Debug Menu[把 Safari 的 Debug Menu 打開之後][6]，可以看到裡面有個 Javascript Console。上面會顯示出在 javascript 程式碼中呼叫 console.log﹑console.info 所印出來的訊息，印訊息的函式與 Firebug 相容。但只有訊息。簡單的說就是只能用 print 來 debug 的方式。（其實這也是一種不錯的方式啦）。 Jash最近才發現的另一套 Javascript Shell。功能跟 Firefug 一般完整。並且是以 Bookmarklet 形式使用。最棒的是，可同時在 Firefox 與 IE 上使用，還可以在 Safari 3 上面使用。這一套的 javascript console 做得也很完整，可以執行 javascript 運算式。而且跳出來的視窗可以隨意拖放。比起 Firebug lite 來說，我會選用這個。ExtJSExtJS 是一套非常完整的 UI 函式庫。其中有附一套精美的 Javascript Console，與 Firebug 相容。在 IE 上也可以使用。如果說有專案會用到 ExtJS 的話，就可以用它進行偵錯。

基本上，如果沒有 Jash 的出現，最難進行偵錯的環境是 IE 瀏灠器。有一陣子我甚至是使用 alert() 來找出錯誤發生的點。此外，在 IE 上要進行偵錯的話，把所有用到的 javascript 全部包成一個檔案會比較方便。為何？因為 IE 本身所提供的錯誤訊息，雖然帶有行號，但是沒有告訴你是哪一個 javascript 檔案。而且，那行號跟實際發生錯誤的行號差一。把全部的 javascript 都包成一個檔案的話，這個資訊才有用。當然，使用如 Jash 這般好工具的話，便可以輕鬆多了。

你問我為什麼要在 IE 上進行偵錯？因為有一堆問題只在 IE 上發生，這世間就是這麼殘忍阿（笑）。

Labels: debug, firefox, IE, javascript, safari