所以，我正在使用WebStorm开发一个带有webpack的React应用程序，通常我只是在控制台中运行webpack-dev-server，服务器在8081端口，我打开浏览器，访问localhost:8081//build和所有适用于热重装。
今天我想用WebStorm中的调试器深入调试代码，之前我从不使用断点，所以我去了这个页面https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/
虽然我没有安装create-react-app，因为我的项目不是由模块生成的，我用webpack.config.js和package.json手动创建项目，我不知道如何生成现有项目。
其次，我没有运行npm start作为指令，而是通过了这部分因为我认为web-dev-server已经是服务器了，我不需要另外一个。
然后我按照这里的说明，创建了一个调试配置，其网址为＆＃34; localhost：8081 / build＆＃34;因为有webpack-dev-server位置。
最后我尝试设置＆＃34;调试器 - 内置服务器 - 端口＆＃34;到8081，我还为Chrome安装了JetBrains IDE Support插件，并尝试将端口设置为8081。但WebStorm告诉我，端口不是免费的，Chrome工具栏上的插件现在也是灰色的。
然后我认为插件端口和调试器端口与webpack-dev-server没有关联，只关联调试配置，但这些想法都是猜测，因为我真的不明白。
最后我运行调试，打开应用程序索引页面，它说JetBrains IDE支持正在调试，我修改了任何文件并保存它会热重载，WebStorm中的控制台显示结果如同在Chrome控制台中，似乎一切都很好，除了断点之外，它们都被忽略了，就像它们不存在一样，在WebStorm的调试器工具窗口中，Frames窗口显示＆＃34; Frames不可用＆＃34;，Variables窗口显示一个蓝色的圆形图标，后跟＆＃ 34;连接到JetBrains Chrome Extension＆＃34;这就是全部，没有变量显示在那里。
对不起，我不太了解WebStorm调试器和断点调试，这是我第一次不知道如何将这些东西放在一起。
我应该明确地使用create-react-app来生成项目（请不要），还是有办法让所有这些工作？
答案 0 :(得分：1)
最后我尝试设置＆＃34;调试器 - 内置服务器 - 端口＆＃34;到8081，我 还为Chrome安装了JetBrains IDE支持插件并尝试设置 也是8081的港口。但WebStorm告诉我，端口不是 免费，Chrome工具栏上的插件现在也是灰色的。
请将其设置回默认值 - 端口指定IDE在启动时打开一个端口用于调试/提供静态文件，它与您的应用程序托管的服务器端口无关
似乎一切都很好，除了断点，它们都被忽略了
您需要确保正确生成源图（devtool: 'source-map'是最受欢迎的选项）并且（可能）在调试配置中指定远程URL映射（选中https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/， 4.在WebStorm 2016（.1，.2和.3）部分中提供了一些提示。）
如果仍然无效，请创建支持服务单以获得有关设置调试程序的帮助