分享一下某個debugger心路歷程

Runningfyy發表於2021-11-09

1.起因

1.1現象

bugxxx.png

bug222.png

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

image.png

3.進展

雖然我可以睡服產品，取消狀態必選的驗證，繞過這個問題，但是這不符合我的風格。
收拾心態，重新上路。
從這個warning開始入手debbug吧

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

先點進去，打個斷點
image.png
然後復現一下錯誤 找到呼叫棧
image.png
棧底的是你寫的方法，棧頂的是庫的方法，有時間的可以一步步看一下大體流程。
我直接看的棧頂的幾個函式

4.真相

方法還是打斷點觀察
bug1.png

首先這個type：string讓我有點不好的聯想。這尼瑪是哪來的，官網用例用的字串，我為了傳後端引數方便用的數字，這個當時反覆對比的時候有注意過，沒有引起我的警覺。平時基本也沒加過這個引數。
image.png

繼續往下除錯，呼叫string方法。
bug2.png
string方法裡面又呼叫type 然後把我的錯誤給push進去了
bug4.png

然後我就悟了，估計是型別錯誤，但是尼瑪能不能不要報我自定義的錯誤，就不能報個型別錯誤嗎，干擾我debbuge方向
image.png
解決方法：加個type。完美解決

const rules = {
      roleName: [{ required: true, message: '請填寫角色名', trigger: 'blur' }],
      roleStatus: [{ type: 'number', required: true, message: '請選擇狀態', trigger: 'blur' }]
    }

5.總結

有洗Bug確實雲裡霧裡，建議錯誤棧裡原始碼除錯下，這樣還快一點。

相關文章