在 WebStorm 中调试 React 忽略 webpack-dev-server 的断点
Debug React in WebStorm ignore breakpoints with webpack-dev-server
所以，我正在使用 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 位置。
最后我尝试将 "debugger - built-in-server - port" 设置为 8081，我还安装了 JetBrains IDE Support addon for Chrome 并尝试将端口设置为 8081。但是 WebStorm 告诉我端口不是空闲的，而且 Chrome 工具栏上的插件现在是灰色的。
然后我以为addon port和debugger port跟webpack-dev-server没有关联，只关联debug配置，但是这些想法都是猜测，因为我实在不明白。
最后我运行调试，应用程序索引页面打开它说JetBrains IDE支持正在调试，我修改了任何文件并保存它会热重载，WebStorm中的控制台显示结果在 Chrome 控制台中，似乎一切正常，除了断点，它们都被忽略，就像它们不存在一样，在 WebStorm 的调试器工具 window 中，框架 window 显示 "Frames are not available"，变量 window 显示一个蓝色圆形图标，后跟 "Connected to JetBrains Chrome Extension"，仅此而已，none 变量显示在那里。
抱歉，我对 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 在启动时为 debugging/serving 静态文件打开，它与您的应用程序的服务器端口无关托管于
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） 部分提供一些提示。
如果仍然无法正常工作，请创建支持票以获得有关设置调试器的帮助
所以，我正在使用 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 位置。
最后我尝试将 "debugger - built-in-server - port" 设置为 8081，我还安装了 JetBrains IDE Support addon for Chrome 并尝试将端口设置为 8081。但是 WebStorm 告诉我端口不是空闲的，而且 Chrome 工具栏上的插件现在是灰色的。
然后我以为addon port和debugger port跟webpack-dev-server没有关联，只关联debug配置，但是这些想法都是猜测，因为我实在不明白。
最后我运行调试，应用程序索引页面打开它说JetBrains IDE支持正在调试，我修改了任何文件并保存它会热重载，WebStorm中的控制台显示结果在 Chrome 控制台中，似乎一切正常，除了断点，它们都被忽略，就像它们不存在一样，在 WebStorm 的调试器工具 window 中，框架 window 显示 "Frames are not available"，变量 window 显示一个蓝色圆形图标，后跟 "Connected to JetBrains Chrome Extension"，仅此而已，none 变量显示在那里。
抱歉，我对 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 在启动时为 debugging/serving 静态文件打开，它与您的应用程序的服务器端口无关托管于
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） 部分提供一些提示。
如果仍然无法正常工作，请创建支持票以获得有关设置调试器的帮助