解决Vue devtools插件数据变化不会自动刷新

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.1k累计阅读 1.2k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄15年

关注

原创 2024-05-09 10:14:45 1.1k 阅读 AI 写同款· GEO 优化 ›

vue.js.devtools插件不能进行调试, 提示: Devtools inspection is not available... vue.js.devtools不能进行调试的问题, 插件信息提示: Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author. 学习前端中遇到的小麻烦! 阅读详情

我们使用devtools插件在监测vuex中表单或自定义组件的数据，发现页面数据发生变化后，但是devtools中还是老数据，必须手动点击devtools刷新才能拿到最新的数据。很烦！

解决方案：
打开chrome的设置，向下翻，找到以下截图的选项打勾，就可以自动加载数据了。

设置完以后，重新打开浏览器，就可以了

收录于

前端开发

当前文章被收录于：

前端开发

18 篇文章 1 人学习

主要是JS、HTML、CSS实际使用经验。减少在网上查找相关技术blog时间，提高开发效率。

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#vue.js #前端

Vue DevTools使用源码编译生成插件然而，有时候我们可能需要对DevTools做一些定制化的修改，或者仅仅是出于学习的目的，想了解它是如何工作的。打包则是指将编译后的文件整合在一起，形成一个完整的浏览器插件包。通过以上步骤，你现在已经能够从源码开始编译Vue DevTools，并根据自己的需求进行定制了。在实际工作中，编译和打包Vue DevTools不仅可以帮助我们更好地理解其内部工作机制，还能让我们根据项目需求对其进行定制。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。阅读详情

相关推荐

前端同学必备：教你如何安装、使用Chrome的vue-devtools插件

Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。

7002

解决Vue devtools插件state数据变化不会自动刷新

我们使用devtools插件在监测vuex中state数据，发现数据发生变化后，不会自动更新，页面数据已经最新了，但是devtools中还是老数据，必须手动点击devtools刷新才能拿到最新的数据。

陈福国的博客 2341

vue2、vue3开发工具 dev tools，页面数据更新，data里或者是setup的数据不更新，需要更换增强版插件

页面数据更新，但是data或者setup里面的数据不更新，卸载原来的开发插件，卸载浏览器都无法解决。只有下载该插件才能解决。

Chrome DevTools浏览器开发者模式（安卓手机/移动端调试webview/查看当前url）、electron、Vue DevTools、vs和DevTools调试、插件

目录ElementsStylesDOM结构增删属性模拟元素的伪状态，方便调试Computed LayoutEvent ListenersNetworkApplication资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）Source 调试Page:资源目录Content scripts: 插件Snippets: 便捷测试https://developer.chrome.com/docs/devtools Ancestors 是否

luemeon的博客 8093

别再只会调速度了！用STM32的定时器中断精准控制伺服电机转角（避坑指南）

本文详细介绍了如何利用STM32的定时器中断和PWM输出实现伺服电机的精准转角控制，避免常见的速度控制误区。通过硬件配置、脉冲计数逻辑和优化技巧的实战讲解，帮助开发者掌握高精度位置控制方法，适用于工业自动化和机器人控制等场景。

weixin_42531163的博客 414

ADS学习笔记 1. 功率放大器设计

基于ADS2023 update2的学习笔记1.功率放大器设计

u014087103的博客 1万+

关于自己写的vue项目打开控制台后使用Vue工具devtools点击root无反应，甚至没有root的问题

Vue工具devtools点击root无反应，甚至没有root的问题

jdjjidjd的博客 3581

SpringBoot+VUE3实战：如何用WebSocket搞定网页端语音通话（避坑指南）

本文详细介绍了如何使用SpringBoot和VUE3结合WebSocket技术实现网页端语音通话功能。从环境配置、WebSocket服务端实现到前端音频处理，提供了完整的开发指南和避坑建议，帮助开发者快速构建稳定高效的实时语音通信系统。

weixin_29021195的博客 221

Vue devtools工具中Vuex的State不能立即变化

想必有人跟我一样遇到这种情况，页面数据更新，但是State不能立即变化，如下： counter1不能响应式变化，解决方法很简单，先点击红点的位置然后在设置里面打开这个

sexnmaa的博客 1379

【GPIO模拟串口通信协议】

由于这段时间搞了个安卓相关的项目，需要和安卓进行Uart通信。但是选用的芯片并没有自带uart功能，所以在充分评估项目后，考虑波特率不高的情况下，决定使用GPIO去模拟串口通信协议了。

学海无涯苦作舟 2638

基因家族扩张收缩分析可视化(CAFE5)

CafePlotter 是一个用于可视化 CAFE5 基因家族扩张收缩分析结果的 Python 工具

xuzhougeng blog 3627

【Vue devtools】Vuex中State不能立即变化

Vue devtools会出现修改vuex后，对应面板数据不更新的情况，可以用通过以下方式解决。注意：配置修改后，要重新启动chrome的devtools 打开下面的即可

kaosini的专栏 1776

Fanuc机器人的坐标变换矩阵的研究2

