Chrome console debug vue component 控制台调试VUE 组件

window 中增加Vue实例的接收者

 

step1. main.js 中增加

/* eslint-disable no-new */

window.Vue = new Vue({

el: '#app',

router,

store,

i18n,

components: { App },

template: '<App/>'

})

 

 

给window 提供一个可操作vue 的对象

 

step2: VUE 中的componet 对象，在vue 中以$children存在

 

$children是一个数组

 

{

 $( 'a ')  相当于   document.getElementById( 'a ')

这是用了某些组件后那些组件支持的符号，比如DWR

$其实是一个函数名，就是用来获取部件里面的值  $()=   document.getElementById()

}

 

能过一级 级的从children 取到对应的组件。操作组件的相关内容

 

操作实例

 

window.Vue.$children[0].$children[0].businessLogo

"http://mi-bucket-******-shanghai.aliyuncs.com/mi_logo.png"