Visual Studio Code로 Angular2 Typescript 디버그 및 실행?
Visual Studio Code로 Angular2 Typescript 디버그 및 실행?
VS 코드 https://angular.io/guide/quickstart로 Angular2 typescript 응용 프로그램을 디버깅하려고합니다.
누구든지 VS 코드에서 디버그 및 실행하는 단계를 공유 할 수 있습니까?
많은 조사 끝에 다음 단계를 발견했습니다.
시작하기 전에 최신 버전의 VS 코드가 있는지 확인하십시오. 최신 버전을 확인할 수 있습니다 – 도움말> 업데이트 확인 또는 정보.
'Debugger for Chrome'이라는 확장 프로그램을 설치합니다. 설치가 완료되면 VS 코드를 다시 시작하십시오.
디버그 창으로 이동하여 Chrome을 사용하여 launch.json을 엽니 다.
Launch.json 구성 섹션에서 아래 구성을 사용하십시오.
{ "name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:3000/Welcome", "sourceMaps": true, "webRoot": "${workspaceRoot}" }tsconfig.json에서 "sourceMap"이 있는지 확인하십시오. true
이것으로 디버그 환경 설정이 완료됩니다. 이제 디버깅을 시작하기 전에 모든 기존 Chrome.exe 인스턴스가 닫혀 있는지 확인하십시오. 작업 관리자에서 확인하거나 DOS 명령 'killall chrome'을 사용하십시오.
npm start 명령과 Chrome을 기본 브라우저로 사용하여 프로젝트를 실행합니다.
응용 프로그램이 성공적으로 실행되면 포트 번호를 받게됩니다. 크롬 브라우저에서 URL을 복사하여 위의 URL 섹션에 붙여 넣습니다. (참고 : 애플리케이션에서 라우팅을 사용하는 경우 url은 위와 같고 그렇지 않으면 index.html 등으로 끝납니다)
이제 typescript 파일에서 원하는 곳에 중단 점을 배치하십시오.
다시 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
To debug the client side Angular code, we'll need to install the Debugger for Chrome extension. Open the Extensions view (Ctrl+Shift+X) and type 'chrome` in the search box. You'll see several extensions which reference Chrome. Press the Install button for Debugger for Chrome. The button will change to Installing then, after completing the installation, it will change to Reload. Press Reload to restart VS Code and activate the extension.
We need to initially configure the debugger. To do so, go to the Debug view (Ctrl+Shift+D) and click on gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment dropdown. This will create a launch.json file in a new .vscode folder in your project which includes configuration to both launch the website or attach to a running instance. We need to make one change for our example: change the port from 8080 to 4200.
I had issues with this and while @Sankets answer helped it was this issue that solved it for me https://github.com/angular/angular-cli/issues/2453.
Specifically adding the below to launch.json
"sourceMapPathOverrides": {
"webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
For angular-seed:
{
"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/*"
}
}
]
}
These mods to launch.json worked for me on MacOS, which enabled me to get the debugger & breakpoints working in a new instance of Chrome per debug session...
// 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}/*" }
This one is tried and tested -
Step 1: Install chrome debugger: simply open the Command Palette (Ctrl+Shift+P) inside VS Code and type Extensions: Install Extension command. When the extension list appears, type 'chrome' to filter the list and install the Debugger for Chrome extension. You'll then create a launch-configuration file.
Step 2: Create and update launch.json file: Two example launch.json configs with "request": "launch". You must specify either file or url to launch Chrome against a local file or a url. If you use a url, set webRoot to the directory that files are served from. This can be either an absolute path or a path using ${workspaceRoot} (the folder open in Code). webRoot is used to resolve urls (like "http://localhost/app.js") to a file on disk (like "/Users/me/project/app.js"), so be careful that it's set correctly. update Content of launch.json file as follows-
{
"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"
},
]
}
I need to use CORS so I open chrome in with disabled web security. Then I do debugging of Angular application by attaching debugger to chrome.
웹 보안이 비활성화 된 크롬을 실행하는 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}" } ] }
참고 URL : https://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code
'developer tip' 카테고리의 다른 글
| 73 억 행의 시장 데이터를 저장하는 방법 (읽기 위해 최적화 됨)? (0) | 2020.10.14 |
|---|---|
| Docker 제거 (0) | 2020.10.14 |
| 자바 스크립트 효율성 : 'for'대 'forEach' (0) | 2020.10.14 |
| foreach 식별자 및 클로저 (0) | 2020.10.14 |
| order () 함수 이해 (0) | 2020.10.14 |