So, I am using WebStorm to develop an React app with webpack, usually I just run webpack-dev-server in the console, the server is at port 8081 and I open the browser, visit localhost:8081//build and all works with hot reload.
Today I want to debug deeper into the code with debugger in WebStorm, I never use break points before, so I went to this page https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/
Though I did not install create-react-app, because my project is not generated by the module, I created project manually with webpack.config.js and package.json, I do not know how to generate a existing project.
Second, Instead of run npm start as the instruction, I also passed this part because I think web-dev-server is already a server, I do not need another one.
Then I followed the instructions from here, created a debug configuration with an url of "localhost:8081/build" as there is the webpack-dev-server location.
At last I tried to set "debugger - built-in-server - port" to 8081, I also installed JetBrains IDE Support addon for Chrome and tried to set the port to 8081 either. But WebStorm told me that the port is not free and also the addon on Chrome toolbar now is grey.
Then I thought that the addon port and debugger port is not associated with webpack-dev-server, only the debug configuration is associated, but these thoughts are all guesses, because I really do not understand.
At last I run debug, the app index page is opened and it said JetBrains IDE support is debugging, I modified any file and saved it would hot reload, console in WebStorm showed result as in Chrome console, seems all works great, except breakpoints, they are all ignored, like they were not there, in the debugger tool window in WebStorm, the Frames window shows "Frames are not available", the Variables window shows a blue round icon followed by "Connected to JetBrains Chrome Extension" and that is all, none variable shows there.
I am sorry I did not understand both WebStorm debugger and breakpoint debugging well, this was my first time I do not know how to get stuff together.
Should I use create-react-app explicitly to generate a project (please no), or is there a way to make all this working?
At last I tried to set "debugger - built-in-server - port" to 8081, I also installed JetBrains IDE Support addon for Chrome and tried to set the port to 8081 either. But WebStorm told me that the port is not free and also the addon on Chrome toolbar now is grey.
Please set it back to default - port specified there is a port the IDE is opening on start for debugging/serving static files, it has nothing to do with the port of the server your application is hosted on
seems all works great, except breakpoints, they are all ignored
you need to make sure that the sourcemaps are generated properly (devtool: 'source-map' is the most preferred option) and (probably) specify the remote URL mappings in your debug configuration (check https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/, 4. In WebStorm 2016 (.1, .2 and .3) section for some hints).
If it still doesn't work, please create a support ticket to get the assistance on setting up the debugger