在寫程式的過程中，有相當多的時間都處於偵錯狀態，雖然使用了IDE可以做逐行追蹤除錯，但原始的「插旗標」除錯法還是相當管用，在插旗標的過程中逐步檢視程式，並逐漸縮小出錯範圍，最終達到「夾殺」臭蟲而完成除蟲任務，但接下來的「清理戰場」可不要鬆懈了，要將不再需要的除錯指令清除掉，以免一不留神將除錯的alert對話窗讓使用者看到…以下是我在使用IntelliJ IDEA寫JavaScript程式除錯時的小技巧，希望對網友們有點用處。
通常在除錯時我們會用alert()或console.log()等指令來顯示除錯訊息，在除錯初期為了要確認錯誤發生的來源會在程式流程經過的多個程式裡插旗子，到最後要清除時又要花時間到處去找這些指令，為了容易辨識與迅速找到這些指令，我會建立IDEA的Live Template，把插旗子的檔名、函數名與行號等寫到除錯訊息裡，Live Template範例如下：
▼ Live Template: cl，輸出console.log(“檔名 函數名 (#行號):" + 變數); //TODO:
console.log("$FILENAME$ $FUNCTION$ (#$LINE$):" + $VAR$); //TODO:debug
▼ Live Template: al，輸出alert(“檔名 函數名 (#行號):" + 變數); //TODO:
alert("$FILENAME$ $FUNCTION$ (#$LINE$):" + $VAR$); //TODO:debug
Live Template裡建立了4個自訂變數，按下〔Edit variables〕就能指定變數的取值方法。
| 變數名稱 | 運算式 | 有值則略過 (Skip if defined) |
說明 |
|---|---|---|---|
| FILENAME | fileName() | 勾選 | 填入展開Live Template時的檔名 |
| FUNCTION | jsMethodName() | 勾選 | 填入展開Live Template時的函數名 |
| LINE | lineNumber() | 勾選 | 展開Live Template時的行號 |
| VAR | jsSuggestVariableName() | 不勾選 | 填入建議的變數名稱，可再修改 |
插旗子專用的除錯Live Template建立完畢，爾後在需要處就能輸入「cl 〔Tab鍵〕」或「al 〔Tab鍵〕」來產生需要的除錯訊息，因為彈出的對話窗或主控台輸出帶有檔名和行號，因此也能更快速的找到旗標位置而加快程式的修改速度。
Live Template最後附加的註解「//TODO:」則是利用IDEA的TODO功能而為的方便善後之用。IDEA的TODO側邊按鈕原本用義是將專案裡加上待辨處理的註解都過濾出來，讓我們逐一將這些待辨處理完畢，而我們就可以設定特定的TODO字串以快速集中所有的除錯指令。TODO字串設定畫面如下：
▼ 找出所有含有大寫的 TODO: 註解
除錯完畢後按一下TODO側邊按鈕就能找到所有的除錯指令：
點擊視窗裡的每行指令就能跳回該行指令處，也就能輕而易舉的刪掉這些不再需要的指令了。
＃＃
您可能也會有興趣的類似文章
- 快速建立IntelliJ IDEA的Live Template的步驟 (0則留言, 2014/02/21)
- 用IntelliJ IDEA的GUI Designer開發Swing程式 (0則留言, 2014/02/14)
- 原來IntelliJ IDEA也有中文的網站 (0則留言, 2008/08/22)
- IntelliJ IDEA直接開啟專案的方法 (0則留言, 2010/06/03)
- IDEA的編輯web.xml的圖形介面 (0則留言, 2005/06/06)
- 使用IntelliJ IDEA 12的Android UI Designer輕鬆寫Android App (1則留言, 2012/08/09)
- 使用IntelliJ IDEA快速設定svn:keywords的方法 (0則留言, 2014/04/04)
- IntelliJ IDEA與Tomcat整合的除錯設定 (0則留言, 2012/11/23)
- [Java] 終於解決IntelliJ-IDEA 8.0.1的中文輸入法問題 (7則留言, 2008/12/04)
- IntelliJ IDEA也有內建剪貼簿功能，方便複製貼上程式碼 (0則留言, 2013/07/21)
- IntelliJ IDEA與Subversion Version Control System的整合操作 (0則留言, 2013/07/20)
- 方便的IntelliJ IDEA資料庫功能 (0則留言, 2013/07/19)
- IDEA12快速尋找編輯檔案的幾個方法 (0則留言, 2013/01/20)
- IntelliJ IDEA 12的任務功能，與Issue/Bug Tracking System整合 (0則留言, 2013/07/20)
- [Blog] FireFox用來整合del.icio.us的擴充套件 (0則留言, 2005/03/05)
The post [IntelliJ IDEA] Java / JavaScript除錯小技巧 appeared first on 簡睿隨筆.