비주얼 스튜디오 코드로 Debug & Run Angular2 타입스크립트?
비주얼 스튜디오 코드로 Debug & Run Angular2 타입스크립트?
VS 코드 https://angular.io/guide/quickstart 로 Angular2 typescript 응용 프로그램을 디버깅하려고 합니다.
VS 코드에서 디버그하고 실행하는 단계를 공유해 줄 수 있는 사람?
많은 연구 끝에 이런 단계를 발견했습니다.
시작하기 전에 VS 코드의 최신 버전이 있는지 확인합니다.최신 버전을 확인할 수 있습니다 – [도움말] > [업데이트 확인] 또는 [정보].
'Debugger for Chrome'이라는 확장 프로그램을 설치합니다.설치가 완료되면 VS 코드를 다시 시작합니다.
디버그 창으로 이동하여 Chrome을 사용하여 launch.json을 엽니다.
Launch.json configuration 섹션에서 아래 config를 사용합니다.
{ "name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:3000/Welcome", "sourceMaps": true, "webRoot": "${workspaceRoot}" }tsconfig.json에서 "sourceMap": true가 있는지 확인합니다.
이렇게 하면 디버그 환경 설정이 완료됩니다.이제 디버깅을 시작하기 전에 기존의 모든 Chrome을 확인합니다.예를 닫았습니다.작업 관리자에서 확인하거나 DOS 명령 'kill all chrome' 사용
npm start 명령어와 Chrome을 기본 브라우저로 사용하여 프로젝트를 실행합니다.
애플리케이션이 성공적으로 실행되면 포트 번호를 받게 됩니다.크롬 브라우저에서 URL을 복사하여 위의 URL 섹션에 붙여넣습니다. (참고: 응용프로그램에서 라우팅을 사용하는 경우 url은 위에서 ending index.html 등이 됩니다.)
이제 스크립트 파일에서 원하는 곳에 중단점을 배치합니다.
다시 VS 코드의 디버그 창으로 이동하여 Run을 누릅니다.디버거에 연결된 탭/인스턴스는 다음과 같습니다.
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: 대상에 연결할 수 없습니다: connect ECONREFUSED
저도 비슷한 문제가 있었는데 제 프로젝트에 위의 솔루션이 실패하는 웹팩도 포함되어 있었습니다.인터넷을 횡단한 후 github의 스레드에서 해결책을 찾았습니다.
https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972
어쨌든 이렇게 된 거예요.
참고:- 시작하기 전에 최신 버전의 비주얼 스튜디오 코드가 있는지 확인하고 VS Code에 'Debugger for Chrome'라는 확장 프로그램을 설치해야 합니다.
먼저 '.config/webpack.dev.js'에서
- => devtool 사용: 'source-map'
- => devtool 대신: 'cheap- module-source-map'
그런 다음 write-file-webpack-plugin을 설치하고 사용합니다.
- npm install --save write-file-webpack-
다음을 추가하여 플러그인을 '..config/webpack.dev.js'에 추가합니다.
- const WriteFilePlugin = 필수 ('write-file-webpack-plugin')
상단의 웹팩 플러그인 아래에 있습니다.계속 추가:
- 새 쓰기 파일 플러그인()
새 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/'이(가) 없습니다.이 구성을 사용하면 source-maps는 ./dist/에 있지만 ./src/를 가리킵니다. vScode는 절대 루트를 작업 공간 앞에 붙이고 파일을 올바르게 확인합니다.
다음은 VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger 에서 Angular를 디버깅하는 방법에 대한 공식 비주얼 스튜디오 코드 설명서입니다.
클라이언트 측 Angular code를 디버깅하려면 Debugger for Chrome 확장자를 설치해야 합니다.확장 보기(Ctrl+Shift+X)를 열고 검색 상자에 '크롬'을 입력합니다.Chrome을 참조하는 몇 가지 확장 기능을 볼 수 있습니다.크롬용 디버거 설치 버튼을 누릅니다.버튼이 Installing(설치)으로 바뀌면 설치가 완료되면 Reload(재로드)로 바뀝니다.Reload를 눌러 VS Code를 다시 시작하고 확장을 활성화합니다.
우리는 디버거를 초기에 구성해야 합니다.이렇게 하려면 디버그 보기(Ctrl+Shift+D)로 이동하고 gear 버튼을 클릭하여 lunch.json 디버거 구성 파일을 만듭니다.Select Environment(환경 선택) 드롭다운에서 Chrome(크롬)을 선택합니다.이렇게 하면 프로젝트의 새 .vscode 폴더에 lunch.json 파일이 생성됩니다. 여기에는 웹 사이트를 시작하거나 실행 중인 인스턴스에 연결하는 구성이 모두 포함됩니다.예를 들어 포트를 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맥OS에서 제게 도움이 됐어요 디버거와 중단점을 디버그 세션당 크롬의 새로운 인스턴스에서 작동시킬 수 있게 해줬어요
// 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단계: Chrome debugger 설치: VS Code에서 명령 팔레트(Ctrl+Shift+P)를 열고 Extensions를 입력하면 됩니다.Extension 명령을 설치합니다.확장자 목록이 나타나면 'chrome'을 입력하여 목록을 필터링하고 Debugger for Chrome 확장자를 설치합니다.그런 다음 런치 구성 파일을 만듭니다.
2단계: lunch.json 파일 생성 및 업데이트:launch.json의 두 예제 구성은 "request": "launch"입니다.로컬 파일 또는 URL에 대해 Chrome을 시작하려면 파일 또는 url을 지정해야 합니다.url을 사용하는 경우 webRoot를 파일이 제공되는 디렉터리로 설정합니다.이 경로는 절대 경로이거나 ${workspaceRoot}(코드에서 열려 있는 폴더)를 사용하는 경로일 수 있습니다.webRoot는 디스크의 파일(예: "/Users/me/project/app.js")에 URL(예: "http://localhost/app.js")을 확인하는 데 사용되므로 올바르게 설정되도록 주의해야 합니다.lunch.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"
},
]
}
사용할 필요가 있습니다.CORS그래서 비활성화된 웹 보안으로 크롬을 열어봅니다.그리고 크롬에 디버거를 붙여서 Angular application 디버깅을 합니다.
웹 보안이 비활성화된 상태에서 크롬을 시작하는 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의 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}"
}
]
}
언급URL : https://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code
'programing' 카테고리의 다른 글
| Python으로 Excel에서 병합된 셀 읽기 (0) | 2023.11.07 |
|---|---|
| 그래들을 통해 지프스터 프로젝트를 만들고 있는데, 첫 번째 프로젝트는 잘 실행되지만 두 번째 프로젝트는 예외가 있습니까? (0) | 2023.11.07 |
| .NET에서 오라클 연결을 닫는 방법 (0) | 2023.11.07 |
| MariaDB는 엄격 모드가 해제되어 있고 열이 NULL이 아니며 기본값이 없을 때 행을 삽입하지 않습니다. 왜죠? (0) | 2023.11.07 |
| 오라클 10g이 칼럼 모호성에 대해 불평하지 않는 이유는? (0) | 2023.11.07 |