ウェブサイト検索

typescript - プロパティ outFiles は VS Code の launch.json では許可されていません

私はVS CodeでTypeScriptのデバッグを試みています。調べた限りでは、ここに記載されているように、TypeScriptファイルで設定したブレークポイントをコンパイルされた.jsファイルにマッピングするためには、VS Codeのlaunch.configでoutfilesプロパティを設定する必要があります。

自分のものを設定しようとすると、このエラーが出ます:

このエラーについてはGoogleで何も見つかりませんでした。そして、この設定はTypeScriptデバッガが動作するために必要であり、VS Codeのドキュメントにも示されている通りです。

ご協力いただけると幸いです。

編集：

launch.json：

"configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "tsc",
            "sourceMaps": true
        }
    ]

tsconfig :

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
    "outDir": "src/ts-built",
    "rootDir": "src"
  }
}

回答 #1

Chrome のデバッグ構成で "outFiles" : true を使用することはできません

TypeScriptのコードをデバッグしたい場合、tsコンパイラーでソースマップを生成するように設定していることを確認する必要があります。

tsconfigファイルにこれらの2つの設定があることを確認してください。

//TSCONFIG SETTINGS
"inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */,
"inlineSources": true /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */,

そして、すでに "sourceMap": true, があなたの tsconfig にある場合、"inlineSourceMap": true を使用したいなら、それを削除する必要があります。LAUNCH.JSON からではありません！

これらの設定は、コードのインラインソースマップを生成します。

最終的に、あなたの launch.config はこのような感じになるはずです

{
  "name": "Launch Chrome",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/wwwroot",
  "sourceMaps": true // this is is the important setting. 
}

関連記事