编译构建好的reactjs程序可以打断点调试吗

#1

如题react程序已经build成一个html、一个js和一个css放到生产环境上了，发现一样的数据生产环境展示出来的效果跟开发环境不一样，可以怎么调试呢？

构建完的index.js的代码被压缩的看不出原样了，还能断点调试吗？

安装了chrome插件react dev tool，但是只能看最终的组件渲染结果和对应的props和state，我想跟踪一下程序看看最后走了哪条分支？

#2

打开chrome dev tool -> source -> webpack 即可找到react 代码， 可断点调试。

#3

你好， 开发环境是可以直接搜到程序的source打断点的，我是已经build完放到生产环境的，已经没有webpack了。
程序上线的时候应该把webpack去掉的吧

#4

生产环境也可以添加sourcemap的，要么自己手动添加一下

#5

你好 确实找了挺多帖子都说用sourcemap的方式， 不过我用的是dva 里面集成的roadhog build命令来构建的，这个貌似貌似还不支持配置生成sourcemap文件，请问这里说的手动添加是指手动添加sourcemap文件吗？有相关帖子可以参考一下不？ 感谢

#6

同求方法与相关的帖子

#7

已解决 配置webpack devtool = 'source-map'; 可以生成对应的sourcemap， 可以在代码构建压缩之后进行调试 @JustPlayer

#8

一般来说，不要把sourcemap发到线上。调试线上的程序，一般都是改本机hosts文件cdn地址，把js文件代理到本地未压缩的文件。甚至前后端分离的开发都可以这么干。

#9

debugger…

#10

是的 这个也是一种思路 ；
sourcemap不会发现网的 我就是想在开发环境上部署 现网的时候也是用你这种思路 改一下host就可以调试了。
不过发现一个问题就是sourcemap的打断点很不靠谱 不是严格按照逻辑跳转的。
先mark下 后面试试你的做法 thk！