在vs代碼中調試webpack dev服務器？

Question

是否可以配置launch.json來調試webpack dev服務器？在我的例子中，我正在研究通用的（通過express的服務器渲染）React應用程序，並且能夠直接在VS Code中調試服務器端真的很不錯。

Answer 1

我一直在使用Webpack處理VueJS應用程序，並且在使用VSCode chrome調試程序挖了幾個小時後，我能夠成功進行調試。我知道你的應用程序是一個React應用程序，但我會嘗試解釋我所經歷的調試工作步驟。希望這可以幫助您配置launch.json來調試VSCode中的react/webpack應用程序。這是我最後launch.json：

{ 
     // Using the chrome debugger to debug a Vue application 
     "type": "chrome", 
     "request": "launch", 
     "name": "Chrome launch", 
     // Set the URL to match the root URL of your application 
     "url":"http://localhost:8000/#/", 
     "webRoot": "${workspaceRoot}", 
     /** Configure source map paths using the instructions below */ 
     "sourceMapPathOverrides": { 
      "webpack:///./src/*.js": "${workspaceRoot}/src/*.js", 
      "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue", 
      "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*" 
     } 
    } 

對我來說，關鍵是正確地配置在launch.json的soureMapPathOverrides選項。首先，確保webpack配置中的「devtool」選項已設置爲「source-map」或「cheap-eval-source-map」（我使用「source-map」，其他設置也可以，但我沒有測試過它們）。

--Setting的sourceMapPathOverrides--

你想要做什麼是你的本地計算機上的源地圖文件（這似乎是默認位置不正確，至少對我來說）到其相應的位置映射。爲此，請使用webpack-dev-server或webpack正常運行程序。然後，在Chrome中打開它並打開devtools「sources」選項卡。在導航器中的「sources」選項卡中（默認爲左側），打開網絡選項卡並查看文件夾結構。

你應該可以看到一個文件夾結構是這樣的：

top 
    localhost:8000 
     assets 
     src 
     ... 
    (no domain) 
     ... 
    webpack:// 
     (webpack) 
      ... 
     (webpack)-dev-server 
      ... 
     . 
      ... 
     src 
      ... 

現在，你應該能夠在這裏的某個地方發現無論是transpiled文件和原始的源文件（如果沒有，請仔細檢查「devtool 「被設置爲」source-map「或」cheap-eval-source-map「。現在，您需要將每個源文件映射到硬盤驅動器上的位置。最好是通過文件擴展名映射它們，而不是在Vue的情況下，我必須將.js和.vue文件映射到它們相應的位置，並單獨映射node-modules文件夾（如您在launch.json中所見）。可能會有所不同映射反應

設置launch.json url以匹配您的webpack應用程序的URL，並且您的launch.json應該被設置！

現在，您應該可以使用webpack-dev-server（或webpack）運行該文件，然後啓動調試器。您應該能夠在VSCode中設置斷點並正常進行調試。希望這有助於某人。