source

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

factcode 2023. 5. 24. 22:28
반응형

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

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

Angular 5 / CLI 1.5.5로 테스트됨

  1. Chrome 디버거 확장 설치
  2. (vscode 폴더 내부) 생성
  3. 내 내용을 합니다.launch.json아래 참조)
  4. (vscode 폴더 내부) 생성
  5. 내 내용을 합니다.tasks.json아래 참조)
  6. ++SHIFTB를 누릅니다.
  7. 프레스

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. 다음을 생성합니다.
  3. 내 내용을 합니다.launch.json아래 참조)
  4. ServerNG Live Development Server)를합니다.ng serve)
  5. 프레스

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/*"
      }
    }
  ]
}

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"]
    }      
  ]
}

그렇게 하는 데는 두 가지 다른 방식이 있습니다.새 프로세스를 시작하거나 기존 프로세스에 연결할 수 있습니다.

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

프로세스 시작

  1. 의 신의에서.launch.json같은 을 추가합니다. file 다음추 가니다합성.

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

  2. CLI를 실행npm start

  3. VSCode 디버거로 이동하여 "Angular debugging session" 구성을 실행합니다.따라서 응용프로그램이 포함된 새 브라우저 창이 열립니다.

기존 프로세스에 첨부

  1. 는 포트가. (▁be▁for▁with▁will▁((▁chromein▁mode것합다다니그▁port▁you▁debugger니입▁in▁the▁that러▁opened될▁run▁need▁case)9222):

    Mac:

    /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. CLI를 실행npm start
  4. Chrome Attach 구성을 선택하고 실행합니다.

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

저는 이 접근법을 삽화와 함께 설명한 저만의 기사를 썼습니다.

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

자세한 내용은 Visual Studio Code 사이트 https://code.visualstudio.com/docs/nodejs/angular-tutorial 에서 확인할 수 있습니다.

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

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

@Assesjix 답변은 매우 철저하지만 일부에서 지적했듯이 시작하기 위해서는 여전히 여러 상호 작용이 필요합니다.ng serve크롬에서 Angular 앱을 실행합니다.다음 구성을 사용하여 클릭 한 번으로 작동했습니다.@Assesjix의 답변과 주요 차이점은 작업 유형이 현재라는 것입니다.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\"",
      }
    ]
  }

시작.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

여기 조금 더 가벼운 솔루션이 있습니다. Angular 2+(Angular 4를 사용하고 있습니다)

또한 MEAN 스택을 실행하는 경우 Express 서버에 대한 설정을 추가했습니다.

{
  // 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"
      ]
    }
  ]
}

저의 경우 원래의 Angular 프로젝트 폴더 트리를 사용하지 않았고 저는 무언가 문제가 있다는 것을 알았습니다.webRoot/{workspaceFolder}비트 하지만 내 모든 실험은 결과를 얻지 못했습니다.다른 SO 답변에서 팁을 받았습니다. 다시 찾으면 링크하겠습니다.

변수의 내용을 찾는 데 도움이 되었습니다.{workspaceFolder}실행 시 "app/*"이 있는 내 "src" 폴더 위치로 수정합니다.찾기 위해, 저는 다음을 추가했습니다.preLaunchTask나의 launch.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실행 전 작업, 빌드의 일부(위 그림) 또는 명령 프롬프트에서 실행되었습니다.

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

위의 모든 것을 읽었지만 작동하지 않는 사람들을 위해 Angular 및 Node.js 버전을 확인하십시오.ng version(프로젝트 폴더 내).

다음 버전을 출력해야 합니다.

여기에 이미지 설명 입력

Angular 버전 = 15이고 Node.js = 18이면 다른 문제가 발생합니다.그곳에서 해결책을 찾을 수 있습니다(나는 그것을 알아내기 위해 하루를 보냅니다).

언급URL : https://stackoverflow.com/questions/42495655/how-to-debug-angular-with-vscode

반응형

'source' 카테고리의 다른 글

Google의 CDN에서 jQuery UI CSS 다운로드  (0) 2023.05.24
ASP.NET MVC 5 및 WEB API 2에서 oauth2 서버를 구현하는 방법  (0) 2023.05.24
ASP.NET MVC에서 현재 사용자를 가져오는 방법  (0) 2023.05.24
bash에서 특수 변수(예: ~ 타일드)를 수동으로 확장하는 방법  (0) 2023.05.24
UITableView가 데이터 다시 로드를 완료했는지 어떻게 알 수 있습니까?  (0) 2023.05.24

'source'의 다른글

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

관련글

댓글

티스토리툴바