一．使用各家小程式開發工具除錯

uni-app執行到微信web開發者工具等小程式開發工具裡，可在這些工具的控制檯檢視console資訊，網路請求等資訊等。

頁面樣式除錯和JS除錯，如下圖：就以微信的開發者工具為例

(1) 頁面除錯

頁面樣式除錯和一般的web專案一樣，通過除錯的箭頭選中元素即可檢視相應的節點和樣式。

(2) JS除錯

除錯js時需要切換到Sources欄，根據sourcemap，找到webpack里正確的目錄，選中想要除錯的那個頁面的js，進行除錯（如果js程式碼是壓縮過的，點選右下角的{}可格式化程式碼），如下圖：

二．關於 App 的除錯debug

常規開發裡，在HBuilderX的執行選單裡執行App，手機端的錯誤或console.log日誌資訊會直接列印到控制檯。

如果需要更多功能，比如審查元素、打斷點debug，則需要啟動除錯模式。自HBuilderX 2.0.3+版本起開始支援App端的除錯。

(1)開啟除錯視窗

在HBuilderX中，正確執行專案：執行 --> 執行到手機或模擬器 --> 選擇裝置，專案啟動後，在下方的控制檯選擇debug圖示。

正確開啟除錯視窗後，顯示如下：

(2)Elements

根據上一步，啟動完成debug視窗後，可以看到Elements。Elements主要顯示當前頁面的組織結構，目前Elements只支援nvue。