[IntelliJ IDEA] Java / JavaScript除錯小技巧

在寫程式的過程中，有相當多的時間都處於偵錯狀態，雖然使用了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〕就能指定變數的取值方法。

插旗子專用的除錯Live Template建立完畢，爾後在需要處就能輸入「cl 〔Tab鍵〕」或「al 〔Tab鍵〕」來產生需要的除錯訊息，因為彈出的對話窗或主控台輸出帶有檔名和行號，因此也能更快速的找到旗標位置而加快程式的修改速度。

Live Template最後附加的註解「//TODO:」則是利用IDEA的TODO功能而為的方便善後之用。IDEA的TODO側邊按鈕原本用義是將專案裡加上待辨處理的註解都過濾出來，讓我們逐一將這些待辨處理完畢，而我們就可以設定特定的TODO字串以快速集中所有的除錯指令。TODO字串設定畫面如下：

▼ 找出所有含有大寫的 TODO: 註解

除錯完畢後按一下TODO側邊按鈕就能找到所有的除錯指令：

點擊視窗裡的每行指令就能跳回該行指令處，也就能輕而易舉的刪掉這些不再需要的指令了。

＃＃

您可能也會有興趣的類似文章

• IntelliJ IDEA Live Template(即時樣板)的使用與範例說明（IDEA #5） (0則留言, 2019/08/11)
• 快速建立IntelliJ IDEA的Live Template的步驟 (0則留言, 2014/02/21)
• Java的資料型態與簡單的計算機程式 (IDEA #8) (0則留言, 2019/08/25)
• 用IntelliJ IDEA的GUI Designer開發Swing程式 (0則留言, 2014/02/14)
• 由Java原始碼產生類別使用文件：產生Javadoc的步驟 (IDEA #9) (0則留言, 2019/08/25)
• 用IntelliJ IDEA寫第一支Java程式；程式結構說明；Live Tempate用法（IDEA #4） (0則留言, 2019/08/09)
• 使用IntelliJ IDEA建立Spring Boot專案 (0則留言, 2016/03/18)
• [Windows] 刪除特定Java process的方法 (0則留言, 2017/08/02)
• IntelliJ IDEA逐步除錯的步驟與除錯演練（IDEA #7） (0則留言, 2019/08/18)
• IntelliJ IDEA的啟動設定與建議安裝的外掛（IDEA #3） (0則留言, 2019/07/21)
• Migration Guide: Eclipse ✈ IntelliJ IDEA (0則留言, 2015/07/07)
• IntelliJ IDEA的專案結構、模組設定與執行時組態設定（IDEA教學 #6） (0則留言, 2019/08/17)
• 使用JUnit5測試程式的操作步驟 (IDEA教學 #10) (0則留言, 2019/08/31)
• 使用IntelliJ IDEA 12的Android UI Designer輕鬆寫Android App (1則留言, 2012/08/09)
• [IDEA＃13] 快速在多個視窗中辨識專案的方法 (0則留言, 2021/02/09)