VS 코드가있는 Vagrant VM 내부에서 실행되는 React 앱을 어떻게 디버그 할 수 있습니까?

Question

create-react-app으로 앱을 만들고 Vagrant에서 관리하는 VM에서 실행하십시오. 소스는 /vagrant 폴더에 있고 create-react-app은 VS 코드로 디버깅 기능을 제공합니다. 호스트에서 VS 코드를 사용하고 있습니다. 생성하기 때문에

브레이크 포인트 무시 :

그러나, 나는 내가 설정 한 중단 점에이 메시지가 계속 시도 상관없이 내 사용 사례에 대한 내 크롬 실행 구성을 설정하지,하는 방법을 잘 모르겠어요 코드를 찾을 수 없습니다 (? 소스지도 문제) 다음

Answer 1

는 샘플 구성입니다 :

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome", 
      "url": "http://127.0.0.1:3000/", 
      "webRoot": "${workspaceRoot}", 
      "sourceMapPathOverrides": { 
       "/vagrant/*": "${workspaceRoot}/*" 
      } 
     } 
    ] 
} 

장소 :

"sourceMapPathOverrides": { 
    "/vagrant/*": "${workspaceRoot}/*" 
} 

은 실제로 소스 코드를 VS ​​코드로 만들 수있는 비밀 구성 요소입니다. 호스트에있는 프로젝트의 루트 인 ${workspaceRoot}이 VS 코드의 디렉터리로 열릴 때 호스트의 프로젝트 루트 인 /vagrant/ 디렉터리가 매핑됩니다.

매우 간단한 수정 사항입니다.