我正在嘗試使用 VSC 除錯 Vue 應用程式。我有以下launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides":{
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides":{
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
我還在專案根目錄下添加了如下vue.config.js檔案
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
port: 8080
}
}
要除錯 Vue 應用程式，我在終端使用“npm run serve”，單擊左側選單上的“運行和除錯”選項，然后選擇名為“針對本地主機啟動 Chrome”的除錯配置。
我無法系結任何斷點，即斷點是代碼中未填充的灰色圓圈。
不確定接下來要嘗試什么，在線搜索中沒有任何關于可能是什么問題的資訊。
uj5u.com熱心網友回復：
您的"sourceMapPathOverrides".
"sourceMapPathOverrides"應該指向 webpack 生成源映射的根傻瓜。您可以在 chrome 開發工具中檢查這一點。
請執行下列操作
1 - 打開您的 chrome 開發工具：
2 - 探索webpack://它的大部分內容來自內部.或src檔案夾。要檢查這一點，請打開一個隨機的 vue 組件，它應該看起來與你的 vs-code 編輯器中的一樣，這是"sourceMapPathOverrides"應該指向的正確源映射。
獎金
我當時使用的確切配置是：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080/",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
無論如何，請確保您按照我列出的步驟進行操作，看看是否可以解決問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/330767.html