怎么安装Vue Devtools调试工具插件？

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。