vue 调试程序的安装(谷歌浏览器chrome的vuejs devtools 插件的安装)

1.首先在GitHub上下载vue的调试程序插件 vue-devtools 

地址:在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools

2. npm install

下载完成后打开命令行cmd进入vue-devtools-master文件夹,

1. npm install,安装依赖包;

2. npm run build

3.npm run build 执行完,

会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

npm run build 执行完,会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

若不执行以上命令会报错,无法加载背景脚本"build/background.js",如下图:

3. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true

4. 扩展chrome插件

1.打开chrome浏览器,打开更多工具>扩展程序;

2.再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

5, 测试安装成功

在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

之后我们再打开我们的vue 项目  按f12  会发现控制台多了一个 vue 的选择

安装成功!!

原文地址:https://www.cnblogs.com/ylboke/p/8418355.html

时间: 2024-11-12 04:58:54

vue 调试程序的安装(谷歌浏览器chrome的vuejs devtools 插件的安装)的相关文章

vuejs devtools 插件安装

1.下载地址:https://chromecj.com/web-development/2019-09/2955/download.html 20200202174823chromecj.com.crx  后缀改为zip,解压到文件夹A 2.谷歌浏览器打开:chrome://extensions/ 添加扩展程序,选择文件夹A 原文地址:https://www.cnblogs.com/ligenyun/p/12253032.html

Maven的安装配置以及Eclipse中Maven插件的安装和配置

Maven是一个软件项目管理和综合工具,通过特有的POM(project object mode)概念来管理项目,功能十分强大. 一.安装Maven 1.下载地址:http://maven.apache.org/download.cgi 2.将下载的压缩包解压即可 二.Maven的配置 1.配置Maven环境变量 添加系统环境变量 MAVEN_HOME : C:\apache-maven-3.3.9 MAVEN :  %MAVEN_HOME%\bin MAVEN_OPTS :  -Xms256m

Axure谷歌浏览器Chrome扩展程序下载及安装方法

对于很多需要设计产品原型的朋友来说,Axure RP Pro可谓是非常方便.好用的一款软件,因为它不仅能绘制出详细的产品构思,也能生成浏览器格式的产品原型.但是如果想把原型拿给客户查看,千万记得给浏览器安装Axure扩展程序哦. Axure谷歌浏览器Chrome扩展程序使用说明:打开谷歌内核的浏览器,在浏览器中地址栏中输入chrome://extensions/  或者点击浏览器的右上角选择更多工具->扩展程序,将下载到本地的.crx文件拖入到扩展程序中,点击确定完成安装即可. 注意是拖入!!!

chrome插件vue-devtools-master安装教程

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展.做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码. 一.安装 github下载地址:https://github.com/vuejs/vue-devtools 二.执行安装 下载好后用phpstorm进入vue-devtools-master工程 执行: npm install 再执行: npm run build 三.修改manifest.json

centos7下载安装谷歌浏览器

centos7安装完成结束后,发现自带的火狐浏览器不太习惯,自己还是习惯谷歌浏览器,因为是新手嘛,所以自己就各种找教程看如何下载安装谷歌浏览器,一个一个按照教程试验,终于最后试验成功了一个,亲测可用. 首先,打开火狐浏览器,输入网址:http://chrome.richardlloyd.org.uk/install_chrome.sh 输入后,调转的过程中会跳出这样的界面: 选择打开方式gedit,点击确定开始下载install_chrome.sh文件,网速好的会直接下载完成弹出gedit编辑器

谷歌浏览器Chrome错误提示Flash过期怎么办(转)

在使用谷歌浏览器Chrome时,会碰到谷歌浏览器Chrome的错误提示:"Adobe Flash Player因过期而遭到阻止",点击"更新插件"是不行的,国内的网络根本就打不开,点击"运行一次"是可以的,但是每次都要点,这样就变得很麻烦.那么,当谷歌浏览器Chrome出现错误提示:"Adobe Flash Player因过期而遭到阻止"时该怎么办呢?请看: 工具/原料 谷歌浏览器Chrome Adobe Flash Play

下载谷歌浏览器(Chrome)扩展离线安装包crx文件最简单的方法

引言(可以不看): 下面介绍一下,下载谷歌浏览器(Google Chrome)扩展的离线安装包crx文件最简单的方法!真的是再简单不过了! 谷歌浏览器(Google Chrome)的扩展功能让谷歌浏览器变的无比强大,需要特殊功能的时候去Chrome Web Store找一下,基本都可以找到合适的扩展.但是随着Chrome浏览器使用的时间越来越长,积累下来的扩展也越来越多,备份这些扩展就成了一个新的问题. 比如出于由于某些众所周知的原因,在给MM(或朋友.爸妈等)装机的时候可能上不去扩展安装页面.

ubuntu14.04安装google chrome

安装好Ubuntu14.04之后安装google chrome浏览器 1.按下 Ctrl + Alt + t 键盘组合键,启动终端 2.在终端中,输入以下命令 (将下载源加入到系统的源列表.命令的反馈结果如图.如果返回"地址解析错误"等信息,可以百度搜索其他提供 Chrome 下载的源,用其地址替换掉命令中的地址.) sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/

谷歌浏览器 Chrome 遇到Flash崩溃的处理办法

安装谷歌浏览器之后经常遇到Flash崩溃或者浏览器在浏览Flash内容时卡死的情况.在网上查找资料大多都认为应该是浏览器自带的Flash插件工作模式引起的问题,解决方法如下: 首先在地址栏输入chrome://plugins/显示浏览器使用的插件. 点击右上角的详细信息,可以看到Flash插件为进程外插件. 点击停用,停用掉浏览器自带的Flash插件,然后打开http://get.adobe.com/cn/flashplayer 根据提示下载插件安装Chrom专门的控件即可. 经测试,再也没出现