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
。