바인딩되지 않은 중단점 - VS 코드 | 크롬 | 각도
VS Code에서 디버깅하려는 Angular 응용 프로그램이 있습니다.
할 때 (용로그때실행할응고하컴을램파일프때ng serve중단점은 다음과 같이 바인딩됩니다.
그러나 다른 구성을 지정하는 경우(예:-c qa또는-c uat바인딩되지 않음:
- 다른 구성을 지정할 때 중단점이 해제되는 이유는 무엇입니까?
- 특정 환경을 대상으로 하는 디버그 세션의 중단점을 바인딩하려면 어떻게 해야 합니까?
관련 정보
angular.json 샘플 환경 구성:
"uat": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": false,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
소프트웨어 버전 관리:
- 비주얼 스튜디오 코드
1.50.1 - 크롬
83.0.4103.122 - 크롬용 디버거
4.12.11 - JavaScript 디버거(Nightly)
2020.10.2217
이것에 대한 해결책은 간단했습니다, 저는 그것을 설정하지 않았습니다.sourceMap의 true그 특정 환경에 대한 angular.json에서, 대신에 나는."sourceMap": false,
자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap 을 참조하십시오.
코너 덕분에 - https://github.com/microsoft/vscode-js-debug/issues/872
제 경우에는 webroot를 변경해야 했습니다.
부터
"webRoot": "${workspaceFolder}"
. "webRoot": "${workspaceFolder}\projectName"
입니다.ng new projectName
그런 다음 중단점 바운드.
, 제 과 Angular 버전(13)을 할 때 버전(되지 않는 했습니다.ng version노드를 v16으로 다운그레이드하고 이제 모든 것이 작동합니다.비공식 호환성 목록도 있습니다.
이것은 질문에 직접 대답하지는 않겠지만, 디버거를 시작하거나 연결할 때 문제가 무엇인지 알기 위한 일반적인 팁 중 하나입니다: 추적 설정: true.디버거를 중지합니다.로그를 보세요.경로는 디버그 콘솔에 있어야 합니다.
로그를 분석하려면 이 웹 사이트로 이동하십시오.https://microsoft.github.io/vscode-pwa-analyzer/index.html
sourcemap.par싱 및 런타임을 클릭합니다.태그 필터의 소스 맵입니다.다음과 같은 것들을 보게 될 것입니다.
적어도 이제 당신은 당신의 launch.json이 소스 맵에 어떤 영향을 미치는지 알 수 있는 피드백 루프를 가지고 있습니다.
실행 파일(빨간색 원)에도 유용한 정보가 많이 있습니다.
저는 과거에 위의 몇 가지 답변으로 다양한 성공을 거두었습니다.이번 주에 이슈가 반환되었습니다.어떤 이유에서인지 이번에는 angular.json 파일에 defaultConfiguration을 제공함으로써 해결할 수 있었습니다.
"defaultConfiguration": "dev"
이것도 말이 안 되지만, 제거하면 런타임에 모든 중단점이 "바운드되지 않음"이 됩니다.
다른 사람들에게 도움이 될까봐 이걸 여기에 두려고 생각했어요.
건배, 댄
PS - 더 나은 수정 사항을 추가하기 위해 업데이트합니다.내 "dev" 구성에 올바른 설정이 있었지만, 당신은 또한 입력할 수 있습니다.
"sourceMap": true
angular.json의 설계자 수준에서 기본값으로 설정합니다.이 한 가지 설정은 처음부터 제 문제였습니다.기본 설정은 false, budget 등 최적화와 같은 다른 설정에도 유용합니다.따라서 이제 dev 설정이 기본값이기 때문에 defaultConfiguration 행을 제거했습니다.
저는 요즘 angular.json 설정을 읽는 데 많은 시간을 보내고 있습니다. ;-)
위에 있는 모든 것을 시도했지만 여전히 작동하지 않고 다시 시작합니다.오류가 없습니다. 중단점이 적중되어 현재 사용자를 기다리고 있는 것과 같습니다. 그러나 중단점이 적중된 곳과 위치를 볼 수 없습니다.그러나 독립 실행형 브라우저인 Chrome과 Edge는 모두 정상적으로 실행됩니다.
이것은 Angular 뿐만 아니라 Node 백엔드에서도 발생합니다!
따라서 위의 모든 설정 외에도 실행 -> 모든 중단점을 비활성화한 다음 모든 중단점을 활성화하면 해결됩니다.
2021-09-17, 오늘은 상관없이 다시 작동을 중지합니다.마지막으로 새 중단점을 추가하면 다시 가져옵니다.이 동작은 디버거가 극도로 지연되는 것과 관련이 있을 수 있습니다.VSC의 버그임이 분명합니다.
나의 경우, vscode 설정:
디버그 > Javascript: 디버거에 의해 중단점이 표시되지 않도록 하는 미리 보기를 사용합니다.
[디버깅] > [자바스크립트]의 선택을 취소합니다. vscode 설정에서 미리보기를 사용합니다.
(또는 설정/json 파일에서) 다음을 추가합니다.
"debug.javascript.usePreview": false
저는 이 문제를 10시간 동안 연구해 왔습니다.저는 여기와 다른 곳에서 대부분의 다른 제안들을 시도했습니다.vcode를 제거하고 다시 설치하려고 했습니다.저는 마침내 내장된 Microsoft vscode-js-debug 디버거의 마지막 릴리스 버전을 비활성화하고 현재 야간 빌드로 교체하여 문제를 해결했습니다.
- 확장 보기(ctrl+shift+x)를 열고 @builtin @id:ms-vscode.js-debug를 검색합니다.
- JavaScript Debugger 확장을 마우스 오른쪽 단추로 클릭하고 비활성화합니다.
- 확장 보기에서 @id:ms-vscode.js-debug-nightly를 검색합니다.
- 해당 확장을 설치합니다.
동일한 문제가 발생했는데 수정 중인 것 같습니다. 수정: localhost에 대한 요청이 실패하면 127.0.0.1을 자동으로 시도합니다.
그동안 IP 주소 "start": "ng serve --port 5000 --ssl --host=127.0.0.1"을 사용하여 일시적으로 해결해야 합니다.이것이 도움이 되길 바랍니다.
- 견본 포장json:
{
"scripts": {
"ng": "ng",
"start": "ng serve --port 5000 --ssl --host=127.0.0.1",
"start2": "ng serve --hmr=true",
"build": "ng build --configuration production",
"test": "ng test",
"lint": "ng lint --type-check",
"e2e": "ng e2e",
"sme": "ng build --configuration production -c=sme && npx source-map-explorer ./dist/Coop/*-es2015.js"
},
}
- 샘플 launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "https://127.0.0.1:5000",
"webRoot": "${workspaceFolder}"
}
]
}
참고: npm start를 중지하고 다시 실행하십시오.
저처럼 수락된 답변으로 문제가 해결되지 않은 경우 교체해 보십시오."${workspaceFolder}"하드 코딩된 경로를 사용합니다.
바인딩되지 않은 중단점
{
"webRoot": "${workspaceFolder}"
}
바운드 중단점 :)
{
"webRoot": "/home/me/projects/hello"
}
중인 앱서버를 시작하는 하세요.ng s한 점을 다른 이상한 점을 배제합니다.
이상하게도, 이 변경을 한 후에 다음으로 되돌아간 후에.${workspaceFolder}일이 잘 되는 것 같았습니다.
제 경험에 따르면, 기본적으로 3단계가 필요합니다.
- "sourceMap": true in angular.json을 설정하여 Java 스크립트 코드뿐만 아니라 유형 스크립트 코드도 전송되도록 합니다.
- 디버거에 제공하는 launch.json 파일이 올바른지 확인합니다.예: Edge 및 Windows의 경우 아래 항목.프로젝트의 경로를 고려해 보십시오!특히 작업영역 폴더에 여러 프로젝트가 있는 경우에는 더욱 그렇습니다.이 디렉터리에 프로젝트가 하나만 있는 경우 추가 경로를 생략할 수 있습니다.
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"url": "http://localhost:4200/test",
"webRoot": "${workspaceFolder}/ONEOFYOURPROJECTSINTHISDIRECTORY"
}
]
}
- 버전을 .js 파일 사용).
ng version) 모든 것이 옳았지만 18.3에서 작동하지 않아서 16.19와 voila로 다운그레이드했습니다.
저는 webpack.config.js에 이 옵션을 추가하여 문제를 해결했습니다.
devtoolModuleFilenameTemplate: '[absolute-resource-path]'
저는 제 vueJS 프로젝트에서도 같은 문제가 있었습니다.파일 등을 변경하기 전에 시도해야 할 사항이 있어 문제가 해결되었습니다.
ClientApp/App 폴더: 1.node_modules 폴더 2를 삭제합니다.package-lock.json 파일 3을 삭제합니다.ClientApp/App 폴더 4에 대한 cmd 프롬프트를 엽니다.cmd "npmi" 사용
이 마지막 단계에서는 모든 노드 모듈을 다시 설치합니다.제가 가지고 있던 문제는 충돌하는 노드 모듈이었던 것 같습니다.
Angular 프로젝트와 함께 nx monorepo 설정 사용:
프로젝트의 project.json 내부에서 원하는 구성으로
"sourceMap": true
며칠 동안 이 문제에 대한 답을 조사한 결과, Edge Browser로 테스트하기로 결정했을 때만 작동합니다.그리고 그것은 성공하였다.브레이크포인트는 예전에는 무한대였습니다.내가 시도한 인터넷에서 제안한 모든 구성, 모든 팁 등.하지만 그 어떤 것도 탯줄이 달린 중단점 문제를 해결하지 못했습니다.WSL, Vcode, Angular 를 Windows Machine입니다. 구성: 내구: { "name": "Attach to Edge", "port": 9222, "request": "attach", "type": "msedge", "sourceMaps": true, "trace": true, "urlFilter": "http://localhost:4200/*", "webRoot": "${workspaceFolder}/packages/shopWebAngular" },
이제 Edge 바로 가기 시작 프로그램에서 http://localhost:4200 및 "--remote-sshot-port=9222"와 함께 작동합니다.Vcode 버전: 1.73.1
- 크롬 #$%%(%)$&**.
저의 경우 대소문자를 구분하지 않는 파일 시스템(macOS)에서 파일 이름을 대문자로 변경했기 때문입니다.request.ts->Request.ts.
이것은 dist/directory에 내장된 TypeScript 프로젝트였기 때문에 저는 그 디렉토리가 여전히 오래된 파일 이름이 있기 때문에 그 디렉토리를 삭제했습니다. 그리고 나서 열려 있는 모든 에디터 파일을 닫고 VS Code를 다시 시작하고 Cmd+Shift+P -> "편집자 기록 지우기"를 실행하고 VS Code를 다시 시작하고 파일에서 중단점을 다시 설정할 수 있었습니다.
VSCode Chrome 디버거를 사용하는 Angular 앱에서 바인딩되지 않은 중단점에 문제가 발생했습니다.작업영역 폴더 구조는 다음과 같습니다.
- .vscode/
- launch.json
- tasks.json
- ng-app.code-workspace
- Application/
- src/ng-app/
이 문제를 해결하기 위해서는 세 개의 파일을 수정해야 했습니다.
먼저 VSCode 수정launch.json의webRoot폴더 경로 및url표시할 속성ng-app폴더 및 명시적 로컬 호스트입니다.
{
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"webRoot": "${workspaceFolder}/Application/src/ng-app",
"preLaunchTask": "npm: start",
"url": "http://127.0.0.1:4200/"
},
}
그러면 그.tasks.json수정에 필요한cwd에게ng-app디렉토리
{
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"options": {
"cwd": "${workspaceFolder}/Application/src/ng-app"
},
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
}
마지막으로 수정합니다.ng-app/package.json의 명시적인 로컬 호스트를 사용하는 스크립트127.0.0.1
{
"name": "ng-app",
"scripts": {
"start": "ng serve --host=127.0.0.1"
}
}
이것이 나중에 이 문제를 해결하는 데 도움이 될지는 모르겠지만, 며칠 전까지만 해도 VS Code가 디버깅하려는 앱의 루트 디렉터리가 작업 공간 디렉터리와 동일한 루트가 아니면 좋아하지 않는다는 것을 깨달았습니다.적어도 추가 구성 없이는 안 됩니다.
Java 스크립트 디버거의 야간 버전을 설치하는 것으로 이 문제가 해결되었습니다.
- 확장 보기(ctrl+shift+x)를 열고 @builtin @id:ms-vscode.js-debug를 검색합니다.
- JavaScript Debugger 확장을 마우스 오른쪽 단추로 클릭하고 비활성화합니다.
- 확장 보기에서 @id:ms-vscode.js-debug-nightly를 검색합니다.해당 확장을 설치합니다.
- VS 코드 다시 로드
언급URL : https://stackoverflow.com/questions/64589447/unbound-breakpoint-vs-code-chrome-angular
'programing' 카테고리의 다른 글
| 변경 사항을 사용하여 체리픽 충돌을 해결하려면 어떻게 해야 합니까? (0) | 2023.08.09 |
|---|---|
| sqlplus / Oracle에서 epoch를 현재 날짜로 변환 (0) | 2023.08.09 |
| libcurl을 사용하여 프로그램을 연결할 때 확인되지 않은 기호 (0) | 2023.08.09 |
| mariadb 설치로 인해 mysql이 설치되지 않지만 mariadb가 설치되지 않았습니다. (0) | 2023.08.09 |
| Ubuntu에 특정 버전의 노드를 설치하는 방법은 무엇입니까? (0) | 2023.08.09 |