在使用第三方库时,升级了版本出现了Bug该怎么办

该文章只是一次简单的排查记录,当我们使用某些第三方库的时候经常会出现一些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

Datetime为啥不能以DatetimePlugin的形式引入 component/datetime yet another bad issue #2226 by wangqihang was closed 23 days ago

查看发现的确存在该问题,并且没有相应的解决方案,并且issues#2226被作者closed了,那么就尝试自己着手排查这个问题,常规的排查方式无非是从代码着手

  1. 审查元素
  2. 断点

但是由于我事先知道这个问题是出自于版本升级,所以我选择了一种比较快速且能找到根本问题的排查方式。

开始排查

版本引起的问题最好的排查方式就是先确定是哪个版本会出现该问题,这时候我采用了二分法的方式,通过安装指定版本的方式先确定问题究竟出现在哪一次更新上。

  • 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也能看出来。

尝试修复
  1. 更新到最新的版本
  2. 找到src/plugins/datetime/index.js
  3. 加入require('../../components/datetime/style.less')
  4. 运行

结果显然是可以的

这只是一个简单的实践,如何快速地定位一个问题(大概只用了5分钟的时间),或许这个问题还算是一个比较简单的问题,但使用一种正确的方式定位问题明显能够更有效地解决问题。

遗留问题

那么这次commits究竟修复了什么问题? 可以查看 Issus #2152

很明显这个只是一个样式覆盖的问题...那么这个样式具体应该被加在哪里比较合适呢,这个问题一时半会也不知道如何解决比较妥当。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值