安装vue-devtools及其配置

最新推荐文章于 2024-05-20 14:28:57 发布
最新推荐文章于 2024-05-20 14:28:57 发布
阅读量296 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41505416/article/details/100636082
版权

安装vue-devtools及其配置

第一步：下载vue-devtools 插件（google有自带这个插件，可以直接在线安装）
第二步：安装插件的步骤 打开google浏览器——更多工具——扩展程序——然后直接将插件拖入当前页面并允许安装
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
第三步：点亮图标 之前先在vue项目工程中的main.js文件中添加Vue.config.devtools=true，然后按照下图操作，
在这里插入图片描述
在这里插入图片描述
第四步：控制台出现vue的图标（如果没有出现就使用F5刷新）
在这里插入图片描述
在这里插入图片描述

相逢一笑与君行
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
vue-devtools-dev.zip
04-03
7. **Vue实例和组件选项**：查看每个Vue实例及其配置，包括props、methods、computed等。 8. **错误和警告**：在浏览器控制台中捕获Vue相关的错误和警告，快速定位问题。 9. **自定义扩展**：对于开发者版本，可能...
关于Vue.config.devtools与Vue.config.productionTip
weixin_42418196的博客
11-30 7334
1） 类型：boolean 2）默认值：true (生产版为 false) 3）用法： 务必在加载 Vue 之后，立即同步设置以下内容（一般在main.js中） Vue.config.devtools = true 配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。 ...
如何在生产环境使用devtools？
weixin_46396391的博客
08-31 1474
一行代码在生产环境使用devtools
vite vue-cli 之vue3安装Vue devtools调试工具
weixin_48813932的博客
05-20 700
官方默认推荐的就是内置vite-plugin-vue-devtools安装使用和Vue.js devtools 使用安装
【Vue】全家桶之vue-devtools
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-08 7311
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
Vue学习笔记（一）
weixin_41325924的博客
03-23 1613
一、初始vue Vue开发文档https://cn.vuejs.org/v2/guide/直接用script引入 完整版(包含完整的警告和调试模式)： <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script> 压缩版(删除了警告)： <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js">
生产环境如何开启 devtools vue2/vue3
m0_53679031的博客
03-04 1323
vue生产模式如何调出开发者工具
vue调试工具，vue-devtools.rar
11-18
此文件配置了PostCSS插件及其设置。 7. **package.json**：这是Node.js项目的配置文件，包含了项目依赖、脚本命令、版本信息等。开发者可以使用`npm install`命令根据此文件安装所需依赖。 8. **jsconfig.json**：...
Vue-devtools 大揭秘：Vue3.X 和 Vue2.X 调试工具安装及使用指南
最新发布
06-19
4. **Vue 路由**：对于使用 Vue Router 的项目，Vue-devtools 在“Routes”面板中展示了当前路由信息，方便开发者调试路由配置和切换。 5. **性能分析**：在“Performance”面板中，可以记录组件的渲染和更新性能，...
vue调试插件，工具vue-devtools
04-24
`vue-devtools`的安装非常简单，适用于Chrome、Firefox等主流浏览器。对于Chrome，你可以直接从Chrome Web Store搜索并安装。不过，这里提供的似乎是一个离线安装包`nhdogjmejiglipccpnnnanhbledajbpd_6.5.0_chrome....
Vue项目全局配置粗讲
龙骑士-黎明的博客
12-07 883
大家好,我是龙骑士-黎明，今天给大家讲一下Vue项目的全局配置吧。 在vue官网中展示的全局配置共有9种,给大家介绍一下它们的作用。 silent type：Boolean ,defaultValue:false 用法:Vue.config.silent = true 作用：用于配置是否取消Vue的所有的日志与警告,当为true时,取消警告与日志。 optionMergeStrategies devtools Type:Boolean,defaultValue:true(生产版本为false).
devtools无法显示
weixin_42979149的博客
11-01 2034
devtoolls无法显示
Vue.js devtools
老李家的博客
03-04 455
发现 chrome 拓展 Vue.js devtools 那个图标亮了，但打开控制台没有 Vue 这个选项。 后面修改了项目入口文件： mian.js Vue.config.devtools = true;
Vue DevTools调试工具
Gavid0124的专栏
07-01 5606
因为工作要求，目前主要在用Vue.js技术栈做开发，调试是必不可少的，这里会用的Vue DevTools的调试工具，问题就出在这里，当用Vue DevTools做调试时，很多时候都不能用，提示没有监测到Vue，这让工作效率瞬间拉低了。 修正Vue DevTools 好了，开始正题，下面来说一下修正的方法。 先从官网把Vue DevTools下载下来（h
vue-devtools的安装与使用
miaomiaomiao514的博客
03-30 1120
vue-devtools的安装与使用 vue-devtools的安装 翻墙去chrome商店里搜索vue.js devtools安装 本人亲测快捷好使 下载添加chrome扩展插件的方法一直添加不上 vue-devtools的使用 在项目里添加Vue.config.devtools = true ...
关于devtools不能监测到vuex数据，版面显示No vuex store detected的问题；使用vue3时工具没有追踪到vuex
weixin_46092505的博客
07-28 4641
最终解决方法： 在store文件目录下的index.js中加入代码段Vue.config.devtools=true Vue.use(Vuex) Vue.config.devtools = true 效果立竿见影。 问题具体描述： 本来还能正常使用的，但是bug写着写着工具就开始监测不到数据了，将代码一步一步撤回还是可以恢复到正常的使用。 尝试过： 在main.js中加入同样的代码，有朋友的成功解决了，但是我的没有，也可以试试。 更换版本，试过6.0.0版本，3.4.x版本，发..
Vue DevTools可使用修正方法
王乐平 技术博客
04-14 1万+
因为工作要求，目前主要在用Vue.js技术栈做开发，调试是必不可少的，这里会用的Vue DevTools的调试工具，问题就出在这里，当用Vue DevTools做调试时，很多时候都不能用，提示没有监测到Vue，这让工作效率瞬间拉低了。修正Vue DevTools好了，开始正题，下面来说一下修正的方法。先从官网把Vue DevTools下载下来（https: //github.com/vuejs/vu
vue调试工具Devtools不出现的解决方式
热门推荐
przlovecsdn的博客
08-31 7万+
在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools） vue图标： 开发者工具： 扩展程序： 没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址 https:...
mac 安装vue-devtools
12-10
以下是在Mac上安装vue-devtools的步骤： 1.首先，确保你已经安装了Node.js和npm。如果没有，请先安装它们。 2.打开终端并输入以下命令来全局安装vue-cli： ```shell npm install -g vue-cli ``` 3.接下来，输入...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值