乐趣区

关于前端:怎么安装Vue-Devtools调试工具插件

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

退出移动版