3

The project I'm working on has Redis on port 6379 and the node server on port 5000. I'm running the server by running npm run server My package.json script is the following:

webpack --watch --progress --config ./build/server/webpack.dev.js

I'm unable to attach a debugger when I add a configuration for Attach to Node.js/Chrome on port 5000 and click the bug icon in WebStorm.

I get invalid response from the remote host

Am I supposed to patch an --inspect option to my package JSON script?

EDIT: I passed inspect down to nodemon. I'm able to attach to the debugger now, but my breakpoints arent suspending. The webpack configs are below:

const commonWebpackConfig = require('./webpack.common')
const merge = require('webpack-merge')
const NodemonPlugin = require('nodemon-webpack-plugin')

module.exports = merge(commonWebpackConfig, {
  mode: 'development',
  plugins: [
    new NodemonPlugin({
        nodeArgs: [ '--inspect'],
        script: './dist/server.js'
    })
  ]
})


const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')

module.exports = {
  entry: {
    server: path.join(__dirname, '..', '..', 'server', 'app.js'),
  },
  output: {
    path: path.join(__dirname, '..', '..', 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  target: 'node',
  node: {
    __dirname: false,
    __filename: false,
  },
  externals: [nodeExternals()],
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              ['@babel/plugin-proposal-class-properties', {'loose': false}]
            ]
          }
        }
      }
    ]
  }
}

I found the breakpoint mapping issue. I needed to add the following:

devtool: "eval-source-map",

EDIT:

I don't think the breakpoints are fully working for blocsk of code that has async/await though

4
  • you need passing --inspect or --inspect-brk to node.js when starting your application to be able to attach a debugger to it. So yes - you have to modify your npm script accordingly
    – lena
    Jul 16, 2019 at 12:39
  • Would i add ` && node --inspect-brk` to the the npm script? I'm a new hire and the current dev has been using console logging to debug. He's not sure how to set it up. I think having breakpoints would greatly help us. From what I understand, the webpack.dev is just the webpack config. I'd have to find where the dis folder is right? Jul 16, 2019 at 17:01
  • webpack --watch --progress --config ./build/server/webpack.dev.js doesn't normally start the app, it builds the application; adding && node --inspect-brk won't work. You need to find the actual command that starts your application and modify it, adding the --inspect or --inspect-brk to node.js args
    – lena
    Jul 16, 2019 at 18:32
  • So I found out we're using nodemon-webpack-plugin so I passed down nodeArgs: [ '--inspect'] as an option and then was able to attach a debugger to port 9229. However, my breakpoints aren't being hit. They get a check mark in webstorm which means its found. Not sure if its a mapping issue? Im testing the breakpoint in an area of the code where I know for a fact gets hit. Jul 16, 2019 at 21:21

1 Answer 1

3

I was able to get it to work. We were using nodemon-webpack-plugin, so I needed to pass in nodeArgs like Lena said. I passed it --inspect which by default is port 9229.

I then had to add devtools: "eval-source-map So that my breakpoints had the right mapping.

EDIT:

I don't think the breakpoints are fully working for blocsk of code that has async/await though

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.