Programing

Chrome 디버거 확장이있는 Visual Studio Code의 "확인되지 않은 중단 점"

lottogame 2020. 10. 27. 07:47
반응형

Chrome 디버거 확장이있는 Visual Studio Code의 "확인되지 않은 중단 점"

Chrome 디버거 확장을 사용하여 Visual Studio Code에서 Typescript 코드를 디버깅하려고하는데 중단 점에서 "Unverified breakpoint"메시지가 표시되고 중단 점에서 실행이 중지되지 않습니다.

내 launch.json 파일은 다음과 같습니다.

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

앱 버전 :

  • Visual Studio 코드 : 1.25.1
  • 크롬 : 67.0.3396.99

이 문제를 해결하는 방법에 대한 다른 제안이 있습니까?

나는 마침내 무엇이 잘못되었는지 알아 냈다.

'$ {workspaceFolder}'의 정의를 읽으면 다음과 같이 표시됩니다.

VS Code에서 열린 폴더의 경로

내 실수:

내 프로젝트에 대한 Windows의 경로는 다음과 같습니다. C:\Users\myusername\Documents\VSCode\Source\ProjectName

Visual Studio Code를 통해 Source폴더를 열고 항상 Integrated Terminal'ProjectName'으로 디렉터리 변경 (cd ProjectName) 명령을 수행해야했습니다 . 이로 인해 폴더가 아닌 폴더 .vscode folder and launch.json file에 생성됩니다 .SourceProjectName

위의 실수 ${workspaceFolder}는 Source폴더를 가리키는 대신 Angular 구성 요소가없는 폴더를 가리키고 있다는 사실로 이어집니다 ProjectName.

수정 :

Visual Studio Code에서 folder :를 열고 해당 디렉터리에 C:\Users\myusername\Documents\VSCode\Source\ProjectNamemy launch.json를 설정 합니다.

"확인되지 않은 중단 점"문제에 대한 내 솔루션입니다.

환경

  • Angular CLI 8.1.1
  • 비주얼 스튜디오 코드 1.36.1
  • Chrome 확장 프로그램 4.11.6 용 디버거

"구성 추가"옵션을 통해 VSC에서 생성 된 기본 .vscode / launch.json은 이와 유사합니다 (포트를 8080에서 4200으로 변경했습니다).

{
  // 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",
    "webRoot": "${workspaceFolder}"
  }]
}

아래 항목을 추가하면 "확인되지 않은 중단 점"문제가 해결됩니다.

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

완전하고 작동하는 .vscode / 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",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

추가 할 수있는 몇 가지 추가 항목이 있습니다.

 "breakOnLoad": true,
 "sourceMaps": true,

그러나 문제를 해결하기 위해 제 경우에는 필요하지 않았습니다.

