Property outFiles is not allowed in vs code's launch.json

Question

I am trying to debug typescript in vs code. As far as I researched, you need to set the outfiles property in th launch.config for vs code to map a breakpoint that you have set in a TypeScript file from the compiled .js file, as specified here.

When I try to set mine, I get this error:

I found nothing about this error in google, and as this settings is needed for the typescript debugger to work, as indicated also in the vs code documentation.

Thanks in advance for any help.

Edit:

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

user_66384 · Answer

You cannot use "outFiles" : true for a chrome debug config

If you are looking to debug your typescript code, you need to make sure you have set your ts compiler to generate source maps.

Make sure you have these two settings in your tsconfig file.

//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. */,

and if you already have "sourceMap": true, in your tsconfig you need to remove it if you want to use "inlineSourceMap": true NOT FROM LAUNCH.JSON!

These settings will generate inline source maps for your code.

In the end your launch.config should look something like this

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

Property outFiles is not allowed in vs code's launch.json

1 Answers