两步安装vue.js devtools调试工具

最新推荐文章于 2024-06-25 20:03:16 发布
最新推荐文章于 2024-06-25 20:03:16 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： # vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/horizon_junmowen/article/details/88375971
版权
前端 同时被 2 个专栏收录
26 篇文章 2 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏

文章目录

安装

1.下载vue.js devtools插件

去谷歌浏览器插件下载中心，搜vue
https://www.chromefor.com/

找到如下图，点进去
在这里插入图片描述
点击本网站下载
在这里插入图片描述
有三个可选下载路线，下载中国HongKong的
在这里插入图片描述

2.扩展程序

打开谷歌浏览器，安装扩展程序
在这里插入图片描述

直接把你下载好的vue.js devtools 拖进来
在这里插入图片描述

上面就会显示如下图的小图标，当你开启一个vue程序时，它就会变成绿色的。
在这里插入图片描述

使用

打开一个vue程序
此时我们发现浏览器上边的图标自动变亮了，按F12调试，点击出vue调试界面
在这里插入图片描述
如下图：
它会清楚的告诉你Vue页面所在的位置，以及用到的组件，vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试。 怎么样, 是不是感觉工作效率提高了呢！
在这里插入图片描述

嘉戈
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 72
    评论
专栏目录
Vue3-devtools开发者工具正确安装方法
Zhang_wang_yun的博客
05-30 1万+
学习Vue3自然离不开调试工具Vue3-Devtools，所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。
Vue.js devtools 调试工具安装教程
Leona的博客
07-23 424
【傻瓜式安装】有博主已经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插件安装教程
weixin_62897746的博客
10-01 7504
为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试
Chrome插件：​Vue.js Devtools 高效地开发和调试
最新发布
朱雀随云记的博客
06-25 1212
Vue.js Devtools是一个Chrome DevTools扩展，专门用于调试Vue.js应用。安装这个扩展后，你会在Chrome开发者工具中看到一个新的标签“Vue”，通过它可以直观地查看和操作Vue.js组件，极大地提升了调试效率。
vue-devtools-简介、下载、安装、配置、使用
记录和分享属于我的“IT”时光
03-21 2万+
vue-devtools-简介、下载、安装、配置、使用
Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
仙魁XAN
10-28 5091
一、简单介绍 Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue 浏览器调试工具 Vue.js devtools 安装，这里做简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 接下来将介绍三种安装方法。 二、相关环境 1、Windows 10 2、Goog...
Vue.js调试工具devtools的安装
youngko的博客
10-22 535
因为在原始的Chrome浏览器中始终无法打开应用商店安装插件，也使用了解压devtools文件夹的传统方式安装，过程中仍然遇到一些问题暂时无法解决，后发现使用谷歌的极速浏览器可快速安装devtools调试工具用于开发，分享出来供参考。
安装vue调试工具 vue-devtools
kivet 的博客
09-02 488
vue-devtools是一款基于chrome浏览器的插件，在调试过程中可以省去打console.log，他会自动把我们在data上定义的数据动态的显示出来（数据改变，它也跟随着改变）。用它来对vue应用进行调试可以极大地提高我们的调试效率。 步骤是网上找的，留篇文章，供以后自己参考 1.下载vue-devtools项目到本地（网上找的资料有些是直接下载的，也有通过命令在GitHub上下载的，...
Vue.js devtools 6.5.1
04-18
Vue.js devtools 是一款用于 Vue.js 应用程序开发的浏览器扩展工具，它可以帮助开发者更轻松地调试和分析 Vue.js 应用。这个扩展提供了诸如组件树、状态管理器、事件触发、性能分析等功能，使开发者可以更好地理解和...
vue.js devtools 调试工具
05-08
总的来说，Vue.js Devtools 是 Vue 开发者不可或缺的工具，它极大地简化了Vue应用的调试过程，提高了开发效率。通过熟练掌握它的使用，开发者可以更有效地排查问题，实现更高效、高质量的代码编写。无论是初学者还是...
Vue3谷歌浏览器调试工具Vue.js devtools 6.1.4
05-30
Vue.js devtools 6.1.4 是一款专为Vue3开发者设计的谷歌浏览器扩展工具，它极大地简化了Vue应用程序的调试过程。这款工具能够帮助前端开发者深入理解Vue3的应用状态，实时追踪组件数据变化，定位并解决问题，提高...
Vue.js devtools 3.1.5
03-09
Vue.js Devtools是一款强大的前端开发工具，专为Vue.js应用程序设计，用于提升开发和调试的效率。这款插件在Chrome和360安全浏览器中均可使用，版本号为3.1.5，它包含了丰富的功能，帮助开发者深入理解Vue应用的运行...
Vue.js devtools(Vue3开发者工具插件)
01-21
Vue.js devtools是针对Vue3开发的浏览器扩展插件，它是前端开发者不可或缺的工具，尤其对于Vue项目的调试和性能优化至关重要。Vue3开发者工具提供了一种直观的方式，让我们可以直接在浏览器环境中查看和操作Vue应用...
vue-devtools最新版本安装教程（vue-devtools6.5.0）
vue-cli脚手架初始化代码
07-06 6926
vue-devtools安装教程
【Vue】全家桶之vue-devtools
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
08-08 8033
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
vue-devtools的安装与使用
热门推荐
weixin_43843572的博客
05-26 8万+
vue-devtools的安装与使用
如何安装vue-devtools（超简单）
庸人方自扰，自在就好
12-01 5455
vue-devtools的安装有两种方法，第一种是通过谷歌应用商店进行安装，第二种是手动安装： 方法一（通过谷歌应用商店进行安装，需要翻墙）： 打开谷歌的更多工具-扩展程序，打开左上角的“主菜单”，点击下面的“打开Chrome网上应用店”，这个应用商店是需要翻墙的，一般同学是打不开的！ 能打开的同学搜索Vue.js devtools，把第一个扩展程序添加至Chrome即可。 方法二：（手动安装，无需翻墙） 1、打开https://github.com/vuejs/vue-devtools 2
前端 Vue 浏览器调试工具 Vue.js devtools 安装
qq_46490956的博客
08-29 3420
前端 Vue 浏览器调试工具 Vue.js devtools 安装
安装Vue.js devtools
07-27
要安装 Vue.js devtools，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Vue CLI。如果没有安装，你可以在命令行中运行以下命令进行安装： ``` npm install -g @vue/cli ``` 2. 安装完 Vue CLI 后，你可以创建一个新的 Vue 项目。在命令行中运行以下命令来创建一个新的项目： ``` vue create my-project ``` 其中，"my-project" 是你想要创建的项目的名称，你可以自定义。 3. 进入到你的项目目录中： ``` cd my-project ``` 4. 在项目中安装 Vue.js devtools。在命令行中运行以下命令： ``` vue add vue-devtools ``` 5. 安装完成后，你可以启动开发服务器以查看你的应用程序。运行以下命令来启动开发服务器： ``` npm run serve ``` 6. 打开浏览器，并在地址栏中输入 `http://localhost:8080`（端口号可能会有所不同），即可访问你的应用程序。 现在，你已经成功安装并启动了 Vue.js devtools，并且可以开始在浏览器中进行调试和开发了。
评论 72
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值