【前端开发工具】VUE3 devtools安装

这篇具有很好参考价值的文章主要介绍了【前端开发工具】VUE3 devtools安装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

尤雨溪在2020年9月19日晚正式发布vue3.0 one piece。此版本相较于vue2版本,更快、更小、更易维护、更易于原生、让开发者更轻松;所以学习vue3,对于一个前端开发者来说是一个刻不容缓的学习趋势。
学习vue3自然也离不开debug啦~~
Vue官方发布了调试工具Vue-Devtools。

VUE3的Vue-Devtools目前还不能像VUE2的Vue-Devtools那样,通过命令(npm install vue-devtools)进行安装。

VUE3 devtools安装

1.下载VUE3 devtools(https://gitee.com/h5web/devtools-6.0.0-beta.15)
【前端开发工具】VUE3 devtools安装

2.下载后,解压文件,并通过VScode打开文件,打开新终端,依次输入命令

  • yarn install
  • yarn run build

3.打开chrome浏览器 --> 点击右上角“三点菜单栏” --> 更多工具 --> 扩展程序 --> 打开“开发者模式” --> 加载已解压的扩展程序
【前端开发工具】VUE3 devtools安装

加载已解压的扩展程序 选中 这个文件【前端开发工具】VUE3 devtools安装

4.将扩展程序固定在顶部
【前端开发工具】VUE3 devtools安装
5.当你打开一个vue的页面,vue的图标就会亮起来。这时你就成功了1.大半。
但是,如果你打开F12时,缺少了这个vue的话,你就还没完全成功。
【前端开发工具】VUE3 devtools安装
那么,我们该怎么办呢?
① 打开详情,检查是否已打开“允许访问文件网址”
【前端开发工具】VUE3 devtools安装
【前端开发工具】VUE3 devtools安装
②给你的vue3项目的main.js加上这一句
app.config.devtools = true
【前端开发工具】VUE3 devtools安装

6.最后 你就成功了~。!文章来源地址https://www.toymoban.com/news/detail-448657.html

到了这里,关于【前端开发工具】VUE3 devtools安装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue调试工具:chrome浏览器vue-devtools安装方式详述

    vue-devtools官方文档,也可按照官方文档操作 下面将介绍chrome集成vue-devtools的两种方式 通过扩展-扩展程序-访问chrome应用商店输入vue-devtools搜索插件即可 下载源码选择对应的版本tag官方源码 我们这里选择最新版本v6.5.1 下载压缩包,或clone都可以*( 克隆命令: 安装依赖以及打

    2024年03月15日
    浏览(63)
  • vue3 解决使用vscode开发工具编辑vue3项目时代码一直标红

    从网上查的,插件还没升级到vue3版本(比如vue3项目根标签可以多个,vue2项目根标签只能有一个,以及等等差异) 解决方法1 然后关闭vscode,再重启vscode就可以了! 解决方法2 将eslint插件卸载重装,就可以解决了!

    2024年02月07日
    浏览(63)
  • chrome插件开发实例06-定制自己的Chrome DevTools调试工具

    目录 Chrome DevTools 调试工具 演示 ​编辑 源码  devtools.html devtools.js panel.html

    2024年02月13日
    浏览(42)
  • 浏览器开发者工具DevTools中提升效率的小技巧

    DevTools 非常强大除了常用的查看元素,进行断点调试或许还有些你不知道的小技巧,小功能。如可以快速的重新发送请求,快速选择元素,在控制台中使用npm库等,让你能够更加高效的进行开发。不定时更新~ 使用快捷键能快速打开 DevTools,但不同的快捷键可以打开不同的

    2024年04月28日
    浏览(60)
  • vue-安装Vue开发者工具

    极简插件:下载-开发者模式-拖曳安装-插件详情允许访问文件 网址:https://chrome.zzzmh.cn/index 搜索Vue Devtools 下载下来的安装包先解压  然后点击chrome浏览器的右上角三个点的按钮在里面找到扩展程序这个选项,然后点进去管理扩展程序,进入后开启右上角的开发者模式  将刚

    2024年02月06日
    浏览(46)
  • 前端新员工入职,需要为你的新电脑安装一些环境,开发工具

    目录 一.先安装个谷歌浏览器,稳定版。 二.安装公司日常交流软件 三.安装个VSCode 四.安装nvm 五.vue-cli的安装和配置 六.安装git 配置git账号 拉取线上仓库到本地 一些常用git命令 GitLab配置公钥私钥  七.其他工具 网络抓包工具:whistle 反向代理工具:nginx 调试接口工具:postma

    2024年02月06日
    浏览(57)
  • Vue3.0 vue.js.devtools无法显示Pinia调试工具

    之前的配置方式: 更新配置方式: 设置之后即可显示调试工具

    2024年03月11日
    浏览(54)
  • 【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建

    1.1 重写双向数据绑定 1.1.1 Vue2 基于Object.defineProperty() 实现 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 把 Vue 中的核心方法 defineReactive 做一些简化如下: Vue通过defineReactive方法实现对需要观察的对象的每个属性进行监控。dep对象就相当于一

    2024年02月10日
    浏览(40)
  • 如何快速使用Vue3在electron项目开发chrome Devtools插件

    为了方便快速建立项目,我已经写好脚手架,直接clone项目,快速开发 点击快速进入源代码 拉取代码 安装依赖 运行项目 打包项目 打开chrome://extensions/,打开开发者模式,直接把打包产物拖到窗口即可 具体代码进入源代码 主要使用我另外开发的插件chrome-extension-ipc实现通讯

    2024年02月06日
    浏览(38)
  • 前端开发工具vscode

    一、下载安装 https://code.visualstudio.com/ 二、安装插件 三、使用 ①、创建一个空目录 ②、利用vscode工具打开该目录 ③、将该目录设置为工作区 在工作区中添加文件,还可以进行浏览器访问(提前安装了Live Server插件) =============================================================== 为工具添

    2024年02月07日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包