日常的前端開發業務代碼中，我們經常都需要調試數據，所以要經常更改某些參數的初始化數據，或者更改過程中的數據。
但是很多時候，改了數據調試完之後就忘記改回去了，某個調試的場景是依賴一個參數的修改還好，但是需要依賴幾個參數的修改，就很容易漏改回去了。
舉兩個例子：
一、我們有一個按鈕來觸發彈窗的打開，而控制彈窗顯隱爲變量showDialog，初始化值爲false，但是產品說彈窗裏面的樣式有點問題，所以我們設置了showDialog的值爲true然後修改內容（因爲不可能每次都點擊按鈕來打開看彈窗效果），最後修改完再將showDialog設置回false。
//僞代碼
var showDialog = false; //控制窗口顯隱，調試需要依賴其變量值
btn.onclick = () => {
showDialog = true;
}二、我們有個抽獎的活動，邏輯是請求接口之後拿到抽獎的prize_id之後，對比prize_id的內容，然後決定在視圖中顯示出來，但是我們需要調試某個抽獎結果的內容，當然不會叫接口改返回的prize_id了，所以我們可能會改傳入顯示模塊的值。
//僞代碼
fetch().then(prize_id => {
showResult(prize_id) //顯示抽獎結果，調試需要依賴其傳入值
})
function showResult(prize_id){
//顯示抽獎結果的代碼
}問題就在於，很多時候我們最後忘了改回去，就會出現彈窗直接打開了、每次抽獎都抽中某個獎品的結果了，這種低級錯誤是不應該犯的，但是我也見過某些app真的直接這樣上了測試的代碼到生產環境。
所以在這些業務代碼中，我相信也沒什麼人會做構建前的校驗腳本或者單元測試的，所以我們需要一個簡單的函數來控制變量的賦值，來避免這種低級錯誤。
特意寫了一個簡單的包：https://github.com/ershing/de...
用法：
//引入包dev-debugger
import DevDebugger from 'dev-debugger'
//初始化dgb實例來控制變量的測試值
let dbg = new DevDebugger({ debug: true })
//綁定獲取替換的方法，也可以直接調用dbg.debugVal
let _r = dbg.debugVal.bind(dbg)實例有兩個方法：debugVal和debugCaseTag
/*
debugVal(pro, dev)
@params 傳入第一參數爲生產值，第二參數爲調試值
*/
//也可以綁定方便後面調用
let _r = dbg.debugVal.bind(dbg)
/*
debugCaseTag(pro, tag)
@params 傳入第一參數爲生產值，第二參數爲自命名的唯一標籤名稱
*/
//前提需要配合初始化的傳參
let dbg = new DevDebugger({
debug: true,
caseName: 'testPrize1', //調試的用例
cases: { //用例參數集
'testPrize1': {
'myPrize': 3 //標籤名稱對應的調試值
},
'testPrize2': {
'myPrize': 6 //標籤名稱對應的調試值
}
}
})
//也可以綁定方便後面調用
let _rt = dbg.debugCaseTag.bind(dbg)所以上面的例子可以這樣寫：
一、控制showDialog的變量值
//僞代碼
var showDialog = _r(false, true); //debug時值爲true
btn.onclick = () => {
showDialog = true;
}二、控制傳入顯隱函數的值
//僞代碼
fetch().then(prize_id => {
showResult(_r(prize_id, 3)) //debug時爲3
})
function showResult(prize_id){
//顯示抽獎結果的代碼
}當然上面也可以用debugCaseTag方法來將調試的值放在初始化的函數當中。
然而，在我們構建代碼的時候，當然不想有任何調試的代碼和調試的值的，所以我又寫了一個babel插件：https://github.com/ershing/ba...
用法：
//修改babel.config.js文件
module.exports = {
"plugins":
process.env.NODE_ENV === "production"
? ["babel-plugin-dev-debugger"]
: []
}注意：
使用這個babel插件的話，需要在各自文件中import包dev-debugger（也利於單文件組件的獨立調試），而且不要將實例方法賦值出去，可以直接dbg.debugVal或dbg.debugCaseTag使用，也可以bind之後_t或_rt使用，但不要再賦值給其他變量。
我的博客很久沒怎麼寫了，回頭看看以前寫的技術文章就像垃圾一樣：www.ershing.cn