VSCode로 Angular를 디버깅하는 방법은 무엇입니까?

127

중단 점이 작동하도록 Angular 및 VSCode를 구성하려면 어떻게해야합니까?

angular  debugging  webpack  visual-studio-code 
— Asesjix
소스
무슨 말이야? 어떻게 작동하지 않습니까?
— TylerH
2
@TylerH, 어떻게 작동하는지 가이드가되어야합니다. 수정 된 launch.json 없이는 작동하지 않습니다.
— Asesjix

답변:

178

Angular 5 / CLI 1.5.5로 테스트 됨

  1. Chrome 디버거 확장 설치
  2. launch.json(.vscode 폴더 내부) 만들기
  3. 내 사용 launch.json(아래 참조)
  4. tasks.json(.vscode 폴더 내부) 만들기
  5. 내 사용 tasks.json(아래 참조)
  6. CTRL+ SHIFT+ 누르기B
  7. 프레스 F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Angular 2.4.8로 테스트

  1. Chrome 디버거 확장 설치
  2. 만들기 launch.json
  3. 내 사용 launch.json(아래 참조)
  4. NG Live 개발 서버 시작 ( ng serve)
  5. 프레스 F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}
— Asesjix
소스
7
한 번의 클릭 으로 시작 NG Live Development Server하고 시작하는 방법을 알고 있습니까? ChromeF5
— Merdan Gochmuradov
2
"ng serve"태스크가 preLaunchTask에서 시작되어야하기 때문에 불가능합니다. "ng serve"가 영구적으로 실행되어야하므로 "preLaunchTask"가 완료되지 않았으므로 vs 코드가 디버그 프로세스를 시작하지 않습니다. 하지만 난 ;-) 조금 더 빨리 작업을해야 새로운 구성을 추가 한
— Asesjix
1
명확하고 짧은 대답. 당신이에 대해 간단히 설명 할 수 있다면 그것은 좋은 것 launch.json하고 tasks.json여기 않습니다. 내가 이해했듯이 launch.json노드 서버를 시작하고 포트 8080을 수신 하고 응용 프로그램을 실행하기 위해 명령 을 tasks.json사용 npm하고 실행하도록 지시 ng serve합니다.
— shaijut
@Zachscs 어떤 각도 버전을 사용 했습니까?
— Asesjix
1
마침내 내 웹 루트가 잘못되었음을 깨달을 때까지 동일한 문제가 발생했습니다. 중단 점이 설정되지 않았습니다. 나는 웹 루트에 대한 기본 값을했다 ( "웹 루트": "$ {workspaceFolder}") 대신 $의 {workspaceFolder} / 내 - 응용 프로그램 폴더
— 조셉 심슨
48

VS Code 팀이 이제 디버깅 레시피를 저장하고있는 것 같습니다.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}
— 레비 풀러
소스
10

이를 수행하는 방법에는 두 가지가 있습니다. 새 프로세스를 시작 하거나 첨부 할 수 있습니다. 기존 .

두 프로세스의 핵심은 웹팩 개발 서버와 VSCode 디버거를 동시에 실행하는 것 입니다.

프로세스 시작

  1. 당신의에서 launch.json파일을 다음과 같은 구성을 추가 :

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

  2. Angular CLI에서 Webpack dev server를 실행하여 npm start

  3. VSCode 디버거로 이동하여 "각도 디버깅 세션"구성을 실행합니다. 결과적으로 애플리케이션이있는 새 브라우저 창이 열립니다.

기존 프로세스에 연결

  1. 이를 위해 열린 포트로 디버거 모드에서 Chrome을 실행해야합니다 (제 경우에는 9222 ).

    맥:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

    Windows :

    chrome.exe --remote-debugging-port=9222

  2. launch.json 파일은 다음과 같이 보입니다.

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}
  3. Angular CLI에서 Webpack dev server를 실행하여 npm start
  4. "Chrome Attach"구성을 선택하고 실행합니다.

이 경우 디버거는 새 창을 시작하는 대신 기존 Chrome 프로세스에 연결됩니다.

나는이 접근법을 삽화와 함께 설명하는 내 기사를 썼다.

