安装 Vue-devtools拓展程序

Chrome安装 Vue-devtools拓展程序

• 一、Vue-devtools简介
• 二、安装
• • 1、打开终端下载仓库代码
  • 2、下载依赖node_modules
  • 3、编译打包
  • 4、修改`manifest.json`文件
  • 5、在Chrome浏览器中加载已解压的扩展程序
• 三、安装遇到的坑
• • build 问题
• 四、换种方式下载
• • 1、安装命令
  • 2、修改`manifest.json`文件
  • 3、加载扩展程序

一、Vue-devtools简介

vue-devtools是一款用于vue应用的调试的基于chrome浏览器的插件，可极大地提高我们的调试效率。可帮助我们快速的调试开发vue应用。

二、安装

1、打开终端下载仓库代码

git clone https://github.com/vuejs/devtools.git
           

2、下载依赖node_modules

npm install
           

3、编译打包

npm run build
           

4、修改

manifest.json

文件

5、在Chrome浏览器中加载已解压的扩展程序

需要选择的插件目录是

vue-devtools\shells\chrome

三、安装遇到的坑

build 问题

在上边第三步时有时会遇到

build

不成功的情况

四、换种方式下载

1、安装命令

首先创建一个空文件夹，然后在此文件夹下去执行

npm install vue-devtools
           

如上图，即完成安装 vue-devtools。

2、修改

manifest.json

文件

安装完成后，进入该文件下的

node_modules

文件，找到

vue-devtools

文件，将

vender

文件下的

manifest.json

，修改

persistent

为 true。

3、加载扩展程序

将

vender

文件拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序即可使用。