{
  // 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",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

위의 답변은 아마도 많은 문제를 해결할 것이지만 내 문제를 해결하지는 못했습니다. 내 것은 훨씬 더 간단하고 성가신 문제였습니다 ...

launch.json 파일의 구성 설정은 대소 문자를 구분합니다.

내 "webRoot"항목의 철자가 정확했지만 단어 중 하나에 소문자 b 대신 대문자 B가 있습니다.

예를 들면 :

"webRoot": "$ {workspaceFolder} / My. F 이전"

작업 공간의 폴더와 이름이 일치하지 않습니다.

나의. f 나이

나는 이것이 누군가를 돕기를 바랍니다.

제 경우에는 다음 sourceMapPathOverrides과 같이 값 을 정의해야 했습니다.

파일 launch.json( .vscode폴더에 포함) :

{
  // 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:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

내 소스는 ${workspaceFolder}/project/app.

주어진 많은 정답이 있습니다. 제 경우에는 이러한 모든 답변의 조합이 도움이되었고 그것을 알아내는 데 오랜 시간이 걸렸습니다. 이것으로 두통 시간을 절약 할 수 있기를 바랍니다.

위의 답변을 참조하여 단계별 로 요약 하겠습니다.

  1. 올바른 폴더에서 VS 코드를 시작하는 것이 중요합니다 ( CodeChimp 및 monstertjie_za의 답변 참조 ).
    콘솔 창과 cd프로젝트 폴더를 엽니 다 .
    예:
    cd myProject
    code .
  2. 올바른 .vscode폴더에 파일을 구성하고 있는지 확인하십시오 .
    오른쪽 .vscode폴더는 프로젝트 폴더의 하위 디렉토리입니다.
    참고 : 이미 실수로 너무 깊은 하위 폴더 수준 (예 : 폴더)에서 VS 코드를 열었다면 디버깅에 쓸모없는 구성 파일이 포함 src된 .vscode폴더 를 찾을 수 있습니다 (제 경우에는 그랬던 것처럼).

  3. .vscode\launch.json파일 에서 디버그 구성을 설정 하십시오.
    제 경우에는 포트4200 가 잘 작동하는 경우 응용 프로그램에 적합한 포트를 지정했는지 확인하십시오 .
    또한 "webRoot"매개 변수가 올바르게 구성되었는지 확인하십시오 ( Stig Perez의 답변 참조 ). 제 경우에는 하위 폴더를 추가해야했습니다. 변수로 지정된 경로가 무엇인지 $(workspaceFolder)확인하려면 VS 코드 변수 값을 표시하는 방법에 대해 StackOverflow에서 요청한 질문을 확인하십시오 .
    노트 :아직 이러한 구성이없는 경우 다음을 수행하여 추가합니다. 디버그 확장으로 이동합니다 (예 : 사이드 바를 클릭). 디버거의 드롭 다운에서 "구성 추가 ..."를 선택한 다음 파란색 "구성 추가"버튼을 누릅니다. 추가 할 구성으로 "Launch Chrome"을 선택합니다.
    구성 예 ( launch.json) :

    "configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]

    projectsubfolder프로젝트에있을 수있는 하위 폴더로 바꿉니다 . 이것은 대소 문자를 구분합니다 ( Michael Walsh의 답변 참조 ).

  4. 이제 애플리케이션에서 중단 점을 설정하십시오.

  5. 디버거를 사용하여 응용 프로그램을 시작하려면 VS 코드 내에서 터미널 창을 열고
    cd projectsubfolder
    npm install & ng serve
    응용 프로그램을 컴파일하기 전에 종속 패키지를 확인하고 다운로드합니다. 컴파일이 끝날 때까지 기다리십시오.
    그런 다음 VS 디버거에서 녹색 삼각형을 클릭하면 디버거가 연결된 Chrome 창이 시작됩니다.
    참고 :npm install 패키지 / 종속성이 변경된 경우에만 매번 실행할 필요는 없습니다 . 대부분의 경우 ng serve코드를 다시 컴파일하고 실행 하는 것으로 충분 합니다.

아래에 표시된 폴더 구조가 있고 zeroVS Code 에서 프로젝트를 열었습니다 .

제로/

여기에 이미지 설명 입력

그런 다음 launch.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]

또한 프로젝트 폴더의 이름을 바꾼 후에도 문제가 발생했으며 "webRoot"속성이 "$ {workspaceFolder}"대신 "$ {workspaceFolder} / src"를 가리키는 것으로 나타났습니다. 아마도 이것은 "Debugger for Chrome"확장 프로그램의 업데이트의 일부로 받아 들여졌지만 업데이트를받지 못했기 때문에 확인할 수 없습니다.

"webRoot"를 업데이트하고 ng serve세션을 다시 시작하고 새 디버그 세션을 시작하는 것이 트릭이었습니다. 이것이 비슷한 scenerio를 가진 누군가를 도울 수 있기를 바랍니다.

Unverified breakpoint


이 문제의 3 가지 원인을 찾았습니다.

  1. launch.json자동으로 생성 된 구성 URL이 잘못되었습니다. 포트 번호가 웹 앱이 실행되는 로컬 호스트 포트와 일치하는지 확인하십시오. 오류를 해결하기 위해 내 것을 3000으로 변경했습니다.
"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]

  1. 올바른 작업 공간 폴더 를 설정 해야했습니다 .

  2. I needed to start my web app with npm start before debugging.

If you are using code splitting via webpack, your breakpoint won't be "verified" until Chrome loads that module (i.e. typically when you navigate to that part of your application)

My problem was that the source mapping was not configured properly. Be sure that your actual TS sources is visible on the Sources tab within Chrome debug extensions and try to place your breakpoints there firstly. Maybe it will help someone.

For me my breakpoints were turned off:

여기에 이미지 설명 입력

In my case I had a main.js file in the project root for running as an electron app. If this main.js file was removed the problem was solved.

After spending 3 precious hours of my life and going through many of the answers listed above, my problem was as simple as not having the following line in my php.ini:

xdebug.remote_autostart = 1

Before this I had already configured XDebug on my XAMPP, but my breakpoints simply wouldn't get hit. It was just that my debug server was not configured to be started automatically.

Hope this saves someone's day.

I had to delete my .vscode folder and regenerate it . and also folder was pointing to wrong path i had to change it back to my current project folder path. Thank you

In our case this error was because of a windows symlink to have the source code folder available on two local drives. Opened the folder with vscode from the original folder now debugging works good.

In my case the problem was that the breakpoint was set on a line where a function was being declared

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

Solution: move it to inside the body of the function

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}

