Node debugging with WebPack and Feathers

Question

I joined a group building a product with Node, Webpack, TypeScript and Express/Feathers. Other developers know what they are doing, but I have only used JavaScript on a client until now and have literally only a few hours of Node under my belt. Trying to figure out how to go about debugging. Specifically, my first task is to fix some failing API tests.

Tests are executed with:

$npm run testserver

My package has:

"scripts": {
....
"testserver": "webpack --config webpack.servertest.config.js && NODE_ENV=test mocha dist/serverTests.js",
....
},

The routine is to compile typescript into ES6 then babel to ES5 compatible with Node.

I tried doing:

$node-debug dist/serverTests.js

When this node-debug invocation runs, the results are not the same as with npm. Please share your experience.

Thank you

Answer 1

Based on your setup, I can recommend you to try Visual Studio Code, OS text editor/ide based on Electron as well as Atom editor.

To solve your issue you can use two vscode features:

• Debugging - link on docs how to debug in vscode
• Tasks - task management, for instance to look into webpack config which is started with some args and etc

Firstly, let's try simple solution that may be appropriate in your case (tasks file doesn't need):

Add to the end of testserver --debug-brk it's used for debug in node.js, brk - it simply stops execution on the first line.

"testserver": "webpack --config webpack.servertest.config.js && NODE_ENV=test mocha dist/serverTests.js --debug-brk",

Now when you npm run testserver, mocha starts in debug mode and in console you will see something like Debugger listen on port 5858

Second step, in vscode you need to add some props (port 5858) to launch.json - read section Debugging in docs that I mention above:

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Attach", // or e.g. "Mocha Debug"
      "type": "node",
      "request": "attach",
      "port": 5858
    }
  ]
}

And that's it. Go in debug mode in vscode, put breakpoint in a test file, choose in dropdown 'Attach' or 'Mocha Debug' and start debugging(F5)

p.s. Also VS code has first-class TypeScript support that may be helpful for you.