Vue- vue devtools安装

使用Vue开发过程当中，需Chrome浏览器的调试插件Vue devtools

一、下载

https://github.com/vuejs/vue-devtools

选择下载安装整个ZIP压缩包

 

 

 

2.而后进行解压缩，并在解压后的文件夹里面打开命令提示符，

 

 

 

3.而后在相同的路径里面输入：npm install
再输入：npm run build

注意：npm install的时候会报错： npm ERR! Unexpected end of JSON input while parsing near '...a1a6ec9096c30d3954dd5'

 

 

 

解决方法：npm cache clean --force

 

 

 

 

 

 

 

 

4.在编译好的文件夹找到manifest.json这个文件，通常所在的路径是：
本身安装的路径\vue-devtools-dev\shells\chrome\manifest.json
而后打开这个manifest.json, 将persistent的值改成true

 

 

5.打开chrome浏览器的扩展程序，（chrome://extensions/）

打开开发者模式，并将整个chrome文件夹拖入空白处，便可加载出vue devtools插件

 

 

六、验证

 

 2、火狐安装

 

安装web-ext

npm install --global web-ext 

而后编译运行firefox浏览器

npm run build
npm run run:firefox 

上述指令会打开firefox浏览器，你即可在打开的窗口运行调试vue应用了。

 

3、若是你但愿在全部浏览器中使用vue-devtools，那能够按以下步骤安装

1. 安装工具

// 全局安装，也可本地安装 npm install -g @vue/devtools 

2. 运行

vue-devtools // 适用于全局安装

该指令会打开一个窗口，以下所示

 

3. 若是你想在电脑浏览器调试，则在vue应用的最顶部加上

<script src="http://localhost:8098"></script> 

4. 若是你想在移动端浏览器调试，则在vue应用的最顶部加上

<script> window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098 </script> <script src="http://<your-local-ip>:8098"></script>