Debugger is not working inside the controller

[alex-w0]

Hi, I have the following problem.

When I'm starting the VS Code Debugger and I'm calling the url /api/users for example then the debugger statement will not stop inside the controller. When I'm placing a debugger statement outside of the controller class it works smoothly. I'm pretty sure the code inside needs to be executed as well, since I get back the response correctly.

Any ideas how can I stop the debugger also inside the controller?

[alex-w0]

I think i found out now what was the problem. I also run the command "yarn start", when i started the debug mode in Visual Studio Code and so it was closed immediatly.

[humbertowoody]

Hi! My best guess is that the VSCode debugger cannot listen to the TypeScript code as it is being transpiled into plain JS before execution. Have you found a way to use VSCode's debugger with this template? Thanks in advance!

[alex-w0]

Currently I haven't found a solution to debug the code without first transpiling it into plain JS. When you first transpile the code into plain JS, the VSCode debugger works well. Would be nice if there is a possibility to debug the typescript code directly.

[s-pic]

Debugging the ts code works well in WebStorm. If this helps someone:

<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="debug" type="NodeJSConfigurationType" node-parameters="--require ts-node/register" path-to-js-file="src/app.ts" working-dir="$PROJECT_DIR$">
    <envs>
      <env name="NODE_ENV" value="development" />
    </envs>
    <method v="2" />
  </configuration>
</component>

[fcleynen]

The main reason why debugging the ts code in VS Code is currently not working is because the 'transpile' step in package-scripts.js is creating the js map files in the temporary .tmp folder. If you look in the 'dist' folder and open any map file, you'll notice that the 'sources' array has wrong paths in it (it goes up one folder too many).

One way to solve this is by running an additional command/script as a last step in the 'yarn start build' sequence.

Launch.json configuration

{
            "type": "node",
            "request": "launch",
            "name": "Debug Program",
            "program": "${workspaceFolder}/src/app.ts",
            "cwd": "${workspaceFolder}",
            "protocol": "inspector",
            "outputCapture": "std",
            "env": {
                "NODE_ENV": "production"
            },
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js"
            ],
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "sourceMaps": true,
            //"stopOnEntry": true,
            "console": "internalConsole",
            "trace": true
 }

fix-js-mappings.sh find dist -type f -name "*.js.map" -print0 | xargs -0 sed -i '' -e 's/sources":\["..\//sources":\["/g'

package-scripts.js build

build: {
            script: series(
                'nps banner.build',
                'nps config',
                'nps lint',
                'nps clean.dist',
                'nps transpile',
                'nps copy',
                'nps copy.tmp',
                'nps clean.tmp',
                **'nps mappings',**
            ),
            description: 'Builds the app into the dist directory'
        }

Mappings command

         /**
         * Correct JavaScript mappings
         */
        mappings: {
            script: `./fix-js-mappings.sh`,
            hiddenFromHelp: true
        }