该文章只是一次简单的排查记录,当我们使用某些第三方库的时候经常会出现一些bug,对于这些bug一般都会先去定位问题然后慢慢排查,但是对于某些特殊情况,使用合适的方法能够加快定位问题的速度。
起因
最近在开发一个 Vue + Cordova
的app,使用到了Vux这个移动端的UI库,起初使用的版本为V2.6.5,开发过程中一切正常,然后今天用到了它的 Datetime
这个组件,用着也很正常,但是这时候我心血来潮,更新了一个Vux的版本,结果, Datetime
组件失效了( Plugins
的方式引入),没有明确的错误信息。
先查看issues
dateTime通过插件形式引入,报Cannot read property 'classList' of undefined #2249 opened 17 days ago by need93
查看发现的确存在该问题,并且没有相应的解决方案,并且issues#2226
被作者closed了,那么就尝试自己着手排查这个问题,常规的排查方式无非是从代码着手
- 审查元素
- 断点
但是由于我事先知道这个问题是出自于版本升级,所以我选择了一种比较快速且能找到根本问题的排查方式。
开始排查
版本引起的问题最好的排查方式就是先确定是哪个版本会出现该问题,这时候我采用了二分法的方式,通过安装指定版本的方式先确定问题究竟出现在哪一次更新上。
- V2.70 -
success
- V2.72 -
failed
- V2.71 -
failed
很快找到了该问题版本,V2.70升至V2.71引起的问题
查看Commits
V2.70到V2.71提交的Commits并不多,有8次commits,仅仅从标题出发 keywords: Datetime or Plugin
就定位到了一条 [fix] fix less variables do not work in plugin usage (#2152)
来看一下这一条修改了什么
src/components/datetime/metas.yml
+ next:
+ en:
+ - '[fix] fix less variables do not work in plugin usage #2152'
+ zh-CN:
+ - '[fix] 修复插件使用时 less 变量不生效问题 #2152'
src/plugins/datetime/index.js
+ /* just for importing style and avoid less-loader issue */
- require('../../components/datetime/style.less')
+ import DatetimeComponent from '../../components/datetime/index.vue' // eslint-disable-line
复制代码
居然是删除了datetime的样式!而且这个DatetimeComponent在此处仅仅申明了并没有使用,从eslint的disable也能看出来。
尝试修复
- 更新到最新的版本
- 找到src/plugins/datetime/index.js
- 加入require('../../components/datetime/style.less')
- 运行
结果显然是可以的
这只是一个简单的实践,如何快速地定位一个问题(大概只用了5分钟的时间),或许这个问题还算是一个比较简单的问题,但使用一种正确的方式定位问题明显能够更有效地解决问题。
遗留问题
那么这次commits究竟修复了什么问题? 可以查看 Issus #2152
很明显这个只是一个样式覆盖的问题...那么这个样式具体应该被加在哪里比较合适呢,这个问题一时半会也不知道如何解决比较妥当。