前端如何避免bug的产生？

项目环境：react生态圈

界面功能基本和：增(新增一条数据)、删(删除一条数据)、查(展示列表)、改(修改数据)挂钩。

一、展示数据列表相关[判空，控制显示距离，分页是否有效，搜索是否有效]

1.渲染数据的时候要做非空判断，有数据展示列表，没有数据展示一个空的div

2.需要展示哪些字段，最好能提前订好，然后就是排列顺序，如果有特殊要求，提前提出来，当然还有就是比如：内容字段很长，是否需要做截取展示也需要考虑进去

3.列表需要展示大量数据，是否对接了分页接口，分页组件功能是否正常

4.一般会提供关键字的搜索功能，搜索功能是否有效，多条件是否有效，需要自我验证一次

二、删除功能

1.一般系统里面功点对应的是：启用和禁用，组件是switch开关，虽然功能很简单，不过需要对接后台接口，做完功能后，测试一遍，然后F5刷新一下界面，看看更改是否生效

三、新增功能

1.新增一条数据，两种模式：一弹出模态框做，这个针对数据少的情况；二跳转到一个新的界面做，针对数据量较多的情况。新增数据需要注意：是否有字段需要定义验证规则，是否非空，是否必填，是否有字段自己的规则，是否需要做异步校验，

2.保存成功后一般是跳转回到列表展示界面，如果保存失败，需要提示用户哪里有问题(这里指后台也做了对应的规则验证，数据提交到后台没有通过的情况下保错)。

四、修改功能

1.是否有不可更改字段，如果有，则此字段不可被客户修改

2.修改时，如果有时间的地方，需要注意时间的逻辑关系，开始时间是小于等于结束时间

3.修改时，和新增一样，需要注意字段是否有自己的验证规则，如果有，请保持和新增的规则一致

4.保存成功返回到列表展示界面，如果保存失败，需要提示用户哪里有问题(这里指后台也做了对应的规则验证，数据提交到后台没有通过的情况下保错)。

前端开发是可以看到的。这个看到是指页面的不正常，要么是dom不正常，要么是js报错，要么是数据有问题，基本上就在这三个方面之内。
如果有问题，
第1，先在脑子里把工作任务的业务流程在脑子里过一遍，看看是不是开发的顺序有问题；
第2，在脑子里，把开发流程分成一段一段的来考虑，看看它是在哪个阶段发生的问题。是加载？还是进入？还是生成？
第3，看看这个bug，是js引起的，还是data引起的？这是在确定问题是谁的责任。
第4，如果是js引起的，那么要在bug出现的前后不同位置，分别打上console.log来查看打印信息进行调试。
这四个流程走完，基本可以确定问题是在哪出现？如何引发的？