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插件的更多相关文章

  1. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  2. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  3. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  4. IDEA安装vue开发插件

    前言: 开发免不了要用到开发工具,什么sublime,webstorm,idea的,现在我就说下idea开发神器下安装vue插件进行vue项目的开发吧. idea下载地址:http://www.jet ...

  5. sublime中如何安装vue.js插件,并使代码高亮显示

    前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...

  6. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  7. IDEA安装vue.js插件后,new没有Vue component

    首先要安装vue相关的插件vue.js 但是很多人安装vue.js右键发现没有vue Componment,解决方法如下 Settings>Editor>File and Code Tem ...

  8. 360极速浏览器安装.crx扩展(postman)

    用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以 ...

  9. 在浏览器上安装 Vue Devtools工具

    Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...

随机推荐

  1. golang中逗号ok模式_转

    ,ok,第一个参数是一个值或者nil,第二个参数是true/false或者一个错误error.在一个需要赋值的if条件语句中,使用这种模式去检测第二个参数值会让代码显得优雅简洁.这种模式在go语言编码 ...

  2. Python 软件安装

    安装Python解释器 Python目前已支持所有主流操作系统,在Linux,Unix,Mac系统上自带Python环境,在Windows系统上需要安装一下,超简单 打开官网https://www.p ...

  3. linux中container_of

    linux 驱动程序中 container_of宏解析 众所周知,linux内核的主要开发语言是C,但是现在内核的框架使用了非常多的面向对象的思想,这就面临了一个用C语言来实现面向对象编程的问题,今天 ...

  4. docker里运行cron的要点笔记

    1.如果用精简的apline或debian:stretch-slim创建的docker,里面可能没有cron模块,需要独立安装 apt-get install -y cron 2.docker里面cr ...

  5. Unity经典案例之:Fire Balls

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  6. 有意义的单词分割——经典dfs题目

    680. 分割字符串 中文 English 给一个字符串,你可以选择在一个字符或两个相邻字符之后拆分字符串,使字符串由仅一个字符或两个字符组成,输出所有可能的结果 样例 样例1 输入: "1 ...

  7. 类型擦除对Java调用Kotlin的影响

    @JvmName: 扩展方法相关: 先来定义一个扩展方法: 好,接下来再来定义一个扩展函数: 此时报错了..看一下错误提示: 其中给的提示有点奇怪,第一个是很明显咱们的扩展函数木有接收参数嘛,为啥提示 ...

  8. python3学习之lambda+sort

    >>> pairs = [(1, 'one'), (2, 'two'), (3, 'three'), (4, 'four')] >>> pairs.sort(key ...

  9. hexo利用SAE提高网页打开速度

    起因 之前一直觉得网页加载速度其实也还行,就是有两个图标加载的非常慢,经常是网页都出来了,那两个图标还是个方框,要等好久才出来.终于,好好研究了一番,发现那个图标是fontawesome里的,然后字体 ...

  10. NOI2019游记 —— 夏花般绚烂,繁星般璀璨

    NOI 2019 游记 夏花般绚烂,繁星般璀璨 打算写成两个形式 Dairy Day -1 早早就到gzez集训了20几天,对整体的环境熟悉很多 在gzez看了场LNR Day 2 然后回到宾馆搞了个 ...