VS 코드 : "생성 된 코드를 찾을 수 없기 때문에 중단 점이 무시되었습니다."오류

VS 코드 : "생성 된 코드를 찾을 수 없기 때문에 중단 점이 무시되었습니다."오류

---

나는 모든 곳을 보았고 VS Code 내에서 TypeScript를 디버깅하는 데 여전히 문제가 있습니다. 이 스레드를 읽었 지만 TypeScript 파일 내부에있는 중단 점에 도달 할 수 없으며 .js 파일의 중단 점을 모두 제대로 작동합니다.

여기 제가 설정 한 가장 간단한 "hello world"프로젝트가 있습니다.

• app.ts :

  var message: string = "Hello World";
  
  console.log(message);
  

• tsconfig.json

  {
      "compilerOptions": {
          "target": "es5",
          "sourceMap": true
      }
  }
  

• launch.json

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Launch",
              "type": "node",
              "request": "launch",
              "program": "${workspaceRoot}/app.js",
              "stopOnEntry": false,
              "args": [],
              "cwd": "${workspaceRoot}",
              "preLaunchTask": null,
              "runtimeExecutable": null,
              "runtimeArgs": [
                  "--nolazy"
              ],
              "env": {
                  "NODE_ENV": "development"
              },
              "externalConsole": false,
              "sourceMaps": true,
              "outDir": null
          }
      ]
  }
  

tsc --sourcemap app.ts명령 을 실행하여 js.map 파일을 생성했습니다 .

console.log(message);행에 중단 점을 설정 하고 "디버그"탭에서 프로그램 (F5)을 실행하면 중단 점이 "생성 된 코드를 찾을 수 없기 때문에 중단 점이 무시되었습니다 (소스 맵 문제?)"라고 회색으로 표시됩니다. 내가 관찰하고있는 스크린 샷을 첨부했습니다.

내가 무엇을 놓치고 있습니까?

편집하다:

안녕하세요, 나는 여전히 이것에 붙어 있습니다. 중단 점에 도달 한 하나의 샘플 프로젝트를 만들 수 있었지만 해당 프로젝트를 HDD의 다른 위치에 복사하려고 시도한 후 중단 점이 다시 회색으로 바뀌고 맞지 않았습니다. 이 테스트 프로젝트에서 제가 다른 점은 TypeScript 파일을 다음과 같이 컴파일하여 인라인 소스 맵을 사용하는 것입니다.tsc app.ts --inlinesourcemap

언급 한 샘플 프로젝트를 GitHub에 업로드하여 여기 에서 살펴볼 수 있습니다 .

---

설정으로 "outFiles" : ["${workspaceRoot}/compiled/**/*.js"],문제가 해결되었습니다.

"outFiles"값은 한 세트와 일치해야합니다 tsconfig.json위해 outDir하고 mapRoot있는 ${workspaceRoot}그래서 시도, 귀하의 경우"outFiles": "${workspaceRoot}/**/*.js"

여기 내 tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6",
        "outFiles": ["${workspaceRoot}/compiled/**/*.js"],
        "mapRoot": "compiled"
    },
    "include": [
        "app/**/*",
        "typings/index.d.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

과 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/compiled/app.js",
            "cwd": "${workspaceRoot}",
            "outDir": "${workspaceRoot}/compiled",
            "sourceMaps": true
        }
    ]
}

---

나는 내가 가지고 있던 비슷한 문제에 대한 해결책을 찾는 동안이 질문을 보았습니다. OP의 문제와는 다르지만 다른 사람들에게 도움이 될 수 있습니다.

컨텍스트 : Visual Studio Code HelloWorld 예제를 따르고 있었는데 중단 점에서 멈출 수 없었습니다.

Launch 구성 아래의 속성이 설정 .vscode/launch.json되도록 변경 하여 문제를 해결 "sourceMaps": true했습니다 (기본값은 false로 시작됨).

---

launch.json의 '프로그램'섹션에 문제가 있다고 생각합니다. 다음과 같이 시도하십시오.

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch",
    // Type of configuration.
    "type": "node",
    "request": "launch",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/app.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program.
    "args": [],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "${workspaceRoot}"
}

---

동일한 문제에 직면하고 .ts파일 경로를 수정하여 해결했습니다 .
내 프로젝트에는 src및 distdirs 가 포함되어 있으며 문제는 생성 된 .map파일에 srcdir에 대한 올바른 경로가 없다는 것 입니다.

