Vue DevtoolsVue官网推出的浏览器插件,能够算是Vue开发调试神器,它能够让你可能在浏览器实时的编辑数据并立刻看到其反映进去的变动,让你辞别console大法。十分好用,谁用谁晓得,Vue开发必备,强烈推荐!

因为家喻户晓的起因,Google Chrome商店无奈失常拜访,所以本文提供另一种谷歌插件装置的形式。

1.下载Vue Devtools插件,请到GitHub仓库:https://github.com/Jackyyans/code123下载,门路:/normal/libs/Vue.js Devtools_5.3.3.crx

2.谷歌浏览器地址栏输出:chrome://extensions,点击左边的按钮,关上开发者模式

3.将Vue.js Devtools_5.3.3.crx拖动到谷歌浏览器,装置。

4.点击增加扩大程序,就能够看到多了个Vue Devtools的图标,装置胜利。


5.关上Vue的我的项目,能够看到图标变亮,多了个vue面板,显示了以后页面用到的vue组件,点击组件,左边会展现以后组件的datacomputed等数据,能够间接更改或删除数据进行调试。另外,也能够比拟直观的看到VuexVue Router等信息。

6.React也有相似的浏览器插件React Developer Tools,装置办法跟Vue Devtools一样的,请到GitHub仓库:https://github.com/Jackyyans/code123下载,门路:/normal/libs/React Developer Tools_4.7.0.crx