分享错误的目的。开发过程中往往伴随着bug。如果无法修复或无法重现，这些问题将被忽略。因此，计划每当遇到9个有价值的、有思想的bug时，我会统一分享出来，从而拓展思维工作本身，不断提高自己的认知，毕竟能力的提升必然遇到不同的bug，而如果你遇到的bug越来越少，只能说明你的工作任务和学习任务“原地踏步，不饱和”，这种情况下，靠bug见证你的成长。1：element-ui:el-cardtagbug现象：有一天测试突然告诉我，一个当前版本没有被触及的页面出现了一个bug，页面上有的数据是Empty，有的按钮点击是无效的。Bug追踪：首先分析：嗯，如果是根本没碰过的页面有问题，那是历史遗留问题，或者是后端返回的问题，那我们排查一下，但是检查的过程让我傻眼了，后台返回了值却莫名其妙的一直报'nullvalue'的错误，而且这个是三年老项目或者其他项目组转过来了。说实话，代码很烂很乱，用了很多mixin里面还有一些逻辑进入了node_modules，也没有说明文档。这个时候只能靠蛮力破解了。使用调试器逐步跟踪它。折腾了半天，我找到了关键点。是一个没有传过值的子组件，然后这个子组件也会传一个值给父组件，这样就会导致父组件中有些值是空的，报错。我看了一下网上的工程，没有这个问题。这是我的版本的问题，所以肯定是有人动了这个页面的代码，或者是整体环境的某个全局属性被篡改了，问题涉及面很广。调出gitlab当前页面的上一版本代码，（这里有一个小技巧）并提交当前代码，生成缓存并用上一版本代码覆盖当前代码。你可以在deff中看到两个版本的代码之间的区别。发现原来根标签是
...
，这次是
，思路有点堵：只是改了标签，并没有涉及到任何属性和变量，怎么会导致数据崩溃？？Bug原因：罪魁祸首是this.$parent，原来上次同学是通过组件中父组件的实例获取到parent传过来的数据的，所以问题就清楚了。
标签变成了他的parent，理所当然的获取不到更高层的数据，所以获取到的数据是空的，'猛手'是它。Bug解决：把this.$parent改成'行间传值'的形式，测试好用不。找找全球有没有类似的情况，一一改正。找到那个加了
的同学，说明原因，问他有没有这样改过其他地方的代码，其他项目也出现过同类型的情况，因为没有明确的数据来源和用户，这会导致问题以外的问题难以排查。这种“父子”关系非常脆弱，很容易突然“父组件”变成爷爷组件，bug随之而来。就到这里了，所以非万不得已或者高度封装的环境不建议使用。如果你随意改动一段代码，对你的知识没有影响，但不代表真的没有影响。不要忽视“验证”这个环节，你需要对自己写的代码负责，好吗？2：antv:linechartflashbackbug现象：之前使用公司的二次封装echarts开发，这个版本使用antv开发图表，但是奇怪的事情发生了，折线图的'y轴'有闪退现象，即就是，10,5,0的怪异排列，导致图形上下颠倒。bug追踪：之前没有类似的问题，这个版本才出现。这个版本后端没有动态接口，那么问题出在这个组件的使用上。第一种分析：有没有这种控制y轴正负的属性？我在文档中找不到它。第二次分析：去官网举个例子，单字母还不错第三次分析：那么问题出在数据上，但是数据没有转化，那么问题出在两者的机制上处理数据的插件。经过仔细的观察，仔细的观察，我发现了！原来后台返回的Numbers是'string类型'。Bug原因：本来antv只会把'number'从小到大排序，汉字会按照收到的顺序显示。我把所有的组数据都加进去就ok了。bug思考：不同组件库的数据处理形式也不同。不要以为改变组件库知识的方法就足以改变API。会有很多“原罪”。通过使用三套不同的图表库，我受益匪浅。不是图表华丽的效果，而是对每一个图表调用方法的思考，让我对设计模式的理解更加深刻。3：正则性：前瞻匹配vsFirefoxbug现象：项目突然不能在Firefox和ie浏览器上运行，当然项目只需要在谷歌浏览器中运行即可，但我还是想探究一下这个现象。缺陷追踪:这次排错顺序不对。我会首先检查以前的版本是否可以在Firefox上运行。如果我发现以前的版本没有问题，我会定位到当前版本的问题。其实应该先查看控制台报错，但是因为页面是空白我想当然的认为是完全崩溃了，或者后台报错了，（下次一定要先追查报错信息在console)也就是这段“SyntaxError:invalidregexpgroup”，是前瞻匹配的问题，我做的是下面的代码用于value加千位号的过滤，(其实我自己写的是翻转字符串，每3位加',')exportdefault{install(vm){//如果下面是3的倍数，则加一个','vm.filter('formatThousand',(num)=>{if(!num)return0;constreg=/\d{1,3}(?=(\d{3})+$)/g;return(`${num}`).replace(reg,'$&,');});},};那么注释掉这段代码就不会报错了吗？答案是否定的，仍然报错。我打开了vscode的搜索控制台，输入了前瞻匹配的语法，但是什么也找不到。思考....vscode的搜索控制台也有局限性。比如不会深入node_modules去搜索，这也是为了性能，所以肯定是新引入的插件有问题。经查找，是因为我们公司生产的‘3dview’组件使用的是正则前瞻匹配，但是为了更好的促进公司技术的发展，还是需要使用公司的技术，所以现在不是投诉而是反馈，这个问题要跟可视化部门搞清楚。好在当前项目不需要刻意兼容Firefox，但其他项目要注意。什么是前瞻性匹配：正则性是js的基础，如果不熟练的同学需要反思，？也可以解除贪心模式(?=exp)匹配满足表达式exp的位置(?!exp)匹配不满足表达式exp的位置设备不支持前瞻匹配bug思路：很多时候我们忽略了某些方法的兼容性，甚至有些插件也不考虑兼容性，所以技术选型一定要根据项目需求。如果我们自己开发插件，有必要写一个兼容范围给大家使用。4：scss：引入scss文件无效bug现象：需要全局改变tablephase我单独拿出一个scss文件放在最外层，但是奇怪的是，scss文件里面的嵌套写法没有生效，必须像css文件一样写才能生效。bug追踪：定位问题：嵌套写法无效，那么变量有效吗？答案是无效，也就是说我导入了scss文件，系统可以解析，但是scss的写法系统不识别，所以是我的scss-loader坏了？在每个vue文件里写lang='scss'就可以了，然后找到之前项目的import方法复制粘贴，还是不行。。。bug原因：引入css有两种方式，一种是它scss提供如下：使用第二种方法正确解析scss文件@importurl('./assets/style/animation.css');//@import'@/assets/style/animation.css由css提供。CSS';//scss提供的bug思维：不要小看import方法。写项目css是很重要的一环。主要有'ben'和'oocss'两种思想。有人直接在html文件里写css，也有人直接写在app.vue文件里，不加'scoped'，也就是全局模式。当然，这些都没有问题，但我们毕竟是有追求的工程师。做到'美观'和'工程化'，'颜色好代码就好。5：vue:Don'tcallthefolderbinbug现象：我上一篇分享了如何在项目中做mock工程，但是把mock工程放到一些项目中后就出现了奇怪的错误，首先是可以启动正常，8080端口也启动成功了，但是……浏览器会瞬间终止localhost的服务，强行退出也没事？？bug追踪：说实话，第一时间脑子一片空白，想不通具体原因。经过多次反复测试，我确定了bug的具体现象。每次运行都打开调试器，还是找不到原因，但是bin文件夹报错，里面没有文件。问题执行正常，那么有没有可能是bin文件夹本身有问题，换个名字试试？真不错~~bug原因：bin文件的名字比较特殊，改成别的立马就好了bug思路：不要轻易使用系统通用的文件名。之前自己写过一次ccpack，js索引文件和node环境的索引文件冲突。所以叫index....命名要慎重。6：Token：存放在哪里比较好？bug现象：我们的token一直保存在cookie中，但是最近在学习web安全相关的知识，感觉这样不一定对。bug:csrf攻击的原因如下：你在a网站登录成功，b网站是钓鱼网站。当你点击b网站时，会向a网站发送一个请求，假装是你自己的请求。这时候浏览器会默认带你。发送的是网站a登录的cookie信息，而这个请求除了使用img标签进行get请求外，还使用form表单进行post请求，所以这个token不能放在cookie位置，并且不是httponly，放在本地存储更合理。每个请求都附加了header，随时准备更新，这样csrf时就无法获取到本地存储的值。Bug反馈：这个问题我和相关同学交流过，因为在cookie中，token是直接由后台操作的，但是因为这个问题，后台同学已经封装在统一的中间件里面了，如果修改，会涉及面很广，但是其他的方法可以起到补救的作用，比如验证referer信息的来源，白名单，二次验证等等。我在这个问题上得到的启示是很多核心逻辑不能草草制定，而且还可以做得更好。为什么不那样做？7:pm2:restartisnotresourcebug产生原因：服务端渲染的项目也很多。大多数前端工程师都是用node来做的。大多数线程保护也使用pm2。毕竟pm2简洁明了，自带'负载均衡'的bug现象：本地测试环境没有问题。上线当晚，我进行了如下操作sudo-scd/home/xxxx/xxxx///线上环境目录gitpullnpmrunbuildpm2restartall但是奇怪的是，启动成功时，2秒后，四ofserverserrors,（为什么有4台服务器，因为分配了四核）我重新构建了项目，再次pm2restartall还是无效，bug来了，应该已经启动了Excited，但是奈何正在启动项目每个人都很匆忙，所以你需要紧张。首先看onerror日志，因为是服务器环境，所以只能cat看，但是日志乱七八糟。看了一会儿，也找不到真正的原因。原因是build有很大问题？测试很好。当时我就陷入了重复build，重启的傻逼操作。静下心来问问这个问题是不是打包错误而是服务错误？问题不在我们的代码中而是在pm2中有冲突之类的，所以假设'restart重启'解决不了问题就好了，那我就直接pm2deleteid删除4台服务器，然后pm2start./server.js-i4restart真的可以bug分析：遇到事情从自己身上找原因是一种很好的品质，但是不能只局限于怀疑自己，也要考虑到可能有其他技术的问题。pm2只是一个系统，偶尔不是重启它监控的项目，而是自己重启。8：vue：$变量的使用Bug原因：公司3D技术组开发的一套组件，在接收实例时，name必须是'$a'而不是'a'。请教可视化组里同学了解到$和_开头的变量不会被vue监控，所以我们可以自己监控这个变量，比较灵活。使用$:定义data中的$txt变量，在{{$txt}}行之间报错如下：`Property"$txt"mustbeaccessedwith"$data.$txt"因为以"$"或"_"开头的属性在Vue实例中没有被代理，以防止与Vue内部发生冲突。必须使用"$data.$txt"来访问属性'$txt'，因为以"$"或"_"未在Vue实例中代理，以防止与Vue内部冲突。使用_:定义data中的_txt变量，在{{_txt}}行之间报错如下：`Keysstartingwith'_'arereserved`Keysstartingwith'_'arereserved用于学习“bug”：data(){return{$txt:{},}},created(){this.$txt={n:2};},mounted(){控制台。log(this.$txt)//{n:2}然而，span标签中的值不会改变}让我们监控一下created(){this.$txt={n:2};让n=2;Object.defineProperty(this.$txt,"n",{get(){returnn;},set(val){return(n=val);}});},mounted(){this.$txt.n=3;console.log(this.$txt.n);//3}这样就实现了：挂在数据上可以获取到数据，但是这个数据没有被vue监控到，所以有更多的玩法，这是一个很好的主意。解释因为我用'a'来连接值，vue的观察会和3d团队的观察发生冲突，所以报错'$a'当然不会冲突。反馈我已将此技术点的反馈反馈给3d团队。希望文档里说清楚，防止其他同学挠头。9:dom:ResizeObserver出现bug：我在使用可视化组开发的图标组件时发现了一个问题。当窗口大小改变时，图标会自动调整其布局宽度，但是...这个图标是100%满的父级，或者flex:1是满父级的，当它的父级改变时并不会触发winodw.onresize事件，变异不会调整自己的宽度。bug原因：只监听window的尺寸变化，忽略parent本身的尺寸变化Bug解决方法一：我在函数中加了一个cb可以改变parent的宽度，这样每次都知道parent变化，但是这个需要能够影响到parent的变化，将.bugs逐一添加到函数中。方案二：只有谷歌神奇的ResizeObserver好用。 