好久沒寫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連接埠上監聽。然後輸入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足夠強大，能夠支援目前主流的所有瀏覽器，有興趣的朋友自己去試試，也不妨分享一下。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
