好久沒寫js程序了，首先碰到的問題就是如何調式。以前都是用FireBug在瀏覽器里調式，但在瀏覽器里找js腳本着實麻煩。能不能像調式Java代碼一樣直接在Eclipse里調式JavaScript呢？上網找了找果然有，不過資料不多，因此只能自己慢慢摸索了，記錄如下。
在Eclipse里調式JavaScript需要有JSDT（JavaScript Development Tools）插件，大部分Eclipse里都已經安裝了這個插件。如果不確定安裝了沒有，可到Help -> About Eclipse -> Installation Details -> Features里檢查（按Feature Name排序，然后找Eclipse JavaScript Development Tools）。
JSDT里有個JSDI（JavaScript Debug Interface）模塊，這個模塊定義了調式協議，並提供了一系列實現，支持目前主流的各個瀏覽器。有興趣的朋友可查看官方網站。不過這里我只選擇了Google Chrome瀏覽器，這其中的一個原因是Google自己提供了與JSDI集成的ChromeDevTools插件。
安裝起來也比較簡單（我用的是Eclipse Java EE IDE for Web Developers，Version: Indigo Service Release 2）：
* 在Eclipse里安裝ChromeDevTools插件，其Update Site為http://chromedevtools.googlecode.com/svn/update/dev/。安裝時我只全選了Google Chrome Developer Tools選項，沒選Google Chrome Developer Tools (Advanced)。目前的版本是0.3.8.201210040400。
* 上面這個ChromeDevTools插件只支持Google Chrome瀏覽器，因此我也下載了其最新版。
安裝完就可以測試了。需要三個步驟：
1）在Eclipse里建一個war工程，並寫一個測試的js文件。然后把這個war跑起來。
2）啟動Google Chrome瀏覽器，並帶上--remote-debugging-port=9222參數。然后打開上面的網頁地址。
3）在Eclipse里配置調式參數，然后設置斷點，看看能不能停在斷點處（就跟調式Java代碼一樣）。
為此我建了個測試工程，即File -> New -> Other... -> Web -> Dynamic Web Project，隨便起了個hhh的工程名，然后新增index.html和js/test.js兩個文件，如下：
index.html文件內容為：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 5 <title>Hello</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="./js/test.js"></script> 9 <h1>Hello!</h1> 10 <button value="點我" onclick="fff()"></button> 11 </body> 12 </html>
這個html在點擊“點我”后將調用fff()的JavaScript函數，這個fff()函數在js/test.js里。
js/test.js文件內容為：
1 function fff() { 2 var x = 'xxx'; 3 alert(x); 4 }
然后把這個hhh工程放到servers/Tomcat里跑起來（其實放到哪跑起來都行）。
再然后在DOS命令行輸入下面的命令啟動Google Chrome瀏覽器：
chrome.exe --remote-debugging-port=9222
這樣就打開了Google Chrome瀏覽器，並在9222端口上監聽，等待Eclipse JSDT/JSDI/ChromeDevTools來連接。
注意，如果你已經打開了Google Chrome瀏覽器，則上面的命令僅多打開一個瀏覽器窗口，但並未在 9222 端口上監聽（除非以前打開的瀏覽器已在該端口上監聽了）。解決方法有二，一是先關閉所有已打開的Google Chrome瀏覽器，然后執行上面的命令就能在 9222 端口上監聽；二是如這篇文章所介紹的增加 --user-data-dir=remote-profile 參數，具體如下：
chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\temp\chrome2
其中，你可根據你的需要把 c:\temp\chrome2 設置為其它目錄。
此外，你可在Google Chrome瀏覽器上輸入 http://localhost:9222 來驗證是否已在 9222 端口上監聽了。
然后輸入http://localhost:8080/hhh打開上面的測試頁，如下：
接着就是回到Eclipse里進行設置了。從菜單上選Run -> Debug Configurations...，然后新建WebKit Protocol，如下：
點擊Debug后系統彈出個對話框，問要調式瀏覽器里哪個Tab頁（如果沒打開多個瀏覽器，或瀏覽器里只有一個Tab頁，系統也可能不彈出選擇對話框），此處選http://localhost:8080/hhh，如下：
確定后多出了一個虛擬工程，如下：
這個虛擬工程自動拷貝了我們的js文件（其實是從網頁中拷貝過來的，下面會再說到）。我們既可打開虛擬工程中的js文件，也可打開原來的js文件來設置斷點。不過設置斷點前要先選擇斷點類型，即選擇：Run -> Breakpoint Types -> Chrome/V8 breakpoints
然后就可設置斷點了，如下：
然后在瀏覽器里點擊“點我”按鈕，這時Eclipse將停在斷點處，如下：
其后就跟調式Java代碼一樣了。注意，設置斷點后並不需要重新刷新瀏覽器。還要注意的是，從上圖中可見Eclipse打開了兩個test.js文件，實際調式的是虛擬工程里的js文件，不是原工程中的那個文件（下面還會說到這個問題）。
調式完成后可在Debug透視圖（即Window -> Open Perspective -> Debug）里停止並刪除這個虛擬工程。
至此測試完成。在我實際操作過程中遇到兩個問題：
1）一開始我並沒建test.js文件，而是把腳本直接寫在index.html里，結果怎么設斷點都不起作用，后來才發現ChromeDevTools插件不支持嵌入式JavaScript的調式，要調式嵌入式JavaScript還是要到瀏覽器（Google Chrome）里去設斷點調試。
2）按官方文檔說明，我們需要使用JDK 1.6或以上的版本，否則不報錯但也不起反應。另外，由於Eclipse同時支持多個調式器同時工作，因此在設置斷點時要選斷點類型為Run -> Breakpoint Types -> Chrome/V8 breakpoints。
接下來再說說ChromeDevTools本身。ChromeDevTools的設計目標並不是我們有源程序（JavaScript）然后再調式，而是直接從網頁里取回js到Eclipse里再調式，這就說明為什么實際調式時用到的是虛擬工程里的js文件。因此我們在源程序工程里如果做了修改，則需推送到到瀏覽器中。方法是：右鍵修改過的js文件 -> V8 Debugging -> Push Source Changes to VM（這里的VM可以認為就是瀏覽器）。
不過我們還是希望在有源程序時直接對源程序進行調式，免得反復在虛擬工程和源程序工程之間進行文件切換。好在ChromeDevTools這個插件也支持這種使用模式，具體請參見官方文檔說明。需要說明的是，這個文檔比我現在裝的插件要舊，但思路是一樣的。其操作過程簡單地說就是要多做一些設置，打開Run -> Debug Configurations...，然后加入源程序工程，如下：
點Add...按鈕，選Java Project，再選源程序工程（這里我的源程序工程名是hhh），最后點擊Apply保存。
經這樣設置后，ChromeDevTools就直接打開源程序來調式了，如下：
由於我這個例子工程（即hhh工程）比較簡單，因此尚未碰到其它問題。不過按官方文檔說明，在技術上存在源程序工程文件與瀏覽器里的文件的映射問題，這個映射默認地只通過文件短名（即不含路徑）來匹配。如果一個工程里有多個相同的文件短名則會匹配不到。為此需要進行文件級的設置，方法是：右鍵js文件 -> Properties -> V8 JavaScript Script，然后通過Less/More按鈕來選擇文件路徑，如下：
最后，上面我們只說明了如何用ChromeDevTools來調式JavaScript，這個工具只支持Google Chrome瀏覽器。不過Eclipse JSDT/JSDI足夠強大，能夠支持目前主流的所有瀏覽器，有興趣的朋友自己去試試，也不妨分享一下。