Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

目录
  • 一、vue.js插件下载
  • 二、Vue开发工具vuejs-devtools下载
  • 三、Vue开发工具vuejs-devtools安装+使用
  • 四、常见问题解决

这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题

vue-devtools是什么？

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

一、vue.js插件下载

  • 下载地址：vue.js插件下载；
  • 点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发中遇到的bug不是很方便。

二、Vue开发工具vuejs-devtools下载

官网下载：Vue开发工具vuejs-devtools下载；

我们下载：vue.js devtools插件下载

官网下载是跳转到github中下载，建议下载master分支中的版本，这个是最终获得认可的版本，开发分支dev中虽然是最新版本但是不是最终版本。此处默认已经选择了开发分支直接下载即可），并且官网下载后你需要通过npm安装一些依赖后才能导入谷歌浏览器中使用（后续会出教程，建议直接使用我准备好的，毕竟亲测可用）。

可以参考下我已经安装好的依赖包，您可以直接下载后解压导入到谷歌浏览器中使用。

三、Vue开发工具vuejs-devtools安装+使用

将好男人提供的vuejs-devtools解压后导入谷歌浏览器即可使用。如果是自己下载的前提需要配置manifest.json文件。右击打开manifest.json文件(记事本格式或者其他能打开的软件都行)找到persistent 将状态改成true(默认false）—好男人已经修改过了，你可以直接使用

根据下图打开谷歌浏览器中的【拓展程序】：

勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。导入后即可看到一件导入的vuejs-devtools插件。

用谷歌打开文件进入调试模式（按F12即可进入），即可在调试控制台看到vue页签。如下图：

四、常见问题解决

安装好插件后，打开文件并打开调试模式后没有vue页签，这可很常见，解决方法如下：

方法一：最常见的是我们引入vue插件时引入了生产版本（vue.main.js）也就是压缩后的版本，这个默认是关闭，需要在你的js文件中的创建vue前面写入：Vue.config.devtools = true;即可（不是在vue.main.js写这句话）。

方法二：导入Vue插件是我们选择开发版本的插件（vue.js）这样就不存在上诉的问题了。

其他方法01：这些方法都是网上流传的，不过有人说有用，有人说没用，这个看大家了，我觉得按方法一与方法二即可解决大部分问题。在扩展程序中点击这个拓展程序的详细信息，开启允许访问文件网址和在无痕模式下启用两项后就可以了。

其他方法02：进入调试模式时按F5+F12（两个同时按即可），这个我解决有点扯淡了，但是有人反馈成功过。也就写一下吧

到此这篇关于Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决的文章就介绍到这了,更多相关vuejs-devtools安装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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-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

  • Vue3 vue-devtools 调试工具下载安装使用教程

    Vue3 vue-devtools 调试工具下载安装使用教程

    官网下载地址:GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 完成后解压到目录,解压后目录如下: 终端命令行进入到解压后的Vue-Devtools目录: 执行命令下载yarn: npm install -g yarn 安装好yarn后,通过yarn来安装相关依赖: yarn install 依赖安装完成后,开始打包build.需要注意,这里的命令需要带watch,如

  • 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调试工具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的安装与使用教程

    一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三.用你的npm中进入该文件夹下 四.依次输: 1:npm install 2:npm run build         (这一步一定不要忘了,没有执行这一步的话,项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图) 五:修改shells>chrome文件夹下的mainifest.json 中的persistant为tr

  • Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    目录 一.vue.js插件下载 二.Vue开发工具vuejs-devtools下载 三.Vue开发工具vuejs-devtools安装+使用 四.常见问题解决 这绝对是最详细的Vue开发工具vuejs-devtools安装教程,相信你只需要5分钟即可解决所有问题 vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率. 一.vue.js插件下载 下载地址:vue.js插件下载: 点击进入Vue官网即可下载,

  • 微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

  • SpringBoot可视化接口开发工具magic-api的简单使用教程

    SpringBoot可视化接口开发工具magic-api的简单使用教程

    目录 magic-api简介 使用 在SpringBoot中使用 增删改查 参数验证 结果转换 使用事务 集成Swagger 总结 参考资料 magic-api简介 magic-api是一个基于Java的接口快速开发框架,编写接口将通过magic-api提供的UI界面完成,自动映射为HTTP接口,无需定义Controller.Service.Dao.Mapper.XML.VO等Java对象. 使用 下面我们来波实战,熟悉下使用magic-api来开发API接口. 在SpringBoot中使用 m

  • python3.8.3安装教程及环境配置的详细教程(64-bit)

    1.下载python安装包,进入python官网(python.org) 2.安装python,可根据需求选择默认安装或自定义安装,如下 3.选择要安装的软件工具类,例如pip 4.下一步,选择安装位置路径,点击安装 5.等待安装 6.完成安装 7.检查安装环境变量,我的电脑右键->属性,高级系统设置->环境变量 8.添加系统变量Python_HOME 9.系统变量path添加Python_HOME变量,点击确认保存. 10.命令行运行,输入python -V,打印出对应版本号,则说明安装成功

  • vue实例成员 插值表达式 过滤器基础教程示例详解

    vue实例成员 插值表达式 过滤器基础教程示例详解

    目录 一. 什么是Vue 二.为什么学Vue 三.如何使用Vue 下载安装? 插值表达式 四.vue特点 1.虚拟DOM 2.数据的双向绑定 3.单页面应用 4.数据驱动 五.Vue实例 六.实例成员 - 挂载点 | el - 自定义插值表达式括号| delimiters - 数据 | data - 过滤器 | filters - 方法 | methods - js对象(即字典)补充 - 插值表达式转义 | delimters - 计算属性 | computed - 监听属性 | watch 一

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • FOXHIS PMS前台西软服务器端和客户端安装教程

    FOXHIS PMS前台西软服务器端和客户端安装教程

    西软服务器端和客户端安装教程V1.0 前言:网上有很多关于西软FOXHIS PMS的安装教程,但大多没有详细描述并且内容非常肤浅粗燥,本特意把自己的安装过程写成文档并记下,后面的数据库操作没有提供图片,但是我相信绝对能够看得懂.文章为本人原创,如需转载请注明CSDN 飞越飘零,谢谢! 下面文章内容经过测试N遍,100%是能成功安装,请各位无须怀疑. 注意:西软的license是在相应酒店对应的数据里面的,并绑定了对应酒店的客户端安装包,所以不能跨酒店导入和跨酒店使用第二个酒店的安装包. 一.li

  • VUE开发分布式医疗挂号系统的医院设置页面步骤

    VUE开发分布式医疗挂号系统的医院设置页面步骤

    目录 一.显示记录列表功能 1.显示列表组件 2.分页组件 3.条件查询组件 二.删除记录功能 1.删除单条记录 2.批量删除记录 三.锁定和解锁功能 四.添加记录功能 五.修改功能 六.解决组件重用问题 分布式医疗挂号系统 | 开发医院设置页面 在分布式医疗挂号系统中,前端主要使用的两个技术是Vue和ElementUI.医院设置微服务模块的后端之前已经完成,现在需要借助Vue+ElementUI完成医院设置微服务模块的前端页面: 一.显示记录列表功能 1.显示列表组件 带斑马纹表格开发文档:

  • Go gRPC环境安装教程示例详解

    Go gRPC环境安装教程示例详解

    目录 前言 安装 protobuf 安装相关包 创建并编译proto文件 VSCode-proto3插件介绍 前言 gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计,带来诸如双向流.流控.头部压缩.单 TCP 连接上的多复用请求等特.这些特性使得其在移动设备上表现更好,更省电和节省空间占用. 在 gRPC 里客户端应用可以像调用本地对象一样直接调用另一台不同的机器上服务端应用的方法,使得您能够更容易地创建分布式应用和服务. gRPC 默认使用 protocol

  • Vue安装浏览器开发工具的步骤详解

    开发vue时,浏览器有一个好的开发调试工具能让开发事半功倍,磨刀不误砍柴工. 步骤 1.下载工具 地址:  https://github.com/vuejs/vue-devtools 2.安装依赖 cmd进入vue-devtools文件夹,安装相关依赖,依次执行npm install,再执行npm run build. 3.修改配置 打开shells>chrome>src>manifest.json,修改"persistent":false为true. 4.浏览器安装

随机推荐