[Solved] debugging: vue unbound breakpoint vscode

 

VSCode를 이용하여 Debugging을 하려고 하는데, 내가 설정한 breakpoint가 디버깅 모드만 들어가면 아래 사진처럼 
unbound breakpoint로 바뀌면서 저 자리에서 멈추질 않았다. 

 

unbound breakpoint

 

문제는 launch.json파일에서 file mapping이 잘 되지 않아서 였다. 

아래처럼 적용을 하니 정상적으로 작동하는 것을 볼 수 있었다.

 

// launch.json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-chrome",
        "name": "vuejs: chrome",
        "request": "launch",
        "url": "https://localhost:9090/",
        "breakOnLoad": true,
        "webRoot": "${workspaceFolder}/frontend",
        "pathMapping": {
          "/_karma_webpack_": "${workspaceFolder}/frontend"
        },
        "outFiles": ["${workspaceFolder}/frontend/target/dist/**/*.js"],
        "vueComponentPaths": [
          "${workspaceFolder}/frontend/src/**/*.vue"
        ],
        "sourceMaps": true,
        "sourceMapPathOverrides": {
          "webpack:///./node_modules": "${webRoot}/node_modules",
          "webpack:///./src/*": "${webRoot}/src/*"
        }
      }
    ]
  }

 

참고링크: https://v3.ko.vuejs.org/cookbook/debugging-in-vscode.html