如何在VSCODE中調試vue.js應用程序？

安裝vue.js devtools瀏覽器擴展程序，以檢查組件和狀態。 2。啟用vue.config.js中的源地圖，用於VUE CLI或VITE.CONFIG.JS，用於VITE項目，以將斷點映射到源文件。 3。通過創建一個啟動文件來設置VS代碼調試。 JSON文件，其指向Dev Server URL和SRC目錄的PWA-Chrome配置。 4.通過使用PWA-Chrome調試器，驗證源地圖路徑並確認開發服務器正在運行，請確保vue文件中的斷點。 5。可選地，通過在laight.json中添加node.js actact configuration並使用 - 信息啟動服務器，請調試node.js後端。完成這些步驟後，您可以直接從VS代碼直接調試VUE.JS應用程序的前端和後端。

設置正確的工具和配置後，在VS代碼中調試vue.js應用程序可以是有效的。無論您是使用VUE 2還是VITE或VUE CLI，這都是正確執行操作的方法。

1。使用vue.js devtools（瀏覽器擴展程序）

在潛入VS代碼調試之前，請確保安裝了Vue DevTools瀏覽器擴展程序：

• 用於Chrome： vue.js devtools
• for Firefox： vue.js devtools for Firefox

該工具使您可以直接在瀏覽器中檢查組件層次結構，Prop，數據，事件和VUEX/PINIA狀態。這對於運行時調試至關重要。

注意：對於基於Vite的項目，您可能需要在main.js或main.ts中明確啟用Vue DevTools：

 if（import.meta.env.mode ==='開發'）{
導入（'@vitejs/plugin-vue'）
}

2。啟用項目中的源地圖

要在VS代碼中調試您的原始.vue文件（而不是縮小或編譯代碼），請確保啟用源地圖。

對於VUE CLI項目：

在vue.config.js中：

 Module.exports = {
  DevServer：{
    熱：是的，
  }，，
  configurewebpack：{
    DevTool：“源地圖”
  }
}

對於Vite項目：

在vite.config.js ：

導出默認{
  建造： {
    sourcemap：是的，
  }，，
  伺服器: {
    HMR：是的，
  }
}

這樣可以確保正確地映射到源文件中的斷點。

3。通過launch.json設置VS代碼調試器

您將需要JavaScript調試器（夜間）或內置Node.js調試器擴展程序（默認情況下通常包含在內）。

逐步設置：

1. 用VS代碼打開您的項目。
2. 轉到運行並調試視圖（CTRL Shift D）。
3. 單擊“創建啟動。JSON文件”>選擇Chrome或Edge （取決於您的瀏覽器）。
4. 用這樣的配置替換內容：

 {
  “版本”：“ 0.2.0”，
  “配置”：[
    {
      “ type”：“ pwa-chrome”，
      “請求”：“啟動”，
      “名稱”：“ debug vue.js”，
      “ url”：“ http：// localhost：5173”，，
      “ webroot”：“ $ {workspacefolder}/src”，
      “ sourcemappathoverrides”：{
        “ webpack：///./src/*”：“ $ {workspacefolder}/src/*”，
        “ webpack：/// src/*”：“ $ {workspacefolder}/src/*”
      }，，
      “ breakonopen”：false
    }
  這是給出的
}

用Dev Server端口替換5173 （例如Vue CLI的8080 ，Vite 5173 ）。

5. 啟動您的VUE應用程序：

    NPM運行開發

6. 按F5或在運行面板中單擊“開始調試”。

現在您可以：

• 在.vue文件中設置斷點（尤其是在<script>部分中）
• 檢查變量
• 逐步瀏覽代碼
• 查看通話堆棧

4。 debug .vue文件在VS代碼中

VS代碼只有在以下方式時，可以在.vue文件中調試<script>部分。

• 您正在使用兼容的調試器（PWA-Chrome，而不是傳統）
• 源地圖已正確生成
• 源地圖中的文件路徑與您的項目結構匹配

如果斷點顯示為未結合，請檢查：

• launch.json中的webRoot指向您的項目root或src
• 您正在使用pwa-chrome （不是chrome ）
• 您的開發服務器正在運行並在指定的URL上訪問

5。可選：調試服務器端代碼（node.js後端）

如果您的Vue應用程序與Node.js後端（例如Express）進行對話，則可以單獨調試：

在launch.json中：json：

 {
  “ type”：“ node”，
  “請求”：“附件”，
  “名稱”：“附加到節點”，
  “港口”：9229，
  “ skipfiles”：[[
    “ <Node_internals>/**”
  這是給出的
}

開始您的後端：

 Node  -  Inspect Server.js

然後附加調試器。

概括

• ✅安裝Vue DevTools進行瀏覽器檢查
• ✅在Vite或Vue CLI中啟用源地圖
• ✅使用launch.json with pwa-chrome進行瀏覽器調試
• ✅在.vue文件中設置斷點（腳本部分）
• ✅確保開發服務器在正確的端口上運行

使用此設置，您可以直接從VS代碼直接從VUE應用程序的前端邏輯和組件狀態進行有效調試。

基本上，一旦配置正確，就不難 - 很容易錯過細節。

以上是如何在VSCODE中調試vue.js應用程序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！