Visual Studio Code로 Angular2 Typescript 디버그 및 실행?

Visual Studio Code로 Angular2 Typescript 디버그 및 실행?

VS 코드 https://angular.io/guide/quickstart로 Angular2 typescript 응용 프로그램을 디버깅하려고합니다.

누구든지 VS 코드에서 디버그 및 실행하는 단계를 공유 할 수 있습니까?

많은 조사 끝에 다음 단계를 발견했습니다.

시작하기 전에 최신 버전의 VS 코드가 있는지 확인하십시오. 최신 버전을 확인할 수 있습니다 – 도움말> 업데이트 확인 또는 정보.

1. 'Debugger for Chrome'이라는 확장 프로그램을 설치합니다. 설치가 완료되면 VS 코드를 다시 시작하십시오.

2. 디버그 창으로 이동하여 Chrome을 사용하여 launch.json을 엽니 다.

3. Launch.json 구성 섹션에서 아래 구성을 사용하십시오.

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

4. tsconfig.json에서 "sourceMap"이 있는지 확인하십시오. true

이것으로 디버그 환경 설정이 완료됩니다. 이제 디버깅을 시작하기 전에 모든 기존 Chrome.exe 인스턴스가 닫혀 있는지 확인하십시오. 작업 관리자에서 확인하거나 DOS 명령 'killall chrome'을 사용하십시오.

5. npm start 명령과 Chrome을 기본 브라우저로 사용하여 프로젝트를 실행합니다.

6. 응용 프로그램이 성공적으로 실행되면 포트 번호를 받게됩니다. 크롬 브라우저에서 URL을 복사하여 위의 URL 섹션에 붙여 넣습니다. (참고 : 애플리케이션에서 라우팅을 사용하는 경우 url은 위와 같고 그렇지 않으면 index.html 등으로 끝납니다)

7. 이제 typescript 파일에서 원하는 곳에 중단 점을 배치하십시오.

8. 다시 VS 코드의 디버그 창으로 이동하여 실행을 누르십시오. 디버거에 연결된 탭 / 인스턴스는 다음과 같습니다.

userDataDir 지정-이미 실행 중일 수있는 다른 Chrome 인스턴스와의 충돌을 방지합니다. 이 때문에 Chrome은 지정한 포트에서 수신을 중지합니다. 아래는 내가 사용하는 것이며 훌륭합니다!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

감사합니다 @reecebradley- GitHub : Cannot connect to the target : connect ECONNREFUSED

비슷한 문제가 있었지만 내 프로젝트에는 위의 솔루션이 실패한 웹팩도 포함되어 있습니다. 인터넷을 탐색 한 후 github의 스레드에서 해결책을 찾았습니다.

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

어쨌든 이것이 행해진 일입니다.

참고 :- 시작하기 전에 Visual Studio 코드의 최신 버전이 있는지 확인하고 VS Code 내에 ' Debugger for Chrome ' 이라는 확장 프로그램을 설치했는지 확인해야합니다 .

먼저 './config/webpack.dev.js'에서

• => devtool 사용 : '소스 맵'
• => devtool 대신 : 'cheap-module-source-map'

그런 다음 write-file-webpack-plugin을 설치하고 사용합니다.

• npm install --save write-file-webpack-plugin

다음을 추가하여 플러그인을 './config/webpack.dev.js'에 추가합니다.

• const WriteFilePlugin = require ( 'write-file-webpack-plugin');

상단의 Webpack Plugins 아래에 있습니다. 계속 추가 :

• 새로운 WriteFilePlugin ()

새로운 새로운 DefinePlugin () 이후 플러그인 목록에

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

이렇게하면 소스 맵이 디스크에 기록됩니다.

마지막으로 내 launch.json이 아래에 제공됩니다.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

webroot에 '/ dist /'가 없음을 확인하십시오. 이 구성에서 소스 맵은 ./dist/에 있지만 ./src/를 가리 킵니다. vscode는 작업 공간에 절대 루트를 추가하고 파일을 올바르게 해석합니다.

