Element Ui非编译替换方式修改源码进行调试

之前在排查项目问题时, 需要调试源码来定位问题. 参考网上的资料更多的是编译Element Ui源码, 生成lib替换node_modules中的文件夹. 该方法调试问题时不是很便利.

因此尝试省略编译替换, 直接更改源码进行调试.

需要注意: 此方式适用于调试源码, 更改后记得还原源代码. 以免影响后续开发.

如需保留个人更改仍需要编译源码进行替换, 可自行百度搜索: element ui 修改源码

本文代码示例由Vue Cli创建Vue2项目来进行演示, Vue3暂未验证其可行性.

单一组件调试

• 本文以Input组件为例

引入

main.js代码如下, 直接引入lib目录下的input.js

import Vue from 'vue';
import Input from '/node_modules/element-ui/lib/input.js';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(Input);

new Vue({
  el: '#app',
  render: h => h(App)
});

调试源码

找到对应/node_modules/element-ui/lib/input.js文件, 修改870行handleInput方法

handleInput: function handleInput(event) {
      // 添加一个Log
      console.log(event)
      // should not emit input during composition
      // see: https://github.com/ElemeFE/element/issues/10516
      if (this.isComposing) return;

      // hack for https://github.com/ElemeFE/element/issues/8548
      // should remove the following line when we don't support IE
      if (event.target.value === this.nativeInputValue) return;

      this.$emit('input', event.target.value);

      // ensure native input value is controlled
      // see: https://github.com/ElemeFE/element/issues/12850
      this.$nextTick(this.setNativeInputValue);
    }

保存后在页面中使用Input组件查看打印的日志. 如未打印log, 尝试停止运行项目重新npm run serve

全局组件调试

和单一组件调试大同小异, 文件换成了lib下的index.js

main.js源码

import Vue from 'vue';
import ElementUI from '/node_modules/element-ui/lib/index.js';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

因为index.js是编译压缩后的代码, 可读性较差. 调试前需先格式化代码.

格式化后搜索handleInput可找到2345行

handleInput: function (e) {
	 console.log('打印日志', e);
	 this.isComposing || e.target.value !== this.nativeInputValue && (this.$emit("input", e.target.value), this.$nextTick(this.setNativeInputValue))
}

保存修改即可生效