问题标签 [vue-devtools]

我正在开发一个 vue 应用程序，它有一个商店模块，在某些情况下每秒发出 50 个事件。这些事件导致每次都提交 vuex 突变。这使得在其他地方很难使用 vue-devtools，因为我看不到任何其他事件或突变，并且在半分钟内 vue-devtools 变得无响应并崩溃。

我想知道是否有办法在 vue-devtools 中排除某些 vue 事件和 vuex 突变。

有谁知道如何做到这一点？

最好的，克里斯蒂安

出于非常具体的原因，我在生产中将 vue 开发工具设置为 true。

我正在使用以下版本：

虽然我可以看到组件和事件，但未检测到 Vuex 存储。

我曾尝试将 vuex 版本降级为 2.3.1 和 2.4.x，但没有帮助。这是我提到的链接 - https://github.com/vuejs/vue-devtools/issues/405

注意 - 商店运作良好，只是我无法在 Vue 开发工具中查看它。

任何指针表示赞赏。

当我的鼠标光标进入和离开我的 VueJS 组件时，会分别调用以下方法。

当光标进入和离开我的组件时调用的方法：

预期，当我的光标进入和离开组件时，我的控制台看起来像这样（每次都发出一个事件）：

然而，真正奇怪的是，在 Vue 开发工具中，每次我的光标进入和离开我的组件时都会发出重复的事件：

鉴于这些相互矛盾的信息，我不确定该相信什么。刷新页面有时会消除开发工具中的重复事件，但我总是在我的控制台中获得单个、独特的事件，这是我想要的行为。

有谁知道这里发生了什么，我应该接受什么作为真相的来源？

下面是在 main.js 文件中声明和初始化 Vue 实例的方式：

请注意，这个特定组件正在两个不同的路由（“dashboard”和“home”）上重用，它们都通过以下代码保持活动状态。

此外，由于这两条路由保持活动状态并被缓存，未能关闭 $off 事件发射器和侦听器不应该是重复的原因（至少我认为不应该）。

编辑 1：我在我的项目的每个目录中都找到了“鼠标输入”和“鼠标左键”，我可以确认这两个事件仅从我在这篇文章中引用的 Vue 组件发出。

编辑 2：为了帮助调试，我在最顶层的组件 (App.vue) 上放置了一个侦听器，以查看它是否接收到两次事件（请参阅下面代码片段中创建的挂钩）。我可以确认它也只收到一次事件。我还粘贴了完整的 App.vue 文件，因为上面的示例主要是为了说明我正在保持“仪表板”和“家”的活力。

正如预期的那样，App.vue 接收到一次事件（见下文）；但是，我仍然在 Vue 开发工具中收到重复的事件 :(

我已经安装了 VueJS chrome 扩展：

VueJS 铬扩展

但我发现它毫无用处，除非我遗漏了什么。所以我在这里发布了这个问题，如果有人可以提供我所缺少的。

我设置了这个 vuejs 项目：

github上的卡祖

这个项目有几个 vue 组件，但是这些组件中的大多数都没有出现在 vuejs chrome 扩展中。这是屏幕截图：

Im using laravel 5.2

Package.json

I tried both firefox and google chrome extension which says its disabled This is the line that restrict this

to my two sense this must NOT happen. Steps I took till now :

1- remove node_models install it again using npm install

2- replacing the vue file with a version provided in Vuejs.org

the icon is there colorful but no Veo devtool, when i use CDN on top of my header instead i get the devtools! What is causing this conflict! Im confused thanks for any help

我正在尝试从教程中设置此功能： https ://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md

但出现错误

在我的 vue.config.js 中（基于 vue cli 3.0 的项目）

UPD。如果没有此代码，问题仍然存在。UPD2。

我正在尝试在 .env 文件中设置 EDITOR 变量

或者使用 vue.config.js

但问题依然存在

什么可能导致这个问题？我该如何解决这个错误？

我正在使用 nuxt.js 创建一个新项目v2.3.0。当我npm run dev在我的 IDE 控制台中运行时，一切都正确编译，但是当我转到该页面时，我收到以下错误：Nuxt.js + Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

这是我的nuxt.config.js文件：

如果我在生产模式下运行，那么我可以理解，但我不是。我希望 vue-devtools 能够正常运行。

我一直在尝试使用命令行“vue-devtools”命令为 Vue.js 设置移动开发环境。为了在移动设备上访问我的本地主机，我在我的桌面和移动设备之间设置了反向共享。

“Vue 开发人员工具”窗口卡在“等待连接...”和“添加：”页面上，并且在 Chrome 开发工具中我收到错误消息：

'GET http://localhost:8098/socket.io/?EIO=3&transport=polling&t=MWodKWT net::ERR_CONNECTION_REFUSED'</p>

...每 5-7 秒。

我已经阅读了所有文档和回购对话，并在 SO 上寻找了类似的问题。我从来没有用过，也不知道任何关于 SocketIO 的东西，我也没有在我的项目中使用它。它是在 Vue-devtools shell 中实现的，所以我什至不知道如何开始调试它。

一旦我知道发生了什么，我将提供所需的任何其他信息，并清理问题以更好地适应格式。（当我在黑暗中挣扎时，很难保持格式）

我正在按照此处所述的教程进行操作：https ://nativescript-vue.org/en/docs/getting-started/vue-devtools/

我已经启动并运行了开发工具和应用程序，但是当应用程序已经在我的 android 模拟器上运行时，开发工具显示“等待连接...”。

我怎样才能解决这个问题？

大约一周前，nativescript 失去了与 vue devtools 对话的能力。在 github 上查看此问题。运行此repo 以重现-- （您需要将host变量更改为main.js计算机的网络地址）。

以下是我尝试过的一些事情：

1. 几种不同的网络，包括有线、公共和私人 wifi 以及移动热点
2. 主机设置为“localhost”并且主机被排除在外的本地 Android 模拟器。
3. 具有最新 Android 操作系统的物理 android 设备三星 S9
4. 从nativescript-vue-devtools包中获取代码并添加控制台日志记录。connect_error -> reconnect连接到循环中的 devtools 套接字时似乎卡住了。不幸的是，连接错误事件的参数为空，因此没有明确的失败原因。

这是该package.json项目的内容——在使用 CLI 初始化项目后，它们都是默认值：

我还尝试使用最新版本的 nativescript toast 和 vue devtools 进行另一个项目，结果相同——vue devtools 永远不会从默认屏幕更改。

我可以使用带有 nmap 的 termux 从我的调试设备进行扫描，并查看我的 IP/端口是否打开。我还能够制作一个非常基本的网站，添加一个 vue 实例，并粘贴开发人员工具 UI 中显示的脚本标签，以表明 devtools 工作正常。

Nativescript：您正在失去用户对这个问题做出原生反应（请参阅上面问题链接中的评论）。Vue devtools 刚刚发布了一个新版本，宣传更好的 nativescript 支持，但我们完全无法尝试！

由于 Nativescript 的社区已经搬到这里，我真的只是希望引起开发人员的注意来解决这个问题。如果其他人能够提供解决此问题的解决方法或解决方案，也将不胜感激。

提前致谢！