通过实例解析chrome如何在mac环境中安装vue-devtools插件

1之前在windows上装过，最近刚换了个mac本，重新安装下，也是为了记录下我安装的过程。

github下载vue-devtool到本地

下载地址https://github.com/vuejs/vue-devtools#vue-devtools

注意，下载的时候默认的是在dev分支，要切换到master,然后克隆到本地（可以先放桌面）

2.将下载的项目文件放入 Chrome浏览器的插件文件夹

在浏览器地址栏输入chrome://version/

找到路径之后，可以在顶部工具栏”前往“中直接输入文件地址

3.在default文件夹下新建Extensions文件夹(已经存在就不用新建了)，并且将下载的vue-devtool-master文件夹复制进去，cd进入该文件夹cd vue-devtools-master

4. 安装依赖

npm install

npm run build（没有这一步会报错哦～）

5.在地址栏输入chrome://extensions,打开右侧开发者模式

将vue-devtools-master/shells/chrome文件夹拖入扩展程序页面即可

如果以上步骤完成之后，在控制台还是不显示Vue的tab，以上vue图标不亮，点击图标出现vue.js not detected的提示还需要进行以下步骤

找到安装目录

修改mainifest.json文件中的persistent：false，修改成persistent：true。一般这个时候就可以正常使用了

如果还是不行，修改webpack.config.js的代码

修改成development，（可能正式版本发布的时候，需要修改回来，待验证）