수정 사항- tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "sourceRoot": "../src"
    }
}

처음에는 내가 sourceRoot가리키고 src있었고 src내부에 dir 이 없습니다 dist.

또한 inside sourceMaps로 설정해야합니다 .truelaunch.json

---

하루 종일 머리카락을 뽑은 후 마침내 작동했습니다.

문제는 launch.json, tsconfig.json 및 webpack.config.js의 세 가지 파일이 있으므로 모두 조합되어 있다는 것입니다.

diagnosticLogging은 내가 알아내는 데 핵심이었습니다.

마이크로 소프트는 이것을 더 쉽게 만들어주세요 ... 정말로, vscode는 이것을 알아 냈거나 적어도 저에게 프로세스에 대해 더 많은 것을 안내 할 수있었습니다.

어쨌든 내 launch.json에서 마침내 작동 한 것은 다음과 같습니다.

"url": "http://localhost:8080/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" }

내 tsconfig.json :

"outDir": "dist",
"sourceMap": true

내 webpack.config.js :

output: {
   path: 'dist/dev',
   filename: '[name].js'
},
...
module: {
    loaders: [...],
    preLoaders: [{
        test: /\.js$/,
        loader: "source-map-loader"
    }]
}
...
plugins: [
    new webpack.SourceMapDevToolPlugin(),
    ...
],
devtool: "cheap-module-eval-source-map",

---

동일한 문제에 직면하고 "webRoot"launch.json에서 구성 을 수정하여 해결했습니다 . 내 작업 공간의 탐색기보기입니다.

컴파일 결과 main.js and main.js.map가 "./project/www/build"디렉토리에 있으므로 "webRoot"항목을 "${workspaceRoot}/project/www/build"from으로 변경하고 "${workspaceRoot}"작동했습니다!

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

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        }
    ]
}

---

outFiles": ["${workspaceRoot}/compiled/**/*.js"],

TS가 하위 디렉토리를 찾지 않았기 때문에 이것은 내 생명을 구했습니다. 고마워

---

업데이트 : TypeScript 디버깅이 이제 0.3.0에 추가되었습니다. 업데이트 : 항상 중단 점을 지운 다음 연결 한 다음 중단 점을 추가하십시오. 이것은 버그이며보고되었습니다.

---

다른 답변 중 어느 것도 나를 위해 일하지 않았습니다.

그런 다음 program내 속성 launch.json이 .js파일 을 가리키고 있음을 깨달았 지만 내 프로젝트는 TypeScript 프로젝트입니다.

TypeScript ( .ts) 파일 을 가리 키도록 변경 outFiles하고 컴파일 된 코드가있는 위치를 가리 키도록 특성을 설정했습니다 .

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}/src/server/Server.ts",
    "cwd": "${workspaceRoot}",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
}

이것은 나를 위해 문제를 해결했습니다!

---

이 문제를 해결하는 유일한 방법은 실제로 사용되는 소스 맵 경로를 보는 것입니다.

에 다음 줄을 추가합니다 launch.json.

"diagnosticLogging": true,

다른 많은 것들 중에서 콘솔에는 다음과 같은 줄이 있습니다.

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*"

그런 다음 sourceMapPathOverrides경로를 실제 소스 경로와 일치하도록 조정합니다 . 프로젝트마다 약간 다른 구성이 필요하다는 것을 알았으므로이를 디버깅하는 방법을 이해하는 것이 정말 도움이되었습니다.

---

이 문제를 해결하는 데 많은 시간을 낭비한 후 가장 좋은 방법은 launch.json에 다음 줄을 추가하여 디버깅 추적을 켜는 것입니다.

"trace": true

그리고 문제가 실제로 어디에 있는지 확인하십시오. 디버그 콘솔은 다음과 같은 내용을 출력합니다.

Verbose logs are written to: /Users/whatever/Library/Application Support/Code/logs/blah/blah/debugadapter.txt

다른 많은 것들 중에서 콘솔에는 다음과 같은 줄이 있습니다.

SourceMap: mapping webpack:///./src/index.ts => C:\Some\Path\index.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Some/Path/*"

