关于前端:分享一下某个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 的确云里雾里，倡议谬误栈里源码调试下，这样还快一点。