因此，我使用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已经是一台服务器，不需要其他服务器。

然后，我按照此处的说明进行操作，创建了一个调试配置，其URL为" localhost：8081 / build"，因为存在webpack-dev-server位置。

最后，我尝试将"调试器-内置服务器-端口"设置为8081，还安装了适用于Chrome的JetBrains IDE Support插件，并尝试将端口设置为8081。但是WebStorm告诉我，该端口不是免费的，而且Chrome工具栏上的插件现在为灰色。

然后我认为插件端口和调试器端口与webpack-dev-server没有关联，只有调试配置与之相关，但是这些想法都是猜测，因为我真的不明白。

最后，我运行调试，打开了应用程序索引页面，它说JetBrains IDE支持正在调试，我修改了任何文件并保存了它，然后将其热加载。在WebStorm的调试器工具窗口中，它们都被忽略了，就像没有出现一样，"框架"窗口显示"框架不可用"，"变量"窗口显示蓝色圆形图标，后跟"已连接到JetBrains Chrome扩展程序"，即所有，没有变量显示在那里。

抱歉，我对WebStorm调试器和断点调试都不太了解，这是我第一次不知道如何将东西组合在一起。

我应该显式使用create-react-app生成项目(请否)，还是有办法使所有这些工作？

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.

请将其重新设置为默认值-指定的端口是IDE在启动时打开的用于调试/提供静态文件的端口，它与托管应用程序的服务器的端口无关。

seems all works great, except breakpoints, they are all ignored

您需要确保正确生成了源映射(devtool: 'source-map'是首选)，并且(可能)在调试配置中指定了远程URL映射(请检查https://blog.jetbrains.com/webstorm/2017/ 01 / debugging-react-apps /，4.在WebStorm 2016(.1，.2和.3)部分中提供了一些提示)。

如果仍然无法正常运行，请创建支持通知单以获取有关设置调试器的帮助