Vue项目使用开发工具vuejs-devtools最新简单安装方法

已于 2022-03-11 17:33:26 修改
阅读量6.7k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js chrome javascript vuejs-devtools
于 2022-03-11 17:32:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49714202/article/details/123430022
版权

目录

1.打开自己谷歌浏览器(Google Chrome),浏览器输入网址进入应用商店

网址:https://chrome.google.com/webstore/search/vue-devtools?hl=zh-CN

2.搜索栏里面搜索vue-devtools,我添加的第三个,点击进入添加即可,如下图

(1)

在这里插入图片描述

(2)

在这里插入图片描述

3.打开浏览器进入这个网址打开开发者模式chrome://extensions/,如下图

(1)

在这里插入图片描述

4.此步骤可以省去,可以直接看5,因为主要想用控台F12查看vue报错情况,想要浏览器右上角V小图标显示,置顶小图标,看如下步骤

(1)

在这里插入图片描述

(2)

在这里插入图片描述

5. 在main.js 全局挂载打开,填上,Vue.config.devtools = true; 然后用新启动Vue项目,用谷歌浏览器

6. 按F12控制台查看vue使用vue-devtools功能,如下图

(1)

在这里插入图片描述

感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！

MFG_666
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-devtools+vue3适配谷歌浏览器插件最新版本V6.1.4（安装步骤详细）
tgx908061685的博客
04-24 3068
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、安装vue-devtools的前期准备二、使用vscode打开项目然后安装依赖打包1.使用命令yarn安装node_modules依赖包2.使用yarn run build打包3.使用谷歌浏览器加载打包好的文件夹即可总结 前言 我们在开发vue的过程中一般在使用浏览器开发的时候需要看vue内部的传参，路由等，可以使用vue-devtools插件使我们开发过程中做到事半功倍！大家有什么不懂得也可以评论我都会解答！ 提示：.
vue-devtools最新版本安装教程（vue-devtools6.5.0）
vue-cli脚手架初始化代码
07-06 6159
vue-devtools安装教程
前端同学必备：教你如何安装、使用Chrome的vue-devtools插件
04-04 3027
Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。
Vuejs-devtools
04-19
vue.js chrome调试工具 devtools； 使用方法：解压后，打开Chrome-更多工具-扩展程序，点击“加载已解压的扩展程序安装”选择指定解压目录即可。
vue调试工具vue-devtools安装及使用
weixin_34292959的博客
08-27 378
本文主要介绍 vue的调试工具vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools ...
vuejs_devtools
11-28
vuejs_devtool chrome插件离线安装包下载，vuejs_devtools离线包
vue调试工具——vue-devtools安装及使用
ld395353765的博客
03-05 1884
本文主要介绍 vue的调试工具vue-devtools 的安装和使用 安装: 1.到github下载：（！下载一定要记得是master主分支的代码，默认克隆后进入的是dev分支，执行npm run build会报错，执行git checkout master切换到master主分支） git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 1 2 cd vue-...
Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决
SSbandianH的博客
09-06 5527
一、vue.js插件下载 二、Vue开发工具vuejs-devtools下载 三、Vue开发工具vuejs-devtools安装+使用 根据下图打开谷歌浏览器中的【拓展程序】： 勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。导入后即可看到一件导入的vuejs-devtools插件。 用谷歌打开文件进入调试模式（按F12即可进入），即可在调试控制台看到vue页签。如下图： 四、常见问题解决 安装好插件后，打开文件并打开调试模式后没
vue调试工具vue-devtools安装及使用方法
12-12
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2....
vue-devtools-dev(带详细图文安装教程).7z
09-18
附有中文安装教程的vue开发者工具，使用者只需下载下来按照压缩包里的说明文档安装即可使用。 压缩包内容 1.vue-devtools-dev.zip（可以自行到https://github.com/vuejs/vue-devtools下载） 2.vue-devtools安装指南V...
vuejs_devtools_beta-6.0.0.15-an+fx.xpi
10-08
VUE开发工具，VUE开发调试工具
vue-devtools-6.5.0
04-21
vue开发工具chrome插件。https://github.com/vuejs/devtools项目本地编译版本。在chrome扩展程序管理中打开右上角的"开发者模式"，选择“加载已解压的扩展程序”，选择解压本文件得到的目录即可
Vue DevTools调试工具的使用
11-27
因为工作要求，目前主要在用Vue.js技术栈做开发，调试是必不可少的，这里会用的Vue DevTools的调试工具，问题就出在这里，当用Vue DevTools做调试时，很多时候都不能用，提示没有监测到Vue，这让工作效率瞬间拉低了...
Vue.js devtools 调试工具安装教程
Leona的博客
07-23 415
【傻瓜式安装】有博主已经install、run过了，直接用就好 ????傻瓜式安装链接 不过这有个缺点，这篇文章发表在2008年，并且Vue.js devtools的版本是3.1.5。 好了，进入正题 ???? 一、下载压缩包 在官网上下载压缩包https://github.com/vuejs/devtools#vue-devtools 二、解压 解压位置随个人喜好，我解压到了D盘。 三、下载依赖 打开cmd，并切换到你的安装路径\devtools-5.1.1 下，并运行 c
vue-devtools介绍与安装
BADAO_LIUMANG_QIZHI的博客
10-21 1286
vue-devtools vue-devtools是一款浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大提高我们的调试效率。 由于vue是借助数据驱动的，所以在开发调试中查看DOM不能解析出什么， 但是借助vue-devtools插件，就可以很容易的对数据结构进行解析和调试。 安装 下载地址： https://github.com/vuejs/vue-devtools#v...
【Vue】初识Vue，Vue简介及Vue Devtools配置
一个真ikun
10-13 1673
Vue简介，Vue Devtools的配置以及第一个Vue案例
快速安装vue-devtools最新版本（vue开发者调试工具安装）
qq_38243612的博客
04-13 2436
安装vue开发者调试工具vue-devtools的方法有几种： 方法一：通过谷歌浏览器的插件商店直接安装，该方法： 安装地址： https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 优点：安装最简单，版本新，且安装不会遇到奇奇怪怪的问题 缺点：插件商店需通过网络...
vue-devtools安装教程（简单易上手）
热门推荐
小白_xm
03-23 2万+
Vue-devtools安装教程 备注：在安装配置Vue-devtools过程中，很多博客上基本上都要求去github官网下载vue-devtools-dev压缩包。下载并解压该压缩文件后，便以管理员的方式打开命令行窗口，然后利用npm进行intsall（命令行：npm install），接下来输入npm install bulid。当然，利用这种方法有一个前提，便是要在此之前先安装好npm，要想安装npm，最便捷的方法是下载一个集成的node.js，而前提是要有一定的node基础。在通过上述办法来安装vu
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1191
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
vue开发工具vuejs-devtools
06-28
### 回答1： Vue开发工具Vuejs-devtools是一款用于Vue.js开发的浏览器扩展程序，它可以帮助开发者更方便地调试Vue.js应用程序。该工具提供了许多有用的功能，如组件树、实时数据、事件监听、路由跟踪等，可以帮助开发者更快速地定位和解决问题。Vuejs-devtools是Vue.js生态系统中不可或缺的一部分，对于Vue.js开发者来说是非常重要的工具之一。 ### 回答2： Vue.js是非常流行的JavaScript库，用于构建用户界面。Vue.js的主要优势之一是它的开发工具，其中最著名的是Vue.js开发工具（Vue.js DevTools）。 Vue.js开发工具是一个浏览器扩展程序，可以帮助开发者更轻松地查看和调试Vue.js应用程序。它可以在Google Chrome和Firefox中使用。 Vue.js开发工具包含了一系列功能，包括： 1.组件树：可以查看整个Vue.js应用程序的组件层次结构，方便开发者快速定位到所需组件。 2.实时更新：当编辑Vue.js代码时，开发工具会实时更新应用程序的状态，让开发者可以更快地查看自己的代码更改所带来的影响。 3.状态查看器：Vue.js开发工具提供了一个状态查看器，可以显示应用程序的状态树。这可以帮助开发者更好地理解应用程序的状态及其变化。 4.调试工具：开发工具可以帮助开发者调试Vue.js应用程序。开发者可以使用调试工具来检查和修改Vue.js组件、指令和钩子的行为。 5.性能监控：Vue.js开发工具还提供了性能监控功能，可以让开发者了解应用程序的性能瓶颈并进行优化。 综上所述，Vue.js开发工具是一个非常有用的工具，可以帮助Vue.js开发者更轻松地开发和调试应用程序，提高生产效率和开发质量。 ### 回答3： Vue.js是一个流行的JavaScript框架，它旨在构建响应式的Web应用程序。为了方便开发者调试和优化Vue.js应用程序，Vue.js开发团队提供了一个开发工具——vuejs-devtools。 Vuejs-devtools是一个浏览器扩展程序，允许开发者在Chrome DevTools中查看和调试Vue.js组件树、props、computed、$emit和事件。它提供一个用户友好的界面，让开发者能够更容易地监控和调试Vue.js应用程序，提高开发效率和代码质量。 Vuejs-devtools提供了以下功能： 1.组件树视图（Component Tree View）：显示Vue.js应用程序中所有组件树的层次结构，让开发者轻松地找到需要调试的组件。 2.实例信息视图（Instance Information View）：可以查看组件的props、computed、methods、data、$emit和事件，以及组件实例在Vue.js生命周期中的状态。 3.事件跟踪视图（Event Trace View）：帮助开发者跟踪事件的源头和目标，以及防止事件被错误地传播和使用。 4.可编辑视图（Editable View）：允许开发者修改组件实例的props、data和computed值，以便测试和调试代码。 总之，Vuejs-devtools是一个强大的开发工具，帮助开发者更好地调试和优化Vue.js应用程序，提高开发速度和代码质量。无论是开发新的Vue.js应用程序还是维护旧的应用程序，Vuejs-devtools都是一个必备工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值