CloudIDE插件開發實戰：教你如何調試代碼

摘要：今天咱們來重點介紹下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進行深刻介紹，有興趣的讀者也能夠先參考插件開發指南進行了解。

 

點擊關注，第一時間瞭解華爲雲新鮮技術~