一、Funuc用户坐标系的介绍二、用户坐标系与世界坐标系的坐标转换三、以用户坐标系1为基础旋转变换后的用户坐标系四、关于点的WPR的含义 4.1：点在用户坐标系和世界坐标系下的坐标关系 4.2 通过转换矩阵返回去推导WPR

qq_34047402的博客 1521

解决【Vue devtools】Vuex中State只能手动刷新

如何实现vue-devtools的自动刷新state

weixin_52954097的博客 412

PayPal支付集成完全指南：开源库实践

本文介绍了如何从零开始集成PayPal支付功能。首先概述了PayPal提供的多语言SDK和开源库，包括PHP、Python、Node.js等版本。然后详细说明了准备工作，包括注册开发者账号、获取API凭证和使用沙盒环境测试。文章以Node.js为例，演示了安装SDK、基础配置和实现支付流程的完整代码，包括创建订单和捕获支付两个核心功能。最后提及了订阅支付等高级功能，为开发者提供了完整的支付集成方案。通过清晰的代码示例和步骤说明，帮助开发者快速实现PayPal支付功能集成。

2501_93501927的博客 1257

YOLOv11改进缝合注意力 | 深度优化的BiFormer模型-结合BiLevel Routing Attention与深度可分离卷积的创新应用（附代码）

YOLO（You Only Look Once）系列目标检测算法一直以来都是计算机视觉领域的热门选择。随着YOLOv11的发布，它在许多实际应用场景中取得了显著的性能提升。然而，面对日益复杂的目标检测任务，单纯依赖卷积神经网络（CNN）在某些情况下已经显得力不从心，特别是在处理小尺度、密集目标以及遮挡目标时，卷积操作的局部性限制了模型的表达能力。

一键难忘的博客 715

Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决

这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题所需的所有文件，链接：https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码：2yvc 一、vue.js插件下载下载地址：vue.js插件下载；点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发

goog_man的博客 6万+

最新的sdio 4.0 spec 协议标准带书签高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf：最新的sdio 4.0 spec 协议标准带书签高清完整PDF版，包括SDIO 接口的外设，SDIO 接口官方协议等。

【亲测免费】 Vue开发工具vuejs-devtools安装教程及常见问题解决

Vue开发工具vuejs-devtools安装教程及常见问题解决【下载地址】Vue开发工具vuejs-devtools安装教程及常见问题解决 Vue开发工具vuejs-devtools安装教程及常见问题解决本文详细介绍了如何安装Vue开发工具vuejs-devtools，并提供了常见问题的解决方法 ...

gitblog_06590的博客 1165

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

vuejs专题二：安装Vue Devtools

安装Vue Devtools什么是Vue Devtools一、安装nodejs二、下载安装Vue Devtools插件附录使用淘宝 NPM 镜像相关参考什么是Vue Devtools Vue Devtools是基于nodejs开发的扩展插件，在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。安装完成后，在Chrome浏...

木子叶的奔跑 3133

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

Chrome浏览器安装Vue插件vue-devtools

vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。

A_aspectJ的博客 8491

图文详解vue.js devtools插件使用方法

本文重点介绍Vue.js devtools使用方法，提供chrome插件直接安装和源代码安装两种方法，你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。

xsq123的专栏 4万+

【Vue】生态工具链（Vue DevTools、VSCode插件）

Vue.js 作为一个流行的前端框架，拥有丰富的生态工具链，这些工具能显著提高开发效率和代码质量。本文将深入介绍 Vue DevTools 和 VSCode 插件这两类核心开发工具。// 创建自定义事件// 在父组件中监听// 在 VSCode 中添加自定义代码片段"body": ["","",""," $3","})","","$4","</style>"],"description": "Vue 3 组件使用 <script setup>"

Guiat的博客 2358

Vue Devtools下载使用

Vue Devtools下载使用 Vue Devtools介绍在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。下载安装通过官方下载渠道（可跳过）访问Vue2.x官网https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools 访问Vue3.x官网https://v3.cn.vuejs.org/guide/installation.html#vue-devto

已经天黑了的博客 1万+

Chrome安装Vue插件vue-devtools

Vue插件vue-devtools是一款由Vue.js核心团队成员Guillaume Chau和Evan You开发的浏览器扩展程序，用于增强Vue开发者的开发体验。vue-devtools提供了许多有用的功能，如显示当前路由和组件信息、查看组件状态、浏览事件和状态的历史记录、编辑组件状态等。此外，vue-devtools还支持与Vuex和Pinia等状态管理库集成，方便开发者查看和管理应用的状态。

Python老吕的博客 1419

我和谷歌共成长——前端必备插件Vue.js devtools

对于我们开发者而言，Google插件非常便捷与易于生活，主要原因还是Google插件的多样性和全面性。对于前端开发者来说,大部分都是使用vue来开发那么有没有一款插件能让vue的开发效率变高下面,我来介绍一下前端必备插件Vue.js devtoolsVue.js devtools有助于我们开发,可以极大的提升我们的开发速率在开发过程中,我已经深深地喜欢上这个插件,为了提供了许多方便。...