【发布时间】：2017-12-30 02:31:13
【问题描述】：
所以，我正在使用 WebStorm 开发一个带有 webpack 的 React 应用程序，通常我只是在控制台中运行 webpack-dev-server，服务器位于端口 8081，我打开浏览器，访问 localhost:8081//build 并且所有工作都与热重新加载.
今天想在WebStorm中用debugger对代码进行更深入的调试，之前没用过断点，所以就去了这个页面https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/
虽然我没有安装create-react-app，因为我的项目不是由模块生成的，所以我用webpack.config.js和package.json手动创建了项目，不知道如何生成已有的项目。
其次，我没有按照指令运行npm start，而是通过了这部分，因为我认为web-dev-server已经是一个服务器，我不需要另一个。
然后我按照此处的说明创建了一个调试配置，其 url 为“localhost:8081/build”，因为存在 webpack-dev-server 位置。
最后我尝试将“调试器 - 内置服务器 - 端口”设置为 8081，我还为 Chrome 安装了 JetBrains IDE 支持插件，并尝试将端口设置为 8081。但是 WebStorm 告诉我该端口不是免费的，并且 Chrome 工具栏上的插件现在是灰色的。
然后我以为addon port和debugger port跟webpack-dev-server没有关联，只有debug配置关联，但是这些想法都是猜测，因为我真的不明白。
最后我运行调试，应用程序索引页面打开，它说 JetBrains IDE 支持正在调试，我修改了任何文件并保存它会热重载，WebStorm 中的控制台显示结果与 Chrome 控制台中一样，似乎一切正常，除了断点，它们都被忽略，就像它们不存在一样，在 WebStorm 的调试器工具窗口中，Frames 窗口显示“Frames are not available”，Variables 窗口显示一个蓝色圆形图标，后跟“Connected to JetBrains Chrome Extension”就是这样，那里没有显示任何变量。
很抱歉我没有很好地理解WebStorm调试器和断点调试，这是我第一次不知道如何把东西放在一起。
我应该明确使用 create-react-app 来生成项目（请不要），还是有办法让这一切正常工作？
【问题讨论】：
标签： reactjs debugging webpack webstorm create-react-app