Vue Devtools
是Vue
官网推出的浏览器插件,能够算是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
组件,点击组件,左边会展现以后组件的data
、computed
等数据,能够间接更改或删除数据进行调试。另外,也能够比拟直观的看到Vuex
、Vue Router
等信息。
6.React
也有相似的浏览器插件React Developer Tools
,装置办法跟Vue Devtools
一样的,请到GitHub
仓库:https://github.com/Jackyyans/code123
下载,门路:/normal/libs/React Developer Tools_4.7.0.crx
。