sourceMapPathOverride를 사용하여 실제로 경로와 일치하도록 수정하십시오. "trace"속성은 더 이상 사용되지 않는 "diagnosticLogging"이라고 불 렸습니다.

---

Late to the party, but you can check this post on github Test globbing support for the outFiles attribute in the launch config #12254.

Basically in the new version of vscode, you must now use the glob pattern with the property outFilesin your task.json.

I had a simlar issue. I fixed by indicating the output dir with outFiles

---

This config in launch.json worked:

{ "type": "node", "request": "launch", "name": "Launch Program - app", "program": "${workspaceRoot}/src/server.ts", "cwd": "${workspaceFolder}", "outFiles": ["${workspaceRoot}/release/**"], "sourceMaps": true }

---

I would like to contribute to spare some hours of head banging.

I used Debugger for Chrome for VS code (you don't need this for webstorm), I would recommend spend 10min reading their page, it will enlighten your world.

After installing the debugger extension, make sure that source-map is installed, in my case I also needed source-map-loader. Check your package.json for that.

My launch.json which is the chrome debugger configuration (all my source files where under src) :

{
  // 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": "${workspaceRoot}/src"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}/",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

Add devtool: 'source-map' to your webpack.config.js. Other parameters that generates mapping inlines won't work with Chrome Debugger (they mention that on their page).

This is an example:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Tutorial",
      inject: "body",
      template: "src/html/index.html",
      filename: "index.html"
    }),
    new DashboardPlugin()
  ],
  devtool: 'source-map',  
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        query: {
          presets: ["es2017", "react"],
          plugins: ['react-html-attrs']          
        }
      }
    ]
  },
  watch: true
};

Then you run your webpack: `webpack-dev-server --devtool source-map --progress --port 8080, I used webpack-dev-server but it has same options as webpack.

When you do that you must see a .map file of your generated app. If not then come back and verify your setup.

Now in VS Code switch to Debug Console and run .scripts. This is a very useful command because it shows you what generated code is mapped to which source.

Something like this: - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

If this is wrong then you have to verify your sourceMapPathOverrides in your launch.json, examples are available on the extension's page

---

yes! in my case changing this in launch.json file solve the problem:

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }

---

Using Angular I have found that I always point my folder directory to the src folder - that way my work-space is not so cluttered with root files that I never use. But this has given me several problems in the past especially when using VSCode, since many of the functionality seems to me to look at the folder structure, and start from there to run your files. (Expecting some of the missing files)

So I had this exact same problem with this error message, and learning from past experience I realized that I opened my project one folder deep, instead of the root <app name> folder. So I just closed my project and opened it one folder up (so that all the other files are also included in the folder structure) and my problem was immediately fixed.

I also believe that many of the above answers about changing your files and folder structure are workarounds to this problem of not opening your work project at the root folder, what ever framework/language you are using.

---

if you switch to visual studio type script project you can debug ts files normally i think the issue in app.js.map generation file here is sample from visual studio app.js.map

{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["HelloWorld","HelloWorld.constructor"],"mappings":"AAAA;IACIA,oBAAmBA,OAAcA;QAAdC,YAAOA,GAAPA,OAAOA,CAAOA;IAEjCA,CAACA;IACLD,iBAACA;AAADA,CAACA,AAJD,IAIC;AAED,IAAI,KAAK,GAAG,IAAI,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC/C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC"}

vs visual studio code app.js.map

{ "version": 3, "file": "app.js", "sourceRoot": "", "sources": [ "../ app.ts"], "names": [], "mappings": "AACA; IACI, oBAAmB, OAAc; QAAd, YAAO, GAAP, OAAO, CAAO; IAEjC, CAAC; IACL, iBAAC; AAAD, CAAC, AAJD, IAIC; AACD, IAAI, KAAK, GAAC, IAAI, UAAU, CAAC, aAAa , CAAC, CAAC; AACxC, OAAO, CAAC, GAAG, CAAC, KAAK, CAAC, OAAO, CAAC, CAAC; AAC3B, OAAO, CAAC, GAAG, CAAC, OAAO, CAAC, CAAC "}

그것을 바꾸고 다시 시도하십시오 소스의 디렉토리 계층 구조를 고려하는 것을 잊지 마십시오

참고 URL : https://stackoverflow.com/questions/36006303/vs-code-breakpoint-ignored-because-generated-code-not-found-error