如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用

简介: 这篇文章介绍了如何在浏览器中安装和使用Vue开发者工具,提供了两种下载方式,包括直接下载编译好的插件和从GitHub上下载源代码后进行打包。文章还详细说明了在Chrome浏览器中加载插件的步骤,以及插件在Vue项目和非Vue项目中的不同表现。

一个混迹于Github、Stack Overflow、开源中国、CSDN、博客园、稀土掘金、51CTO等 的野生程序员。
目标:分享更多的知识,充实自己,帮助他人
GitHub公共仓库:https://github.com/zhengyuzh
以github为主:
1、分享前端+后端基础知识
2、前后端框架知识+框架使用分析
3、热门前端+后端面试题(实时更新)
4、开源项目(主要包含大学课程设计)

文章目录

  • 前言
  • 1、下载
    • 1.1 直接免费提取文件
    • 1.2 下载方式一
    • 1.3 下载方式二
  • 2、项目打包
    • 2.1 安装依赖
    • 2.2 项目打包
    • 2.3 查看打包好的插件
  • 3、如何在Chrome浏览器中使用该插件
  • 4、该插件的使用
    • 4.1 不是Vue项目
    • 4.2 vue项目

前言

浏览器中也可以搜索使用Vue插件,这里给出的是从Github上下载插件项目,然后进行的安装使用

1、下载

Github下载地址:
https://github.com/vuejs/devtools/tree/v5.1.1

1.1 直接免费提取文件

如果嫌弃以下步骤麻烦,我已经将插件打包编译好放到github中,可以直接下载使用。可以直接省略第1 、2 步骤。直接进行第三步骤的设置。地址:

vue-devtools-chrome-5.5.1.rar

https://github.com/zhengyuzh/Front-end-learning/blob/main/Vue%E5%AD%A6%E4%B9%A0/%E8%B5%84%E6%96%99/%E6%8F%92%E4%BB%B6/%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E6%8F%92%E4%BB%B6/vue-devtools-chrome-5.5.1.rar

1.2 下载方式一

在Releases中可以指定版本进行下载,高版本的可能出现版本不兼容的问题。第一次下载最新版本就出现了版本不兼容的问题。我这里下载的是5.5.1版本

第一次下载的版本是6.4.5 出现版本不兼容问题,建下载5.5.1 版本。方式二就是直接下载的5.5.1版本

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


1.3 下载方式二

这里下载的是5.5.1 版本,

在这里插入图片描述

一样的效果、上一个方式可以选择不同的版本
在这里插入图片描述

2、项目打包

2.1 安装依赖

管理员命令行的形式 进入项目存放的目录,然后进行项目依赖的下载。npm install 或者 cnpm install

在这里插入图片描述

在这里插入图片描述

2.2 项目打包

在这里插入图片描述

2.3 查看打包好的插件

在这里插入图片描述

3、如何在Chrome浏览器中使用该插件

其它浏览器的安装使用基本类似,这里以Chrome浏览器为主

点击浏览器右上方的三个点,然后在下拉框中选择设置

在这里插入图片描述

然后选择扩展程序
在这里插入图片描述

打开开发者模式

在这里插入图片描述

选择扩展程序
在这里插入图片描述

注意: 需要重启浏览器

4、该插件的使用

4.1 不是Vue项目

不是Vue项目的情况下,该插件是不给使用的,图标是灰色的

在这里插入图片描述

4.2 vue项目

是vue项目的情况下是会出现Vue选项,而且Vue图标会变亮

在这里插入图片描述
在这里插入图片描述
参考资料:
https://blog.csdn.net/weixin_41092938/article/details/112477966

相关文章
|
2月前
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
190 8
|
4月前
|
Web App开发 人工智能 JavaScript
一键三连不求人!用 CodeBuddy 写个浏览器插件自动点赞、评论、收藏
本文介绍了一款通过 CodeBuddy AI 工具开发的浏览器插件,可自动完成“点赞、评论、收藏”三连操作。作者从需求出发,分四步实现:搭建基础框架、指定目标网页、解析内容并模拟点击事件,最后加载验证插件。借助 CodeBuddy 自动生成代码,整个过程高效便捷,大幅提升用户体验。此工具不仅节省手动操作时间,还为自动化任务提供了新思路,适合热爱技术与效率提升的网页冲浪者尝试。
|
12月前
|
数据可视化 Java Windows
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
本文介绍了如何在Windows环境下安装Elasticsearch(ES)、Elasticsearch Head可视化插件和Kibana,以及如何配置ES的跨域问题,确保Kibana能够连接到ES集群,并提供了安装过程中可能遇到的问题及其解决方案。
Elasticsearch入门-环境安装ES和Kibana以及ES-Head可视化插件和浏览器插件es-client
|
7月前
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
768 14
|
8月前
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
234 19
|
11月前
|
JavaScript 前端开发
|
11月前
|
JSON JavaScript 前端开发
vue如何更好的解决浏览器兼容问题
vue如何更好的解决浏览器兼容问题
301 1
|
12月前
|
安全 Oracle Java
edge浏览器加载java插件
edge浏览器加载java插件
692 1
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
643 1
|
存储 JavaScript 程序员
Vue学习之---浏览器本地存储(8/17)
这篇文章介绍了Vue中浏览器本地存储的使用方法,包括基础知识、localStorage和sessionStorage的代码实例及其测试效果,并提供了相关的API和操作示例。
Vue学习之---浏览器本地存储(8/17)

热门文章

最新文章