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，如果不带，会出错：

yarn run build:watch

代码执行一阵后，没有其他反应，此时Ctrl+C退出即可。
接下来执行dev：

yarn run dev:chrome

出现下面的界面后就可以Ctrl+C退出终端了：

此时，Vue-Devtools目录下，生成了build目录：

安装

1、打开Chrome浏览器扩展程序

2、加载已解压的程序

3、扩展栏固定vue-devtools程序

至此，Vue-Devtools插件安装完成，打开使用vue3的网站，F12打开Chrome调试台，可以看到Vue-Devtools的界面按钮：

到此这篇关于Vue3vue-devtools调试工具下载安装的文章就介绍到这了,更多相关vue-devtools调试工具内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue调试工具vue-devtools的安装与使用

    Vue调试工具vue-devtools的安装与使用

    目录 前言 一.vue-devtools是什么? 二.vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三.vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用. 一.vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率. 二.vue-devtools安装 1.下载vue-devtools工具 进入GitHub官网

  • 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调试工具的使用

    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

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

  • Mysql 5.7 服务下载安装图文教程(经典版)

    Mysql 5.7 服务下载安装图文教程(经典版)

    MySQL 5.7在诸多方面都进行了大幅的改进,主要在于安全性.灵活性.易用性.可用性和性能等几个方面. 下面我们通过图文并茂的方式给大家介绍Mysql5.7数据库的下载安装详细教程,一起看看吧! 一.Mysql5.7下载 1.百度搜索mysql,选择进入官网下载页 2.点击下载安装版 3.继续选择下载 4.接下来就是有意思的了,显示提示大家登陆或者注册,但是搞笑的一点是左下角其实有一个快捷下载的链接,点击就好了,不需要注册登陆,哈哈,眼睛小的人,小编原谅你没看到,要知道,欧巴也是带着眼睛才看到

  • MySQL5.7.14下载安装图文教程及MySQL数据库语句入门大全

    MySQL5.7.14下载安装图文教程及MySQL数据库语句入门大全

    如何下载: 我先去MySQL首页下载最新版本的MySQL-链接:https://www.mysql.com/downloads/ 进入此界面下载: Downloads–>MySQL Community Edition (GPL)(这是免费版的,当然,有钱的可以用收费的,功能更强大)–>MySQL Community Server (GPL) –>选择对应的系统和电脑版本(在这里,我选择的是Window系统64位的下载) –>No thanks, just start my down

  • mysql8.0.21下载安装详细教程

    官网地址:https://www.mysql.com/ 安装建议:尽量不要用.exe进行安装,用压缩包安装,对日后的卸载更为方便 下载地址:https://dev.mysql.com/downloads/mysql/ 1.下载得到zip压缩包 2.解压到要安装的目录 我这里是:D:\Program File\MySQL\mysql-8.0.21-winx64,增加了data目录 3.添加环境变量 我的电脑–>属性–>高级–>环境变量 选择path添加:mysql安装目录下的bin文件夹地

  • Mysql最新版8.0.21下载安装配置教程详解

    一.下载 1.下载安装包 mysql下载路径:https://dev.mysql.com/downloads/file/?id=496745 2.解压压缩包 解压到安装的目录: 3.在此目录下新建my.ini配置文件 [mysqld] # 设置 3306 端口 port=3306 # 设置 mysql 的安装目录 basedir=D:\environment\mysql\mysql-8.0.21-winx64 # 设置 mysql 数据库的数据的存放目录 datadir=D:\environme

  • R语言的下载安装图文教程讲解

    R语言的下载安装图文教程讲解

    什么是R语言 R语言是一个开源的数据分析环境,起初是由数位统计学家建立起来,以更好的进行统计计算和绘图,这篇wiki中包含了一些基本情况的介绍.由于R可以通过安装扩展包(Packages)而得到增强,所以其功能已经远远不限于统计分析,如果感兴趣的话可以到官方网站了解关于其功能的更多信息. 至于R语言名称的由来则是根据两位主要作者的首字母(Robert Gentleman and Ross Ihaka),但过于简短的关键词也造成在搜索引擎中很不容易找到相关的资料.不过这个专门的搜索网站可以帮到你.

  • mysql 8.0.15 下载安装详细教程 新手必备!

    mysql 8.0.15 下载安装详细教程 新手必备!

    本文记录了mysql 8.0.15 下载安装的具体步骤,供大家参考,具体内容如下 背景:作为一个热爱技术但不懂代码的产品写的教程 1.环境 系统:windows 64位 mysql版本:mysql 8.0.15 2.下载篇 首先是下载数据库安装文件,进入mysql官网下载频道https://www.mysql.com/downloads/,依次点击Community→MySQL Community Server,如下图: 进入下载页面后,选择操作系统,这里我们选择默认的Microsoft Win

  • SQL Server 2008 Express 及 Management Studio Express下载安装配置教程

    这篇文章主要讲如何一步步从下载.安装.配置 SQL Server 2008 Express 和 SMSS 到最后 使用 SMSS 连接本地的数据库服务. 为什么要写这篇文章? 这个学期第一节数据库原理课上,主讲老师共享了课程所需的材料,其中有一个 3.1GB 大小的 SQL Server 2008 安装包,我的硬盘比较小,而且分享方式是百度网盘,直接下载很慢.之前接触过一点 MySQL,知道核心的组件加起来其实不大,于是尝试着去官网寻找轻量级的 SQL Server 2008 版本,果不其然.下

  • DBeaver下载安装详细教程

    DBeaver下载安装详细教程

    一.DBeaver下载: https://dbeaver.io/download/根据自己的操作系统选择对应的版本 我们下载:https://www.jb51.net/softs/700311.html 下载完成的安装包如下: 二.下载成功后 直接双击打开进行安装选择中文 点击下一步 选择我接受 这里是选择多用户使用还是仅管理员使用,直接点击下一步 选择中文,这个一步虽同上面的某一步是一样的,但这是正常的 选择下一步 选择我接受 选择组件,这个需要 JDK1.8+支持 选择安装位置 选择安装DB

随机推荐