web-dev-qa-db-ja.com

VSコード：「生成されたコードが見つからないため、ブレークポイントは無視されました」エラー

私はあらゆるところを見てきましたが、VS Code内でTypeScriptのデバッグにまだ問題があります。 this threadを読みましたが、TypeScriptファイル内に置かれたブレークポイントをヒットすることはできません。

これが、私が設定した最も単純な「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）を起動します。 ）。」私が観察しているもののスクリーンショットを添付しました：

enter image description here

私は何が欠けていますか？

編集：

こんにちは、私はまだこれで立ち往生しています。ブレークポイントに到達するサンプルプロジェクトを1つ作成できましたが、そのプロジェクトをHDDの別の場所にコピーしようとすると、ブレークポイントが再び灰色になり、ヒットしませんでした。このテストプロジェクトで私がやったことは、TypeScriptファイルをtsc app.ts --inlinesourcemapでコンパイルしてインラインソースマップを使用することでした

上記のサンプルプロジェクトをGitHubにアップロードしたので、ご覧ください here 。

javascriptdebuggingtypescriptvisual-studio-code
69
Vladimir Amiorkov

私が抱えていた同様の問題の解決策を探しているときに、私はこの質問に出会いました。 OPの問題とは異なりますが、他の人を助けるかもしれません。

コンテキスト： Visual Studio Code HelloWorldの例 をたどっていて、ブレークポイントで停止できないことがわかりました。

起動構成の下の.vscode/launch.json属性が設定されるように"sourceMaps": trueを変更することで問題を解決しました（デフォルトではfalseで起動します）。

16
DieterDP

問題は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}"
}
6
Amid

一日中髪を引き裂いた後、ようやく機能するようになりました。

問題は、launch.json、tsconfig.json、およびwebpack.config.jsの3つのファイルをいじる必要があるため、すべてが組み合わせられていることです。

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",
5
Eric Hartford

同じ問題に直面し、.tsファイルへのパスを修正することで解決しました。
私のプロジェクトにはsrcとdist dirsが含まれており、問題は生成された.mapファイルにsrc dirへの正しいパスがなかったことです。

修正-tsconfig.json：

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

最初、私のsourceRootはsrcを指しており、srcの中にdist dirがありません。

また、sourceMapsはlaunch.json内でtrueに設定する必要があります。

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

TSはサブディレクトリを探していなかったので、これは私の命を救った。どうもありがとう

3
ScreamZ

同じ問題に直面し、launch.jsonの"webRoot" configを修正して解決しました。 ここに私のワークスペースのエクスプローラービューがあります。

コンパイル結果main.js and main.js.mapが"./project/www/build"ディレクトリにあるので、"webRoot"エントリを"${workspaceRoot}/project/www/build"から"${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"
        }
    ]
}
3
Hope Sun

他の答えはどれも私にとってはうまくいきませんでした。

launch.jsonのprogram属性が.jsファイルを指していることに気付きましたが、私のプロジェクトはTypeScriptプロジェクトです。

TypeScript（.ts）ファイルを指すように変更し、outFiles属性を、コンパイルされたコードが存在する場所を指すように設定しました。

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

これで問題は解決しました！

2
Darius

更新：0.3.0でTypeScriptデバッグが追加されました。更新：常にブレークポイントをクリアしてから、アタッチしてからブレークポイントを追加します。これはバグであり、報告されています。

2
Muhammad Yehia

この問題の解決に多くの時間が無駄になった後、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」と呼ばれていましたが、使用されなくなりました。

1
Željko Tomić

これを解決する方法は実際には1つしかなく、実際に使用されているソースマップパスを調べることです。

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を微調整して、パスを実際のソースパスに一致させます。プロジェクトごとに若干異なる設定が必要であることがわかったので、これをデバッグする方法を理解することは本当に役立ちました。

1
Cobus Kruger

Angularを使用すると、フォルダーディレクトリを常にsrcフォルダーにポイントすることがわかりました。このように、私のワークスペースは決して使用しないルートファイルで散らかっていません。しかし、これは過去にいくつかの問題をもたらしました。特にVSCodeを使用する場合は、多くの機能がフォルダー構造を見て、そこからファイルを実行するように見えるためです。 （不足しているファイルの一部を期待しています）

そのため、このエラーメッセージでまったく同じ問題が発生し、過去の経験から、プロジェクトをルート<app name>フォルダーではなく1つのフォルダーで開くことに気付きました。そのため、プロジェクトを閉じて1つのフォルダーを開くだけで（他のすべてのファイルもフォルダー構造に含まれるように）、問題はすぐに修正されました。

また、ファイルとフォルダー構造の変更に関する上記の回答の多くは、使用しているフレームワーク/言語が何であれ、ルートフォルダーで作業プロジェクトを開かないという問題の回避策であると考えています。

0
Alfa Bravo

Launch.jsonのこの設定は機能しました：

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

0
User1m

はい！私の場合、launch.jsonファイルでこれを変更すると問題が解決します。

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

パーティーに遅れましたが、この投稿をgithubで確認できます 起動構成＃12254でoutFiles属性のサポートをテストします 。

基本的に、vscodeの新しいバージョンでは、task.jsonでプロパティoutFilesとともにglobパターンを使用する必要があります。

同様の問題がありました。出力ディレクトリをoutFilesで示すことで修正しました

0
TheSoul

数時間のヘッドバンギングに余裕を持たせたいと思います。

Debugger for Chrome for VS code（あなたはこれをwebstormに必要としない）、私は彼らの page を読むのに10分費やすことをお勧めしますあなたの世界を啓発します。

デバッガー拡張機能をインストールした後、source-mapがインストールされていることを確認してください。私の場合、source-map-loader 。 package.jsonを確認してください。

chromeデバッガー構成であるlaunch.json（ 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}/*"
      }
    }
  ]
}

devtool: 'source-map'をwebpack.config.jsに追加します。マッピングインラインを生成するその他のパラメーターは、Chromeデバッガーでは機能しません（ページに記載されています）。

これは一例です：

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
};

次にwebpackを実行します： `webpack-dev-server --devtool source-map --progress --port 8080、webpack-dev-serverを使用しましたが、webpackと同じオプションがあります。

その場合、生成されたアプリの.mapファイルを確認する必要があります。そうでない場合は、戻ってセットアップを確認してください。

VS Codeでデバッグコンソールに切り替えて、.scriptsを実行します。これは、どの生成コードがどのソースにマッピングされているかを表示するため、非常に便利なコマンドです。

次のようなもの：- webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

これが間違っている場合は、launch.jsonで sourceMapPathOverrides を確認する必要があります。例は extensionのページにあります

0
Ayoub Khayati