1

I'm trying to debug the back-end of the react - express application. I'm using webpack for bundling.

How to edit configuration on WebStorm so that I could debug both front end and back-end? I'm using WebStorm 2016.

LazyOne
  • 158,824
  • 45
  • 388
  • 391
TRomesh
  • 4,323
  • 8
  • 44
  • 74

2 Answers2

2

You need to create and start a Node.js run/debug configuration to debug your server-side code and create and start a JavaScript debug configuration for the client-side code.

In the Node.js configuration in the JavaScript file field you need to specify the path to file that kicks off the server.

In the JavaScript configuration in the URL field specify the URL your server is running on. You might also need to configure the mappings between local paths and remote URLs: that's most probably should be between the folder where the component are located and webpack:///. (see this answer for more details).

Also make sure that you have dev-tools: 'source-map' in your Webpack configuration.

Community
  • 1
  • 1
Ekaterina Prigara
  • 4,697
  • 3
  • 21
  • 17
2

Went through some documentations on WebStrom and finally managed to get it working. First select Edit Configurations then a menu will pop up which will allow you to edit Run/Debug Configurations. Click the + button on the left side and add a node js. From that change the Node interpreter from default(local) node_modules to the babel node inside your project dependencies. eg ~/MyWork/Project/node_modules/.bin/babel-node. Then Add --presets=babel-preset-es2015 as Node Parameters. Fill the rest of the configurations and click save and run the project.

Here is an example: enter image description here

TRomesh
  • 4,323
  • 8
  • 44
  • 74