programing

바인딩되지 않은 중단점 - VS 코드 | 크롬 | 각도

mailnote 2023. 8. 9. 20:58
반응형

바인딩되지 않은 중단점 - VS 코드 | 크롬 | 각도

VS Code에서 디버깅하려는 Angular 응용 프로그램이 있습니다.

할 때 (용로그때실행할응고하컴을램파일프때ng serve중단점은 다음과 같이 바인딩됩니다.

enter image description here

그러나 다른 구성을 지정하는 경우(예:-c qa또는-c uat바인딩되지 않음:

enter image description here

  1. 다른 구성을 지정할 때 중단점이 해제되는 이유는 무엇입니까?
  2. 특정 환경을 대상으로 하는 디버그 세션의 중단점을 바인딩하려면 어떻게 해야 합니까?

관련 정보

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"
    }
  ]
},
소프트웨어 버전 관리:

이것에 대한 해결책은 간단했습니다, 저는 그것을 설정하지 않았습니다.sourceMaptrue그 특정 환경에 대한 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단계가 필요합니다.

  1. "sourceMap": true in angular.json을 설정하여 Java 스크립트 코드뿐만 아니라 유형 스크립트 코드도 전송되도록 합니다.
  2. 디버거에 제공하는 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"
            }
        ]
    }
  1. 버전을 .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.jsonwebRoot폴더 경로 및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 스크립트 디버거의 야간 버전을 설치하는 것으로 이 문제가 해결되었습니다.

  1. 확장 보기(ctrl+shift+x)를 열고 @builtin @id:ms-vscode.js-debug를 검색합니다.
  2. JavaScript Debugger 확장을 마우스 오른쪽 단추로 클릭하고 비활성화합니다.
  3. 확장 보기에서 @id:ms-vscode.js-debug-nightly를 검색합니다.해당 확장을 설치합니다.
  4. VS 코드 다시 로드

언급URL : https://stackoverflow.com/questions/64589447/unbound-breakpoint-vs-code-chrome-angular

반응형