Visual Studio에서 Angular2 응용 프로그램 디버깅 코드

Question

VSC를 사용하여 기본 angular2 앱을 개발하려고합니다. 코드는 TypeScript로 작성됩니다. 기본 할 일 응용 프로그램이며 모든 코드 (.ts, js, .js.map)는 app/하위 폴더에 있습니다.

이 실행에 대한 내 launch.json 구성입니다 : 나는 그것을 실행하면 응용 프로그램 크롬의 부하하지만 내 중단 점의 아무도가 작동

{ 
      "name": "Run", 
      "type": "node", 
      "request": "launch", 
      "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server", 
      "stopOnEntry": false, 
      "args": [], 
      "cwd": "${workspaceRoot}", 
      "preLaunchTask": null, 
      "runtimeExecutable": null, 
      "runtimeArgs": [ 
       "--nolazy" 
      ], 
      "env": { 
       "NODE_ENV": "development" 
      }, 
      "externalConsole": false, 
      "sourceMaps": false, 
      "outDir": null 
     }, 

. 중단 점을 가리키면 "중단 점은 생성 된 코드를 찾을 수 없으므로 무시됩니다 (소스 맵에 문제가 있습니까?")라는 메시지가 나타납니다.

/app/todo.component.ts에 하나의 중단 점이 있습니다. 내 /app/todo.component.js.map에서 나는 볼 수

"file":"todo.component.js","sourceRoot":"/Users/xxx/Documents/webs/angular2-todo/app/","sources":["todo.component.ts"],"names":[],"mappings":";;;;;;;;;; 

소스 루트와 소스가 나에게 좋아 보인다.

아이디어가 있으십니까?

Answer 1

당신은 할 필요가 :

1. 은 (대신 "Node.js를"의 "크롬"을 선택)를 launch.json 삭제 - 연장
2. 은 "크롬에 대한 디버거"를 설치하고 새로 만듭니다 .
3. 변경 3000 포트 (당신이 투어-의 영웅 - 튜토리얼처럼, 라이트 서버를 사용하는 경우)와 "userDataDir"를 추가 :

예 :

{ 
    "name": "Launch Chrome against localhost, with sourcemaps", 
    "type": "chrome", 
    "request": "launch", 
    "url": "http://localhost:3000", 
    "sourceMaps": true, 
    "webRoot": "${workspaceRoot}", 
    "userDataDir": "${workspaceRoot}/out/chrome" 
} 

4. "npm start"(터미널 창 또는 콘솔)로 서버를 시작하십시오.

5. 디버깅을 실행합니다 (F5 키를 누르거나 드롭 다운에서 "로컬 호스트에 대해 Chrome 시작 ..."선택).