摘要：今天我們來重點介紹下CloudIDE插件的調試技巧，在插件開發過程中調試作為重要的問題分析和定位手段能夠有效幫助開發者提升插件質量。
今天文章中的樣例工程我們繼續以上一篇《實戰CloudIDE插件開發-快速上手》中的項目為基礎，深入介紹插件的調試方法。可能有的開發者對於插件的前后端相關概念會有所疑惑，大家可以參考這篇插件開發指南詳細了解插件開發過程中會用到的基礎概念和開發技巧。
后端調試
在插件的src/node/目錄下存放的是插件的后端代碼，后端代碼運行在IDE實例的nodejs環境中，插件項目在創建的時候已經默認生成了一個后端文件backend.ts，對於輕量級的插件，只需要在該文件中添加自己想要實現的業務功能即可，該文件包含了三個默認的方法init()、run()、stop()。另外還默認添加了一個doSomething方法，這個方法僅僅是作為示例使用，開發者可以根據需要進行修改或刪除。這里我們簡單介紹下init, run和stop方法，詳細的解析可以參考插件開發指南。
- init()函數作為該后端實例的初始化方法，可以在插件啟動的時候進行一些初始化操作，寫在該函數中的代碼一定會先於run和其他函數被調用，這里需要注意的是對於前端暴露給后端的函數不能再init函數中進行調用，也就是不能在init方法中執行this.plugin.call調用。
- run()函數作為后端實例的主邏輯函數，承擔着業務功能入口的作用，在該函數中可以方便地調用CloudIDE的API，比如cloudide.window.showInformationMessage(`hello world!`); 也可以調用前端暴露出來的函數，也就是可以在該方法中執行this.plugin.call調用。
- stop()函數將會在插件被停止前被調用，如有需要可以進行一些資源清理的操作。
接下來將分七步來介紹調試的過程，大家可以對照動圖來看下面的文字說明：
1. 打斷點，我們嘗試在backend.ts的run()函數中打上一個斷點。
2. 按F1或者點擊查看->命令面板調出命令面板。
3. 輸入Hosted Plugin進行搜索，選擇Hosted Plugin: 調試實例。彈出的路徑選擇對話框我們保持默認，因為我們的項目根目錄默認就是我們需要調試的插件。
4. 等待調試實例啟動，右下角彈出端口監聽提示，我們點擊確定。
5. 在彈出的端口外部訪問權中給實例的監聽端口添加外部訪問權，注意：這里的協議需要選擇https，添加完成之后如右圖所示。
6. 點擊訪問就可以訪問我們剛剛啟動的調試實例，在彈出的調試實例中我們等待插件被加載，然后切換回我們的CloudIDE開發實例。
7. 斷點被命中並暫停在斷點處，此時可以方便地查看調用堆棧、變量或者添加監視表達式。
同樣，我們也可以在其他的方法中打上斷點，大家有興趣也可以通過斷點的方式來驗證下init()、run()以及stop()被執行的順序。
前端調試
與插件的后端不同，前端的代碼最終將被編譯並運行於瀏覽器環境中，前端的代碼存放於src/browser目錄中，插件項目在創建的時候會默認生成了兩個前端源碼文件frontend.ts和dynamic-webview.ts。這兩個文件的內容與后端backend.ts的結構非常相似，只不過運行的環境不同而已，這里就不再重復對這兩個文件中init()、run()、stop()方法進行介紹。由於前端運行再瀏覽器環境中，我們的代碼調試將借助於瀏覽器自帶的調試功能來完成，我們直奔主題，看看怎么樣來調試前端代碼。
前端代碼調試將分為以下幾個步驟，大家同樣可以對照動圖來看下面的文字說明：
1. 明確需要調試的代碼所在的函數，比如這次調試的前端函數叫myApi()。
2. 切換到調試實例，按F12調出開發者工具。
3. 在頁面列表中我們找到自己插件的首頁，這里是index.html (小技巧：很多開發者都會使用默認的首頁名稱，為了方便查找自己的插件首頁，可以將首頁文件名進行修改）。接下來逐級向下展開到active-frame/{調試實例地址}/webview/dist/index.js。打開index.js文件。
4. 按ctrl+f進行搜索，在搜索框中輸入需要調試的函數名，這里是myApi。找到函數並在函數體內需要調試的位置打上斷點。
5. 點擊瀏覽器的刷新按鈕重新加載該頁面就能命中剛剛打的斷點，進行前端的調試。
簡單總結下，CloudIDE插件的調試其實分為前后端，后端的調試可以借助CloudIDE本身完成，而前端代碼的調試則需要借助於瀏覽器的調試能力，在掌握調試技能之后在后續的插件開發過程中對疑難問題的定位和解決將非常有幫助。在后續的文章中將對插件的運行機制和API進行深入介紹，有興趣的讀者也可以先參考插件開發指南進行了解。