结论
在 .webpackrc.js 文件添加
devtool : "inline-moudle-source-map"
生成 source code，在 浏览器进行 debug。
背景
初入 ReactJS，没有任何基础知识，凭借后端的问题排查经验来处理问题（通过 console.log 在可疑位置打印变量来观察值的变化），这样问题是可以解决，但过于消耗时间，效率过低，对自己，对公司都不利。
所以在闲暇时探索如何 debug。
为什么没找团队寻求帮助？
本身就毫无前端基础知识，就当通过疑惑去了解问题，解决问题，不在乎结果，过程更重要。
知识是自己的嘛。
最开始想使用 idea 的 JavaScript Debug 来解决，但找了无数资料，可以启动界面，但就是不进断点。没办法，还是咨询下朋友，他们是怎么进行 debug的？
答复说，可以在浏览器上debug，但提前是你需要编译出 source code。
怎么编译出 source code 呢？
给了我一个Key Word source map，但我们的项目不是使用 React 标准的脚手架生成的（个人理解的，如果有错，别介意，我改正），而是使用的 Roadhog 来构建，和网上大部分的不太一样（示例都是在 webpack.config.js 添加devtool: 'source-map' 或其他，但我们工程压根没这文件...）。
后面在 Roadhog github 里找到 一个名为 devtool 的配置项，这里面有 关于 source-map 各种参数的介绍。
看了上面的文档，其实我是一头雾水的，只是明确了一个目标，Roadhog 框架可以生成 .map 的文件，然后在浏览器上可以对他进行 debug，但不会配置，因此 就 在网上 查找相关资料。
.webpackrc.js
后来找到一篇 文章 , 里面也遇到了相同的问题，不过他的 Roadhog 版本较低，后面看评论，说在 2.x 版本就已经修复了，但我们工程里用的版本 是解决了问题之后的版本，不会存在无法生成 source-map 的问题，那就还是使用方式不对了。
按照这个文档上的方式进行 配置后
devtool : "eval-source-map"
执行 npm run build 进行文件编译，你会发现，之前的文件编译后就 几百kb，但现在编译后（还是没有 .map 文件...），会有几兆的大小，这说明源文件应该是被编译了，怀着 try 的心情，deploy it.
But
当我deploy 编译后 的文件，打开浏览器，F12，发现 Sources 目录下，没有 webpack:// ，这就意味着失败了?
别人能实现，而我不能实现，心情很烦。
还是由于没有基础知识，直接上手，各种不顺...
接着又进行一系列探索，看到 inline-moudle-source-map 这个参数
修改 devtool 的值：
devtool : "inline-moudle-source-map"
重复编译，部署操作
打开浏览器，会发现，Sources 目录下，有 webpack:// 点开后，到 src 目录下，会发现该页面使用到了的文件结构 和 工程里的一模一样。
如下：
现在，打开文件，找到想要 debug 的行数，观察变量在每一步后的变化情况。
编译后的文件格式：
整个过程前前后后经历了好几天的闲暇时间
今天周末，又花了点时间，终于弄好了，心情舒畅。
虽然最后还是有点遗憾没看见网上说的 .map 文件，可能是版本，框架不同等等的影响吧，以后慢慢深入了解吧。
2021.08.29
