Vue Devtools 插件下载、安装和应用

文章目录

• Vue Devtools 插件
• • github 标准安装
  • • 下载
    • 安装
  • .crx 快捷安装
  • 应用

Vue Devtools 插件

Vue Devtools 是 Vue 官方发布的浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中。主要用于调试 Vue 项目。

正常下载安装操作如下，但应对不同的 node，vue，chrome 版本，会出现各种各样的问题。为了简单起见，直接找 .crx 格式插件安装文件。如果不想处理各种莫名其妙的问题，请直接查看 .crx 快捷安装这一节。

github 标准安装

以 5.1.1 版本为例，说明通过 github 安装插件步骤。实际版本安装过程中会遇到各种问题，有兴趣的可以操作研究一下。

下载

Github下载地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1

安装

1. 解压缩
   解压下载的文件，在这里解压到【D:\个人相关\CSDN\Vue\Vue Devtools\devtools-5.1.1】下。

2. 安装依赖
   在命令行中切换到解压好的 vue-devtools-5.1.1 目录，使用 npm install 命令进行依赖安装。

   

3. 打包
   完后执行 npm run build，编译打包成功后会在项目路径的 shells 文件夹下生成 chrome 文件夹。此文件夹就是用来放入 chrome 的扩展程序。

   

4. 扩展 Chrome 插件
   打开 Chrome 浏览器–>选择更多工具–>扩展程序–>打开开发者模式，点击“加载已解压的扩展程序”，选择 devtools-5.1.1 > shells > chrome 放入。如果看不到“加载已解压的扩展程序…”按钮，先勾选“开发者模式”。

   

.crx 快捷安装

去网上找 6.5.1.crx 插件包（最新版的 6.6.1 有问题），直接添加到扩展 Chrome 插件中就行，插件设置全部打开，设置之后重启浏览器。访问通过 vue 编写的页面右上角 Vue 插件图标高亮，f12 打开开发者工具在 vue 栏可以调式 vue 页面。

应用