360极速浏览器安装vue-devtools插件

360极速浏览器安装vue-devtools插件

360极速浏览器扩展程序中心并没有提供vue-devtools插件，因此需要自己安装。本文介绍方法适用于所有Chrome内核浏览器。

本人已将编译后的Chrome插件包上传网盘，需要的可以直接下载使用：Vue-devtools 。

一.创建vue-devtools插件工程项目，编译生成插件安装包——如果你想自己创建工程、编译项目，那么从这里开始：

1.下载插件：

将vue-devtools的github项目拷贝到本地，用不惯git，也没安装软件，因此直接下载到本地：

2.解压代码包：

3.安装项目需要的npm包：

Ctrl+R打开运行窗口，输入cmd，调起命令行窗口，切换到解压后的vue-devtools代码包目录，安装需要的npm包：

npm install

4.编译项目文件：

npm run build

如果你想自己创建工程、编译项目，那么从这里开始：

二.将插件包添加到浏览器——如果你已经有了插件包，那么直接从这里开始：

浏览器中输入“chrome://extensions”，进入程序扩展界面，点击选中右侧的”开发者模式“选项；

在其下边弹出的界面中点击”加载已解压的扩展程序..."按钮：

在弹出的弹窗中选择插件解压的目录，选择chrome目录，如下图所示：

点击确定，能看到右上角扩展程序这里已经多了一个vue-devtools扩展程序图标了：

6.测试插件：

本地编译运行vue项目，能看到浏览器调试器这里已经有vue-devtools的相关模块了：

后记：

本方法是Chrome内核浏览器通用，所以谷歌浏览器也可以直接使用。可以将打包后端chrome目录单独提取出来保存到U盘或者网盘，以后就可以直接使用而无需再创建工程编译了。

本人已将编译后的Chrome插件包上传网盘，需要的可以直接下载使用：Vue-devtools 。

个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt