"확인되지 않은 중단 점 생성 된 코드를 찾을 수 없으므로 중단 점이 무시되었습니다 (소스 맵 문제?)"

라는 메시지가 표시되었을 때의 확인점에 대해 정리했습니다.

이하의 질문의 회답을 참고로 했습니다. 감사합니다.
Node.js - Visual Studio Code가 typescript sourcemap을 인식하지 못함 (119984) | teratail

샘플 프로젝트는 다음 github에서 공개 중입니다.

확인점

.vscode/launch.json 의 outFiles 속성

launch.json의 outFiles 속성 지정에 컴파일 후 js 파일이 포함되는 것이 중요합니다.
program 속성에 속해 있는 파일은 outFiles 속성에 포함되지 않아도 소스 맵이 효과가 있으므로, index.js의 1 파일만으로 거동을 확인하고 있으면 여기에서 걸립니다.
이 outFiles 속성을 쓰는 방법으로 out의 하위 폴더 js 파일은 잡히지 않고 손자 폴더 js만 걸리는 것처럼 보이지만 제대로 하위 폴더의 js 파일도 outfiles에 포함됩니다.

gulpfile.json 의 gulpSourcemaps.write 에 sourceRoot: '.' 지정

gulpfile.json에서 'gulp-sourcemaps'모듈을 사용할 때 write 메서드의 두 번째 인수 옵션에 sourceRoot 속성을 지정해야합니다.
이 인수를 지정하지 않으면 launch.json의 program 속성 js 파일과 다른 디렉토리의 파일이 소스 맵을 사용할 수 없습니다. 이것도 걸려 포인트.


sourceRoot 속성을 지정하면 js.map의 소스 맵 파일에 sourceRoot라는 속성이 추가됩니다.

github 코드 거동

일반 nodejs 앱

일반적인 nodejs 앱인 js 파일을 진입점으로 시작합니다.
이 프로젝트를 열고 a.ts와 b.ts의 함수에 중단 점을 설정하고 "node 실행"이라는 launch 설정을 실행하십시오. 브레이크 포인트가 제대로 작동하고 있음을 확인할 수 있습니다.
gulp-typescript-sourcemap/gulp+ts-cli at master · fushihara/gulp-typescript-sourcemap

nodemon을 사용하여 자동으로 재부팅

gulp의 nodemon을 사용한 프로젝트입니다. 이 경우, 감시하의 파일이 갱신되면(자) 재컴파일이 실행하므로 프로세스가 종료해 버립니다.


이 경우 프로젝트를 연 후 조인 터미널을 열고 수동으로 gulp를 실행합니다. 이것은 프로젝트를 열 때 한 번만 OK.


그런 다음 launch.json에서 attach 요청을 지정합니다. 여기서 포트 번호를 수동으로 지정하는 곳과 restart 속성이 있는 곳이 중요합니다.


그런 다음 launch를 실행하고 localhost:29285를 열면 중단점이 작동하는지 확인할 수 있습니다.


nodemon 감시하에 파일이 업데이트되면 자동으로 프로세스 연결이 다시 연결됩니다.

여기를 파악하면 visual studio code에서 브레이크 포인트가 효과가 없다! 라는 것이 없어질지도.