안녕하세요.

어떤 솔루션 회사에서 제공한 프로젝트에 추가 기능을 넣는 일을 맡게 된 SI 개발자입니다..
솔루션 사에서 제공한 프로젝트를 분석해보는데, vscode의 extension인 devtools for chrome의 사용이 절실했습니다.
그냥 chrome에 내장된 디버깅 툴을 사용해도 되지만 vs code 내에서 분석이 되는게 훨씬 좋아보여서요.. ㅠㅠ

그래서 사용을 해보려고 보니, out 폴더에 생성된 파일로는 디버깅（브레이크포인트 잡히는 것）이 되는데, 실제 소스 경로에서는 안잡히더라구요.. ㅠㅠ
혹시 실제 경로로는 브레이크 포인트 연동을 시킬수 없을까요?
실제 소스를 아웃폴더에 심볼릭 링크를 걸어서 쓰면혹시 걸리지 않을까 했는데 이것도 안먹히더라구요.. ㅠㅠ

혹시 간단하게 설정만으로 해결이 안되는 부분일까 싶어 내용에 대해서 좀 더 자세하게 설명을 드립니다.. ㅠㅠ



0. 빌드
분석해보니 해당 프로젝트는 webpack 모듈을 사용중이고, build 시 out/site 경로에 assets 폴더를 생성해 프로젝트에 필요한 리소스를 생성하고 있습니다.

1. 폴더 구조
   a. Breakpoint 가 잡히는 소스의 경로 （ ${workspaceFolder}/out/site/assets/js/*.js ） 
   b. 실제 소스의 경로 （ ${workspaceFolder}/src/ ..여러개의 폴더.. /js/*.js ） 

2. chrome debugger를 설정하는 launch.json 파일
{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을（를） 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach Chrome",
            "type": "pwa-chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "meteor://💻app/*": "${workspaceFolder}/*",
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
                "webpack://?:*/*": "${workspaceFolder}/*"
            },
        },
        {
            "name": "launch Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapRenames": true,
            "smartStep": true,
            "sourceMapPathOverrides": {
                "meteor://💻app/*": "${workspaceFolder}/*",
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
                "webpack://?:*/*": "${workspaceFolder}/*"
            },
            "outFiles": [
                "${workspaceFolder}/out/site/assets/js/*.js",
                "!**/node_modules/**"
            ]
        }
    ]
}


//추가내용
여기서 sourceMapPathOverrides 에 제가 원하는 경로를 입력하면 혹시 작동할까 싶었는데.

즉, "webpack:///./out/site/assets/js/*": "${workspaceFolder}/src/*/src/js/*" 를 입력하면 혹시 작동할까 했는데, 작동하지 않더라구요.. ㅠㅠ 소스 경로가 오히려 이상하게 꼬여버려서 제가 생각했던 거랑 다른 설정인 듯 했습니다..



sourceMap 이라는게 chrome에서 j a v a - s c r i p t를 불러 온 뒤, 해당 소스의 원본의 위치를 매핑해주는거라고 생각했는데, 그게 아니었는지.. 제 경로를 제대로 읽지 못하더라구요..

"${workspaceFolder}/src/*/src/js/*" 의 중간 경로에 wildcard가 아니라 실제 폴더 명을 입력해줘도 제대로 동작을 하지가 않았습니다.. ㅠㅠ



자바스크립트 프로젝트는 이번이 처음이라..

고수님들의 답변을 부탁드립니다... ㅠㅠ