web-dev-qa-db-ja.com

対応するJavaScriptが見つからないため、VSコードで現在のTypeScriptファイルをデバッグできません

Visual Studio Codeバージョン1.17を使用していますが、私の目的はcurrent TypeScriptファイルをデバッグすることです。ビルドタスクを実行しているので、次のような対応するjavascriptファイルが常にあります。

src/folder1/folder2/main.ts
src/folder1/folder2/main.js

私は次のlaunch.json設定で試しました：

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": [
    "${workspaceFolder}/${fileDirname}**/*.js"
  ]
}

しかし、エラーが発生します：Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

しかし、対応するJavaScriptファイルは存在します！

tsconfig.json：

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es6",
    "lib": [
        "es2017",
        "dom"
    ],
    "module": "commonjs",
    "watch": true,
    "moduleResolution": "node",
    "sourceMap": true
    // "types": []
},
"include": [
    "src",
    "test"
],
"exclude": [
    "node_modules",
    "typings"
]}
javascripttypescriptvisual-studio-codevscode-settings
24
DauleDK

outFilesの設定が間違ったディレクトリを指している。

launch.json構成をこれに置き換えると修正されます：

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": ["${fileDirname}/*.js"]
}

vscode launch.json変数リファレンス から：

${fileDirName}現在開いているファイルのディレクトリ名

必要なディレクトリにする必要があります。

"outFiles": ["${fileDirname}/**/*.js"]を使用してサブディレクトリを含めることもできます。

使用している構成により、次のディレクトリが追加されます。

"${workspaceFolder}/${fileDirname}**/*.js"

これは次のようなものに変換されます：

"/path/to/root/path/to/root/src/folder1/folder2/**/*.js"

つまり、ルートへのパスが2回あり、無効なパスになります。

。jsファイルが別のoutDirにある場合：そのようなディレクトリへのパスを使用します。 TypeScript sourceMapsが残りを行います。

たとえば、.jsファイルをdistディレクトリに配置した場合：

"outFiles": ["${workspaceFolder}/dist/**/*.js"]
6
lucascaro

問題は、構成ではなくマップファイルにある可能性があります。

他のことを試みる前に、起動構成で使用しているパスが正しいことを確認する必要があります。

これを行うには、システム上の一時パスを一時的に絶対パスに置き換えて、機能するかどうかを確認します。

それが機能しない場合は、以下を実行する必要があります：

Tsconfigを確認し、mapRootの下のcompilerOptionsが何も設定されていないことを確認してください。これは公式文書がそれについて述べなければならないことです：

生成された場所ではなく、デバッガーがマップファイルを検索する場所を指定します。 .mapファイルが実行時に.jsファイルとは異なる場所に配置される場合、このフラグを使用します。指定された場所はsourceMapに埋め込まれ、マップファイルの場所をデバッガに指示します。

詳細についてはこちらをご覧ください こちら

ほとんどの場合、実際には何も設定したくありません。

また、

"sourceMap"：true`

tsconfig.jsonのcompilerOptionsに設定され、マップファイルが生成されます。

17
Aakash Malhotra

他の誰かがこれにぶつかった場合：プロジェクトをビルドするためにwebpackを使用している場合、VS Code互換のソースマップを生成する devtool 設定を使用する必要があります。試行錯誤を通して、cheap-module-source-mapとsource-mapはうまく機能します。私はwebpack.config.jsにこれを追加することになりました：

devtool: env.production ? 'source-map' : 'cheap-module-source-map'
3
starkos

これは私の場合でうまくいきました：

_gulpfile.js_に移動し、sourcemaps.write()を含む行を見つけます。この行を

_        .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../lib' }))
_

プロジェクトを再構築し、デバッガーを再度実行してください。 クレジットはGitHubのroblourensに送られます。 彼はリンクしました このページ これは役に立ちました。

0
mneumann

私の場合、犯人はlaunch.jsonのファイルのディレクトリ以外のディレクトリに作業ディレクトリを設定していました。

"cwd": "${workspaceFolder}/dist"

おそらく、VSCodeのバグである可能性があります。

0
mrmashal