The solution is simple:

  1. Click File->Open Folder-> (select folder of ur project - folder that contains package.json)
  2. Open debug-> press play button to create a new Chrome config.
  3. Set a new break point!
  4. Enjoy!

If everything looks set up correctly but break point still not being hit, the change I needed to make was to specify the exact filename that would be served. For example on NodeJS, Express just specifying localhost:3000 would not stop on my breakpoints, but specifying localhost:3000/index.html worked as expected

Full config:

My folder open in VSCode: learningPixi with full folder location (Ubuntu Linux): /home/leigh/node/pixi-tut/learningPixi

My folder structure is:

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json /home/leigh/node/pixi-tut/learningPixi/public/index.html /home/leigh/node/pixi-tut/learningPixi/server.js

Contents of my launch.json file:

{  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": ${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

"skipFiles" was also very useful otherwise debugger steps into every function call

My (very basic) express server config just for debugging JavaScript in static files was:

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

And as per folder structure above ensure index.html is located in /public folder

If debugging JavaScript from within an HTML file, you may also need to goto settings within VSCode and enable: Allow Breakpoints Everywhere

I was getting this error simply because I didn't have "sourceMaps": true in my debug configuration.

npm i fixed it for my part. I sometimes get unverified breakpoints when creating a new folder/file, and that usually does it.

The solution for me was to add to the launch.json file the following line: "requireExactSource": false. After this, restart VSC and try if it work.

클라이언트 폴더와 서버 폴더가 있는 VS 코드 my-app 폴더를 열었습니다 . 나는 launch.json에서 이것을 변경해야했습니다.

"webRoot": "${workspaceFolder}"

이에

"webRoot": "${workspaceFolder}\\client"

방금 발견 한 또 다른 대답은 지연로드 된 모듈과 관련이 있습니다.

지연로드 된 모듈의 일부인 코드에서 중단 점을 설정하고 싶지만 브라우저에 해당 모듈을로드하지 않은 경우 VS 코드는 중단 점을 확인하기 위해 소스 맵에 액세스 할 수 없습니다!

따라서 디버깅하려는 지연로드 모듈을로드 한 경우에만 중단 점을 설정하십시오!

참고 URL : https://stackoverflow.com/questions/51510655/unverified-breakpoint-in-visual-studio-code-with-chrome-debugger-extension

반응형

'Programing' 카테고리의 다른 글

Where does the iOS Simulator save screen shots?  (0) 2020.10.27
div가 본문 높이의 100 %를 차지하고 고정 높이 머리글 및 바닥 글을 뺀 값을 가져옵니다.  (0) 2020.10.27
JVM 메모리를 어떻게 늘릴 수 있습니까?  (0) 2020.10.27
Python에서 가장 좋은 것은 urllib2, PycURL 또는 mechanize?  (0) 2020.10.27
캐스팅과 Convert.To () 메서드 사용의 차이점  (0) 2020.10.27

'Programing'의 다른글

  • 현재글Chrome 디버거 확장이있는 Visual Studio Code의 "확인되지 않은 중단 점"

관련글

댓글

티스토리툴바