VUE配置vue-devtools调试工具及安装方法

1.通过Git在本地克隆项目

git clone https://github.com/vuejs/vue-devtools.git2. git进入vue-devtools所在的目录，然后运行以下两条指令。

首先运行npm安装以安装项目依赖项

运行npm运行构建来编译和生成

运行这两条指令需要一定的时间。请耐心等待。成功构建后，如下图所示：

3.修改安装目录vue-dev tools \ shell \ chrome中的manifest.json文件。将持久性参数更改为true，如下图所示：

4.将扩展添加到chrome浏览器中

A.打开浏览器扩展程序(也可以直接在地址栏输入chrome://extensions/打开)

B.打开扩展程序后，打开开发人员模式，单击按钮加载解压缩的扩展程序

C.选择vue-devtools shell目录下的Chrome文件夹，成功后出现下图：

加载成功后，先启用，然后点击旁边的刷新按钮，浏览器右上角会出现一个Vue logo图标

5.此调试工具的安装已完成。

注意事项：请在开发模式下使用vue调试工具，但不要在生产环境下使用。即在vue.min.js文件下，调试工具无效。

我们来看看vue调试工具vue-devtools的安装方法

先驱

Vue-devtools是一个基于chrome浏览器的插件，用于调试Vue应用。这个vue调试工件可以大大提高我们的调试效率。帮助我们快速调试和开发vue应用程序。

第一步：

我们可以从github找到vue-devtools项目并在本地下载。下载vue-devtools链接。

克隆方法：克隆https://github.com/vuejs/vue-devtools.git

第二步：

解压缩下载的文件，进入vue-devtools目录，安装项目所需的依赖包。

安装方式：npm安装或者cnpm安装(注意：cnpm命令是国产镜像，会更快)

第三步：

编译项目文件。

编译方法：npm运行构建

第四步：

修改安装目录vue-dev tools \ shell \ chrome中的manifest.json文件。如果持久参数更改为真，访问协议是否包括：

1.http://*/*;2.https://*/*;3 . file :///*；这三种情况

第五步：

添加到浏览器：

添加方法：在chrome浏览器中输入地址：“chrome://extensions/”进入扩展页面，然后点击“加载解压后的扩展.”按钮；选择vue-devtoolsshell目录下的Chrome文件夹；您还需要允许访问文件地址。如果没有看到“加载解压缩的扩展程序”按钮.首先检查“开发人员模式”。如下图：

第六步：

使用：

打开我们的vue应用程序，打开调试，点击vue扩展图标使用它。下图：

注意：如果点击vue扩展图标，仍然会提示：在此页面检测到VUE.jsis。打开开发工具，寻找VUE面板。可以检查是否使用的是vue.min.js的压缩版，如果默认使用VUE.min.js作为生产环境，需要改为vue.js。

结束。

摘要

以上是边肖介绍的VUE配置vue-devtools的调试工具和安装方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！