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 。
360极速浏览器安装vue-devtools插件的更多相关文章
- Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...
- 【vue】chrome已安装Vue Devtools在控制台却无显示
chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...
- Chrome Vue Devtools插件安装和使用
安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...
- IDEA安装vue开发插件
前言: 开发免不了要用到开发工具,什么sublime,webstorm,idea的,现在我就说下idea开发神器下安装vue插件进行vue项目的开发吧. idea下载地址:http://www.jet ...
- sublime中如何安装vue.js插件,并使代码高亮显示
前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...
- 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序
第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...
- IDEA安装vue.js插件后,new没有Vue component
首先要安装vue相关的插件vue.js 但是很多人安装vue.js右键发现没有vue Componment,解决方法如下 Settings>Editor>File and Code Tem ...
- 360极速浏览器安装.crx扩展(postman)
用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以 ...
- 在浏览器上安装 Vue Devtools工具
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...
随机推荐
- logstash multiple piplines 配置方式
当logstash有很多个input类型需要处理时.为了更方便的管理,我们需要使用一个.conf(input->filter->output)配置文件来对应一个pipeline. pipl ...
- linux查看磁盘分区
df 查看磁盘分区使用状况 用法:df [选项]... [文件]... Show information about the file system on which each FILE resid ...
- 对 Jenkins+ANT+Jmeter 接口测试的实践
转载地址:https://testerhome.com/topics/5262 1.前言 最近感觉大家都在讲Jenkins+jmeter+ant或maven的使用,但没有说到具体怎么投入到项目使用,只 ...
- Python应用之-修改通讯录
#-*- coding:utf-8 -*- import sqlite3 #打开本地数据库用于存储用户信息 conn = sqlite3.connect('mysql_person.db') #在该数 ...
- [Algorithm] BFS vs DFS
//If you know a solution is not far from the root of the tree: BFS, because it is faster to get clos ...
- Highcharts error #16: www.highcharts.com/errors/16 js 单例
一.问题项目某一个页面用的highcharts用来显示一张图表,第一次刷新正常,第二次就出来这个错.1二.解决问题过程在网上找了很多同样是这个错误的解决方案. 第一:加载了highstock.js然后 ...
- 洛谷 P3388 【模板】割点(割顶)题解
今天学了割点,就A了这道板子,比较难理解的地方就在于如果是根节点就要找两个点来满足low[y]>=dfn[x],如果不是就只需找一个点来满足.Tarjan(i,i)中第一个i是开始搜索的点而第 ...
- OKR如何解决策略执行问题
卡普兰和诺顿在2005年发现,十分之九的组织未能执行其战略. 唐纳德·萨尔(Donald Sull)在2015年的研究中发现,有45%的中层管理人员甚至无法说出其组织的重中之重.这些中层经理基本上负责 ...
- 产品生命周期(Product Life Circle,PLC)
什么是产品生命周期? 产品生命周期是新产品从开发进入市场到被市场淘汰的整个过程.产品生命周期可分为初创期.成长期.成熟期.衰退期. 产品生命周期有什么用? 在产品不同的生命阶段,公司的业务目的都不同. ...
- javascript中的indexOf与if判断的装逼写法
常规indexOf与if判断写法: if("112233".indexOf("22")>-1) { console.log("很二") ...