最新：解决 Vue 调试工具 dev-tools安装遇到的问题及安装步骤

1、什么是 dev-tools ？

答： dev-tools 是 Vue 的调试工具；

在成功安装 dev-tools 后：

其一、可在前端页面中可显示当前点击组件的可用数据；

其二、可以修改和添加数据等信息，且修改和添加信息可实时反映在界面中，非常方便调试一些比较繁琐的业务流程；

其三、可以任意展示其中的一步操作的界面数据等信息；

2、dev-tools 的安装步骤：

A、打开 Vue 的 官网：

官网地址为：‘https://cn.vuejs.org/’； (然后选择 Devtools 工具)；

B、在 Devtools 工具的 GitHub 中选择相关文档：

点击 ‘开始’ 按钮；

根据想要的不同的版本及安装在不同的地方来设置；

C、以我自己安装的 Google 的插件为例：

其一、首先是获取插件信息并安装该插件：(点击该按钮)

获得的 ‘devtools’ 插件并安装如下：

其二、打开并设置 ‘devtools’ 插件的信息：

选择 ‘More tools’(更多工具)、再选择 ‘Extensions’(扩展程序)；

点击 ‘Extensions’(扩展程序) 后的结果如下所示：

其三、对 ‘devtools’ 插件进行设置：

点击 ‘详情’ ：

点击详情后将信息设置成如下所示：

其四、将 Vue 写的 ‘.html’ 在 (浏览器或客户端) 页面显示的信息为：

若此时在右上角有 Vue 的标志，就说明插件安装成功，点击 Vue 后能成功的运型 Vue 的文档信息；

3、安装过程中我所遇到的问题：

A、虽然步骤都完成后，但在 Vue 写的 ‘.html’ 在 (浏览器或客户端) 页面中并不能找到 Vue 的标识；

显示结果，如下所示：

B、检查出来的问题为：(如下的信息设置有问题，没有设置完全)；

因此一定要设置完全，或者按照官方的文档来设置完全；

C、在成功设置相关信息的情况下的显示结果为：(即成功将 Vue 在右上角显示出来了：)

4、其他的信息：

A、若安装步骤还是看不懂或有问题，建议参考官方文档信息：

官方相关文档地址为：‘https://devtools.vuejs.org/guide/installation.html’；

B、若想下载 Google 浏览器，而没有找到合适资源的可以下载一下我传的资源信息；
Google 浏览器 Win版 和 Mac 版的都有，连接如下：

Win 版本：‘https://download.csdn.net/download/weixin_43405300/16800670’;

Mac 版本：‘https://download.csdn.net/download/weixin_43405300/16800713’;

5、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！