다음은 VSCode에서 Angular를 디버깅하는 방법에 대한 공식 Visual Studio 코드 설명서입니다. https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

클라이언트 측 Angular 코드를 디버깅하려면 Debugger for Chrome 확장 프로그램을 설치해야합니다. 확장 프로그램보기 (Ctrl + Shift + X)를 열고 검색 창에 'chrome'을 입력합니다. Chrome을 참조하는 여러 확장 프로그램이 표시됩니다. Debugger for Chrome의 설치 버튼을 누릅니다. 버튼이 설치 중으로 변경되고 설치가 완료되면 다시로드로 변경됩니다. 다시로드를 눌러 VS Code를 다시 시작하고 확장을 활성화합니다.

처음에 디버거를 구성해야합니다. 이렇게하려면 디버그보기 (Ctrl + Shift + D)로 이동하고 기어 버튼을 클릭하여 launch.json 디버거 구성 파일을 만듭니다. 환경 선택 드롭 다운에서 Chrome을 선택합니다. 그러면 웹 사이트를 시작하거나 실행중인 인스턴스에 연결하기위한 구성이 포함 된 launch.json 파일이 프로젝트의 새 .vscode 폴더에 생성됩니다. 예를 들어 포트를 8080에서 4200으로 변경하는 것 중 하나를 변경해야합니다.

나는 이것에 문제가 있었고 @Sankets 대답이 나를 위해 해결 한 것이이 문제였습니다 . https://github.com/angular/angular-cli/issues/2453 .

특히 launch.json에 아래 추가

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

앵귤러 시드의 경우 :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

이 모드 launch.json는 MacOS에서 저에게 도움 이 되었기 때문에 디버그 세션마다 새로운 Chrome 인스턴스에서 디버거 및 중단 점을 사용할 수있었습니다.

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

이것은 시도되고 테스트되었습니다-

1 단계 : 크롬 디버거 설치 : VS Code 내에서 명령 팔레트 (Ctrl + Shift + P)를 열고 Extensions : Install Extension 명령을 입력하면됩니다. 확장 프로그램 목록이 나타나면 'chrome'을 입력하여 목록을 필터링하고 Debugger for Chrome 확장 프로그램을 설치합니다. 그런 다음 시작 구성 파일을 생성합니다.

[1 단계에 대한 자세한 내용]

2 단계 : launch.json 파일 생성 및 업데이트 : "request": "launch"가 포함 된 두 개의 launch.json 구성 예제. 로컬 파일 또는 URL에 대해 Chrome을 시작하려면 파일 또는 URL을 지정해야합니다. URL을 사용하는 경우 webRoot를 파일이 제공되는 디렉토리로 설정하십시오. 절대 경로이거나 $ {workspaceRoot} (코드에서 열린 폴더)를 사용하는 경로 일 수 있습니다. webRoot는 URL (예 : " http : //localhost/app.js ")을 디스크의 파일 (예 : "/Users/me/project/app.js")로 확인하는 데 사용되므로 올바르게 설정되었는지주의하십시오. launch.json 파일의 내용을 다음과 같이 업데이트하십시오.

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[2 단계에 대한 자세한 내용]

CORS웹 보안이 비활성화 된 상태에서 크롬을 열려면 사용해야 합니다. 그런 다음 디버거를 크롬에 연결하여 Angular 응용 프로그램을 디버깅합니다.

웹 보안이 비활성화 된 크롬을 실행하는 CMD 라인 :

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json 디버거 연결을위한 파일 :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Sanket의 대답 은 맞았지만 몇 가지 문제가있었습니다.

첫째, Launch.json은 프로젝트의 ".vscode"디렉터리에 있고 둘째, 포트 번호는 앱을 시작하는 데 사용하는 기본 서버 포트와 동일해야합니다. 내 프로젝트를 시작하기 위해 cmd에서 ng serve 를 사용 하고 기본 포트 번호는 4200 이므로 launch.json 파일을 다음과 같이 변경했습니다.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}