再运行vue项目 就可以正常调试了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue DevTools调试工具的使用

    Vue DevTools调试工具的使用

    因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了. 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 修正Vue DevTools

  • Vue调试神器vue-devtools安装方法

    Vue调试神器vue-devtools安装方法

    什么是vue-devtools? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装方式 1.chrome商店直接安装: vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了.不过要注意的一点就是,需要翻墙才能下载. 2.手动安装: 第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools g

  • vue-devtools的安装步骤

    vue-devtools 是一款基于chrome游览器的插件,用于调试vue应用,由于国内不能访问谷歌商店(要科学上网),所以安装比较麻烦,写个文章记录一下. 第一步 将vue-devtools clone到本地 git clone https://github.com/vuejs/vue-devtools.git 第二步 在vue-devtools目录下安装依赖包 cd vue-devtools npm install 第三步 编译代码 npm run build 第四步 修改 vue-dev

  • VUE 配置vue-devtools调试工具及安装方法

    1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令. 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图: 3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件.

  • 分享vue.js devtools遇到一系列问题

    分享vue.js devtools遇到一系列问题

    使用vue.js devtools遇到的磕磕绊绊,具体如下 1.首先我们需要在谷歌浏览器扩展程序中点击获取更多 2.在搜索框输入vue.js devtools,点击安装此扩展 3.检查扩展是否开启 我们需要检测我的扩展是否开启,允许文件地址是否访问,如果没有勾选文件地址我们就必须在服务器上访问. 4.修改插件配置文件 复制代码 代码如下: C:\Users\zhanglei\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdo

  • vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把"persistent":false改成true

  • vue-devtools的安装和使用步骤详解

    1.下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 2.解压此文件夹 3.用命令提示符或编译器进入此文件夹 4.在文件夹下依次运行(可以在命令提示符窗口也可在编译器中): I.npm install安装所需要的依赖 II.npm run build构建(如果未执行此步,shells->chrome文件夹下会缺少build文件夹) 5.在shells->chrome->manifest.json文件中修改 background

  • vue开发调试神器vue-devtools使用详解

    vue开发调试神器vue-devtools使用详解

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插件 GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址:http://npm.taobao.org/ 命令行安装npm淘宝镜像: $ npm install -g cnpm --registry=https://

  • 通过实例解析chrome如何在mac环境中安装vue-devtools插件

    1之前在windows上装过,最近刚换了个mac本,重新安装下,也是为了记录下我安装的过程. github下载vue-devtool到本地 下载地址https://github.com/vuejs/vue-devtools#vue-devtools 注意,下载的时候默认的是在dev分支,要切换到master,然后克隆到本地(可以先放桌面) 2.将下载的项目文件放入 Chrome浏览器的插件文件夹 在浏览器地址栏输入chrome://version/ 找到路径之后,可以在顶部工具栏"前往"

  • 如何在mac环境中用python处理protobuf

    这篇文章主要介绍了如何在mac环境中用python处理protobuf,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 安装 brew install protobuf 然后再安装protobuf需要的依赖 brew install autoconf automake libtool 验证是否安装成功 protoc –version protobuf3语法介绍 1.字段前取消了required和optional两个关键字,目前可用的只有repea

  • 如何在JS文件中获取Vue组件

    1. 背景 最近在写项目时候遇到这样一个需求: 我封装了一个js文件 utils.js,然后在组件 my-component.vue 中引用了该js文件. 在 utils.js 文件中有一些函数,需要操作 my-component.vue 中的 data 和 methods. 为了方便理解,上述 js 文件和组件名非实际工程中的名字,仅是示例. 2. 思路 通过调用函数把 组件实例 this 传递到 被应用的 js 文件 里. 3. 目录结构 src/ ├── App.vue ├── asset

  • 在CentOS 6.5环境中安装VPN 的步骤详解

    在CentOS 6.5环境中安装VPN 的步骤详解

    想通过VPN上网,因为各种免费或收费的VPN工具不是不稳定就是怕不靠谱,所以打算自己搭一个玩玩.以下是搭建的大致过程: 因为只是做个实验环境,所以申请了一个腾讯云的15天免费服务器,以下是相关信息: 系统:CentOS 6.5 64位 公网IP:139.155.96.23 内网IP:172.27.0.12 系统资源:1 核 1 GB 1 Mbps 在网上找了很多教程,但搭完后上不了网,有点奇怪,后来找到一个简单版的教程才晓得是防火墙配置有问题.以下是按照这个简单版本的方式搭建的. 原文参考地址:

  • 如何在sublime编辑器中安装python

    了解如何在sublime编辑器中安装python软件包,以实现自动完成等功能,并在sublime编辑器本身中运行build. 安装Sublime软件包控制 首先下载用于sublime编辑器的程序包控件. 转到URL:https://packagecontrol.io/installation#st3 崇高包装控制 现在记下Sublime Editor中安装软件包的文件夹的位置.您可以通过单击首选项>浏览包来找到位置. 浏览套餐 单击" Package Control.sublime-pac

  • Laravel 如何在blade文件中使用Vue组件的示例代码

    Laravel 如何在blade文件中使用Vue组件,具体代码详情请看下文: 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan ui react 系统还提供了非常便捷的auth脚手架,带登录注册. php artisan ui react --auth 3.组件位置 Vue组件ExampleComponent.vue将被放置在resources/js/components目录中.ExampleCompo

  • python3在各种服务器环境中安装配置过程

    1.在服务器环境中安装 centos yum install python3X[X代表版本号] ubuntu apt-get install python3.X[X代码小版本号] 源码包编译安装 步骤1.首先,通过apt在终端中运行以下以下命令,确保所有系统软件包都是最新的. sudo apt update sudo apt upgrade sudo apt install software-properties-common 步骤2.在Ubuntu 20.04上安装Python 3.9. 从源

  • 如何在PHP环境中使用ProtoBuf数据格式

    前言   RPC是google公司主导的一款RPC框架,并使用protobuf作为数据传输格式,伴随gRPC框架的成熟及使用人群的增加,对于底层使用的数据格式protobuf也被越来越受到重视,而对于PHP生态而言,相关ProtoBuf介绍文档及使用资料比较少,故此写简文希望能帮助到一些有需要的同学.   ProtoBuf (Google Protocol Buffer)是由google公司用于数据交换的序列结构化数据格式,具有跨平台.跨语言.可扩展特性,类型于常用的XML及JSON,但具有更小

  • 如何在mac的terminal安装Apache Tomcat

    如何在mac的terminal安装Apache Tomcat

    首先是下载Apache Tomcat 网址是http://tomcat.apache.org/download-70.cgi 下载好之后解压到你常用的目录下面,这里我放到了desktop 通过输入以下命令行进入apache文件的bin包 cd /Users/akilyu/Desktop/apache-tomcat-7.0.78/bin1 然后输入. /startup.sh 来启动tomcat ./startup.sh1 此时如果出现Permission denied,表明当前的权限不能作出此命令

  • 在Xen虚拟机全虚拟化环境中安装Windows2003系统

    Xen虚拟机支持两种客户机的安装方式.一种是半虚拟化,一种是全虚拟化.Win2003系统要求在全虚拟化的环境下安装和运行. 硬件环境:DELL R710 CPU须支持虚拟化技术(可cat /proc/cpuinfo |grep vmx查看), BIOS开启VT全虚拟化功能.. 系统环境:物理机centos5.6 x86_64 ,xen.需安装的虚拟机windows2003 一.物理机准备环境: 1.  xen安装 yum install xen kernel-xen 2.  编辑grub,使用x

随机推荐