分享一下某个debugger心路历程

1.起因

1.1现象

1.2代码：

<Form  ref="formRef" :model="formState" style="padding-left: 8px;margin-bottom: 20px" :rules="rules">
    <Form-item label="角色名" name="roleName">
      <Input v-model:value="roleName" style="width: 200px"/>
    </Form-item>
    <Form-item label="状态" name="roleStatus" v-if="type==='add' || type==='edit'">
      <RadioGroup v-model:value="roleStatus" >
        <Radio :value="1">启用</Radio>
        <Radio :value="0">禁用</Radio>
      </RadioGroup>
    </Form-item>
  </Form>

... js
const formState = reactive({
      roleName: '',
      roleStatus: 1
    })
 const rules = {
      roleName: [{ required: true, message: '请填写角色名', trigger: 'blur' }],
      roleStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
    }
...

2.逐渐抓狂

经过半个多小时反复的对照官方用例，以及之前写过的代码
经过不断的不断的尝试
我99.99%的确定自己的代码没啥问题
卧槽 ，为啥提示状态没有选， 一直让我选状态 MDZZ

3.进展

虽然我可以睡服产品，取消状态必选的验证，绕过这个问题，但是这不符合我的风格。
收拾心态，重新上路。
从这个warning开始入手debbug吧

index.js?2a95:120 async-validator: ["'${name}' is not a valid ${type}"]

先点进去，打个断点

然后复现一下错误 找到调用栈

栈底的是你写的方法，栈顶的是库的方法，有时间的可以一步步看一下大体流程。
我直接看的栈顶的几个函数

4.真相

方法还是打断点观察

首先这个type：string让我有点不好的联想。这尼玛是哪来的，官网用例用的字符串，我为了传后端参数方便用的数字，这个当时反复对比的时候有注意过，没有引起我的警觉。平时基本也没加过这个参数。

继续往下调试，调用string方法。

string方法里面又调用type 然后把我的错误给push进去了

然后我就悟了，估计是类型错误，但是尼玛能不能不要报我自定义的错误，就不能报个类型错误吗，干扰我debbuge方向

解决方法：加个type。完美解决

const rules = {
      roleName: [{ required: true, message: '请填写角色名', trigger: 'blur' }],
      roleStatus: [{ type: 'number', required: true, message: '请选择状态', trigger: 'blur' }]
    }

5.总结

有洗Bug确实云里雾里，建议错误栈里源码调试下，这样还快一点。