CODEWITHSUNDEEP
debuggingvisual-studio-coderesolvejs
nlips
nlips

Reputation: 1288

How to debug a resolvejs application using VSCode

I'm using Visual Studio Code. I just created a resolvejs application.

How to run the application step by step from vscode ?

Here is my debugging setup (in .vscode\launch.json):

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/run.js",
  "args": [
    "dev"
  ],
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy",
    "--inspect"
  ]
}

My breakpoints in my command handlers do not work.

Upvotes: 2

Views: 151

Answers (1)

Vladislav Ihost
Vladislav Ihost

Reputation: 2187

Although file run.js is some kind of entry point in resolve framework-based application, it is not actual entry point for runtime phase. When resolve application is being launched by yarn dev / npm run dev command, in fact two actions are performed: building bundle using run.js (which by default uses config.[MODE].js files for appropriate mode) and launching target bundle in separate process with watch mode, which causes automatic rebuild on every file change in project (aka hot reload).

Bundle is stored at <APP_DIR>/dist/common/local-entry/local-entry.js. To allow debugging from IDE, spawned debug nodejs should invoke target bundle directly. It can be reached by separating application compile- and runtime phases.

Resolve includes command for application building without run it - yarn build / npm run build. This command builds application in production mode, but this behavior can be easily modified to development mode by editing run.js entry point - just find line case 'build': and replace following line from await build(merge(baseConfig, prodConfig)) to await build(merge(baseConfig, devConfig)). Or additional script for building app in dev mode can be appended, like yarn build-dev - amount of possible scripts is unlimited.

Then just run command yarn build and start debugger with pointing entry point as ${workspaceFolder}/dist/common/local-entry/local-entry.js. If source maps had built right, breakpoints should work fine.

Upvotes: 2

Related Questions