react项目，有什么好的调试方式吗？

Question

react项目，运行的时候，都打包到一个bundle.js文件里面，然后控制台报错后，定位的文件都是定位bundle.js的内的位置，完全不知道自己代码是哪里的问题。有什么好的调试方式吗？

Answer 1

一、使用 React Developer Tools 来调试 VirtualDOM。
二、Webpack 设置 devtool 来显示，哪部分代码报错。

Webpack devtool 设置例子。

module.exports = {
  devtool: 'cheap-eval-source-map',
}

Answer 2

使用webpack配置打包会.map文件，这个是用来调试用的，方便定位到原始代码的位置

Answer 3

source map

Answer 4

大概哪个组件报错是可以知道的，然后写一个debugger就可以了。

Answer 5

写一个debugger

Answer 6

单元测试：观察视图是否发生变化