【vue学习：安装调试工具vue-devtools+问题】

最新推荐文章于 2024-05-28 11:35:05 发布
最新推荐文章于 2024-05-28 11:35:05 发布
阅读量461 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daisy_juhua/article/details/128081326
版权

目录

一、推荐下载地址

二、安装vue-devtools

 三：添加至浏览器

初学vue发现需要在浏览器安装一个vue调试工具：

一、推荐下载地址

推荐下载网址：

https://gitee.com/zhang_banglong/vue-devtools/repository/archive/master.zip

下面的版本我没有安装成功

GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

二、安装vue-devtools

解压后，安装目录如下

在项目文件夹内打开命令面板：npm install，不知道是啥，不管

接着运行命令：npm run build

在该路径下将 
    "persistent": false改为true

 三：添加至浏览器

打开谷歌浏览器-右上角三个点-----》更多工具---》扩充功能

 

 载入未封装项目--》选中vue-devtools路径中shells-Chrome文件--》确定即可

选中后界面如下就完成了

本地运行一个Vue项目，F12打开控制台，如果没有，要刷新一下页面，或关闭浏览器重新打开

 

@年年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue调试工具vue-devtools安装及使用方法
12-12
在开发过程中，为了提高效率和精确调试，Vue 提供了一个强大的调试工具——Vue DevTools。这款工具允许开发者深入查看 Vue 应用的状态，包括组件树、数据、计算属性、依赖关系等。下面我们将详细介绍 Vue Devtools ...
Vue项目调试工具：vue-devtools安装包
02-03
在Chrome或Firefox等支持浏览器扩展的浏览器上安装Vue-devtools，可以极大地提升Vue项目的调试体验。以下将详细介绍Vue-devtools的安装、使用以及其提供的主要功能。 1. 安装Vue-devtools： - 直接方式：访问...
Vue程序调试方法以及页面美化
程序员小杨哥的博客
03-05 1241
Vue如何调试代码？页面有哪些通用美化方法，让页面变得更好看~
浏览器扩展程序增加 vue_dev_tools 调试工具
流放深圳
03-27 898
在做 Vue 项目的开发时，我们经常需要在页面上调试，接下来介绍如何在浏览器扩展程序增加 vue_dev_tools 调试工具
如何创建一个vue项目？详细教程，如何创建第一个vue项目？
最新发布
m0_74249400的博客
05-28 1116
第一次接触vue，新手如何创建一个vue项目？带图详细教程，一步步解释，手把手创建
如何build并在Chrome浏览器上安装vue-devtools调试工具
fx_yzjy101的专栏
03-05 5275
目录 概述 准备工作 安装过程 install安装 build编译 遇到报错1 遇到报错2 yarn run build chome安装本地扩展 chrome-vue-devtools扩展文件分享 概述 本文记录vue-devtools调试工具install以及build打包过程中遇到的：npm install报错，npm run build 报错，以及如何安装build后的chrome扩展包。 准备工作 最近开始使用Vue开发前端，需要安装Vue-devtools调试工具。
Vue --控制台出现 Download the Vue Devtools extension for a better development experience
热门推荐
qq_52986363的博客
04-04 2万+
解决方案： 安装Vue开发者工具即可 Chrome浏览器安装方式： ①：点击右上角三个点 ②：点击更多工具 ③：点击扩展程序 ④：点击右上角的开发者模式，将他启用 ⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可
Vue - 去掉控制台 Download the Vue Devtools extension for a better development experience httpsxxx 打印
m0_54850952的博客
03-01 592
前言 这不是报错也不是警告，仅仅是告诉开发者下载它可以获得更好的开发体验。 使用 vue-cli 创建项目启动后，发现控制台默认打印了如下信息： 但就是不想让它控制台打印？一步步关掉它！ ## 下载Vue Devtools扩展以获得更好的开发体验 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools 关闭打印 打开项目 node_mo
Vue项目调试工具：vue-devtools安装包（免费）
05-15
Vue Devtools 是一个强大的开发者工具，专为 Vue.js 应用程序设计，它可以帮助开发者进行实时查看、调试和优化Vue应用的组件状态。这款工具是免费的，并且支持多种浏览器，如Chrome和Firefox。 在Chrome浏览器中，...
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
vue调试工具 （vue-devtools）
06-20
Vue.js 是一款流行的前端JavaScript框架，它用于构建用户...总的来说，Vue Devtools 是Vue开发者不可或缺的辅助工具，极大地提高了开发效率和调试体验。熟练掌握其用法，能够帮助开发者更好地理解和优化Vue应用程序。
vue-devtools(chrome vue 调试插件)
12-02
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
Vue.js devtools
04-21
Chrome and Firefox DevTools extension for debugging Vue.js applications.
Vue 代码如何进行调试
weixin_43841308的博客
09-18 5869
Vue 代码调试console1. 小白视角debugger浏览器调试推荐文章 初入职场，还是个前端小白，代码写不出来，师傅不在 小梦 vs 后端大兄弟：我运行了一个东西，一直出不来 后端大兄弟：我可以试一试断点，看哪里出错 ······ 后端大兄弟： 我好像不懂 如何打前端断点，都被webpack 重新封装过了 小梦：okok，是时候总结一番Vue代码如何进行调试 console 1. 小白视角 作为小白，日常最常使用的就是 console.log 输出数值 console.debug打印调试信息 在推
Download the Vue Devtools extension for a better development experience
s123l4的博客
01-10 1128
chrome警告问题：Download the Vue Devtools extension for a better development experience:
前端同学必备：教你如何安装、使用Chrome的vue-devtools插件
04-04 4551
Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。
2024年React进阶（一）：学习资料汇总_react 最新学习资料，前端开发基础
2401_84437170的博客
05-04 157
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件c=reactjs全网独播-价值千万金融项目前端架构实战。
vue2 基础入门
ClearloveYt的博客
07-03 2762
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
vue3调试工具是vue-devtools如何安装
05-11
要安装Vue.js 3的调试工具vue-devtools，您需要执行以下步骤： 1. 首先，您需要在浏览器中安装Vue.js 3的开发版本。您可以在Vue.js的官方GitHub存储库中找到开发版本的源代码。 2. 接下来，您需要将Vue.js 3的开发...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值