在日常的前端开发业务代码中，我们经常需要调试数据，所以我们必须经常更改一些参数的初始化数据，或者更改过程中的数据。但是很多时候，改完数据调试之后，忘记改回来了。某个调试场景依赖一个参数的修改，但是需要依赖多个参数的修改，所以很容易漏掉改回来。举两个例子：1、我们有一个触发弹窗打开的按钮，通过变量showDialog来控制弹窗的显示。初始值为false，但是产品说弹窗的样式有问题，所以我们设置showDialog的值为true，然后修改内容（因为不可能每次都点击按钮打开弹窗效果），最后修改后将showDialog设置回false。//伪代码varshowDialog=false;//控制窗口的显示，调试需要依赖它的变量值btn.onclick=()=>{showDialog=true;二、我们有一个抽奖活动，逻辑是在request接口之后拿到抽奖的prize_id之后，比较prize_id的内容，然后决定在视图中显示，但是我们需要调试一个内容一定的抽奖结果，当然我们不会要求接口改变返回的prize_id，所以我们可能会改变传入的display模块的值。//伪代码fetch().then(prize_id=>{showResult(prize_id)//显示开奖结果，调试需要依赖其传入的值})functionshowResult(prize_id){//显示开奖结果的代码thelottery}的问题是，很多时候我们最后忘了改回来，弹窗会直接打开，每次抽奖都会抽到某个奖品。这种低级错误是不应该犯的，但是我也看到过一些app真的把测试过的代码直接放到了生产环境中。所以在这些业务代码中，相信很少有人会做pre-build验证脚本或者单元测试，所以我们需要一个简单的函数来控制变量的赋值，避免这种低级错误。我特地写了一个简单的包：https://github.com/ershing/de...用法：//引入包dev-debuggerimportDevDebuggerfrom'dev-debugger'//初始化dgb实例来控制测试值变量letdbg=newDevDebugger({debug:true})//绑定获取替换方法，或者直接调用dbg.debugVallet_r=dbg.debugVal.bind(dbg)实例有两个方法：debugVal和debugCaseTag/*debugVal(pro,dev)@params传入的第一个参数是production值，第二个参数是debug值*///也可以绑定，方便后续调用let_r=dbg.debugVal.bind(dbg)/*debugCaseTag(pro,tag)@params传入的第一个参数是生产值，第二个参数是自己命名的唯一标签名*///前提需要配合初始化参数letdbg=newDevDebugger({debug:true,caseName:'testPrize1',//调试用例cases:{//用例参数集'testPrize1':{'myPrize':3//标签名称对应的调试值},'testPrize2':{'myPrize':6//Debug对应标签名称Value}}})//也可以绑定方便后面调用let_rt=dbg.debugCaseTag.bind(dbg)所以上面的例子可以这样写：1.控制showDialog的变量值//伪代码varshowDialog=_r(false,true);//调试时值为truebtn.onclick=()=>{showDialog=true;}二、控制显式和隐式函数传入的值//伪代码fetch().then(prize_id=>{showResult(_r(prize_id,3))//调试时3})functionshowResult(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插件，需要在各自的文件中引入dev-debugger包（也有利于单文件组件的独立调试），并且不给实例方法赋值，直接dbg即可。debugVal或dbg.debugCaseTag也可以在bind_t或_rt之后使用，但不要赋值给其他变量。好久没在博客上写东西了，回头看之前写的技术文章都像垃圾：www.ershing.cn