VSCode에서 Angular 용 디버거를 구성하는 방법에 대한 간단한 지침

— Skryvets
소스
감사합니다. 크롬을 시작할 때 chrome.exe --remote-debugging-port=9222마다이 명령을 실행해야합니다. 일회성 구성에 대한 대안 이 있습니까
— Saurabh47g
자격 증명에 따라 Windows 시작 메뉴에서 크롬을 마우스 오른쪽 버튼으로 클릭하고 속성을 누르고 여기에 플래그를 추가 할 수 있습니다. 이것은 내 직장 컴퓨터에서 작동하지 않으므로 Windows 용 git bash에서 명령의 별칭을 지정했습니다.
— vitale232
7

이것은 Visual Studio Code 사이트 ( https://code.visualstudio.com/docs/nodejs/angular-tutorial) 에 자세히 설명되어 있습니다.

— 빅터 이오네 스쿠
소스
code.visualstudio.com/docs/nodejs/… 를 의미 했 습니까? 당신이 편집에 대한 답 ... 싶은 경우에 흥미로운 지점에 직접 · # _debugging - 각 점
— 피포
@Pipo 아니요, nodejs를 의미하지 않았습니다. 서버 측에서 nodejs를 사용하지 않으므로 모르겠습니다.
— Victor Ionescu
3

이 구성을 사용할 수 있습니다.

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}
— 아마드 아가 자데
소스
2

다음은 약간 더 가벼운 솔루션이며 Angular 2+에서 작동합니다 (Angular 4를 사용하고 있습니다)

MEAN 스택을 실행하는 경우 Express Server에 대한 설정도 추가되었습니다.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}
— 이삭 라 플 뢰르
소스
이 구성으로 각도와 동시에 서버 측 코드를 디버그 / 중단 할 수 있습니까?
— Mika571
@ Mika571 안타깝게도 ... 지금 시도 해봤습니다. 서버와 클라이언트 측도 동시에 디버깅하고 싶습니다.
— Leniel Maccaferri
1

@Asesjix 답변은 매우 철저하지만 일부가 지적했듯이 ng serveChrome에서 Angular 앱 을 시작 하고 실행 하려면 여전히 여러 상호 작용이 필요합니다 . 다음 구성을 사용하여 한 번의 클릭으로 작동합니다. @Asesjix의 대답과의 주요 차이점은 작업 유형이 지금 shell이고 명령 호출이 start이전에 추가 ng serve되므로 ng serve자체 프로세스에 존재할 수 있으며 디버거가 시작되는 것을 차단하지 않는다는 것입니다.

tasks.json :

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}
— 유비 퀴 베이컨
소스
0

제 경우에는 원래 Angular 프로젝트 폴더 트리를 사용하지 않았고 webRoot/ {workspaceFolder}비트에 문제가 있음을 알았지 만 모든 실험에서 결과가 나오지 않았습니다. 다시 찾으면 링크 할 다른 SO 답변에서 팁을 얻었습니다.

저에게 도움이 된 것은 {workspaceFolder}런타임에 변수의 내용을 찾은 다음 "app / *"이있는 "src"폴더의 위치로 수정하는 것입니다. 이를 찾기 위해 preLaunchTasklaunch.json 파일에를 추가하고 {workspaceFolder}.

Chrome 디버거를 설치 한 후 나타나는 launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json 기본적으로 존재하지 않습니다. Ctrl + Shift + p를 누르면 '다른 명령에 대한 작업 만들기'또는 이와 유사한 것으로 생각됩니다. tasks.json이 생성 된 후 볼 수없는 것 같습니다. launch.json 과 동일한 위치에 파일을 생성 할 수도 있습니다.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

$ {workspaceFolder}의 값을 알고 나면 새 프로젝트 트리의 src 폴더를 가리 키도록 수정했고 모두 작동했습니다. 디버깅은 사전 ng serve실행 작업 또는 빌드의 일부 (위의 예) 또는 명령 프롬프트에서 실행되어야합니다.

다음 은 사용할 수있는 모든 변수에 대한 링크입니다.

— 금연 건강 증진 협회
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.