问题标签 [vue-devtools]

我正在构建一个 chrome 扩展，并使用 vue-cli webpack 配置。我希望在运行npm run build命令后能够使用 vue devtools 。

我尝试添加Vue.config.devtools = true;main.js，或更改NODE_ENV: '"production"'为NODE_ENV: '"development"'，但 vue devtools 仍然没有出现。

如何在生产模式下启用 vue devtools？

在下面的代码中，getWidth事件处理程序（在methods对象中定义）更新data.width属性。随着它的更新，该变量width应该在 VueJS 的 Chrome 插件中实时显示。

但是，该实时更新并未显示在 Vue DevTools 中。我不确定代码是否有问题或者我做错了什么。插件不是问题，因为我也在 Firefox 中进行了测试。

HTML

JS

我在博客后端的一个部分（不是 SPA）上使用 VueJS 2.5.3，该部分进行 API 调用以检查附加到帖子的特色图像。

如果找到，它会使用一个子组件来显示图像。问题是 API 调用成功后子组件没有渲染，因此图像对象也没有传递给它。

正如你在这个 GIF 中看到的，子组件没有渲染<!---->，我有一个v-if检查图像是否存在。但是，如果我单击 Vue DevTools 内的子组件，子组件会按预期呈现并显示图像。

我的问题是为什么只有在 Vue Devtools 中单击子组件后才会呈现子组件？当您单击组件时，Vue Devtools 是否会触发某种事件？

这是子组件：

这是父组件和子组件的代码链接：

我发现 Firefox 和 Safari 如何处理我的一个（至少）我的 Vue 属性之间存在不一致，能够看到其中的内容会非常有帮助。谢谢！

当我使用 webpack 时，我无法访问 window.Vue，但是 vue devtool 仍然可以判断网页是否使用 vue，无论是否处于开发模式。

Angular 和 react 也有它们的开发工具，我相信它们也可以完成这项工作。

我想知道，该工具是否设法通过其他方法访问 Vue 对象？还是与 webpack 有关？

我正在尝试使用 Vuex 完成一项基本任务，但由于某种原因它无法正常工作，经过广泛搜索后，我非常感谢任何帮助。

我正在尝试做的事情：

使用新属性（对象）更新我商店中的对象列表（对象）。

出了什么问题：

在我什至分派操作以从我的组件提交新对象之前（我正在通过 mapActions 访问操作），列表中任何现有对象中的某些属性都会更新为与我的组件中的输入/v-models 相关联的值. 正如我的代码在下面显示的，我知道对对象的反应是一个问题，所以我Vue.set(...)按照文档使用（Mutations Follow Vue's Reactivity Rules）

为什么我不认为我在做一些完全愚蠢的事情......（但可能是错的）

当我在 DevTools 中检查突变时，突变按预期记录，当我按下“提交”/“全部提交”时，列表中的现有对象不再响应输入中的更改。这显然是我期望发生的行为，因为该操作实际上应该将更改提交给状态。然而，为什么它不能在代码中工作，而只能在 devtools 中工作？

对于可能是一个基本问题，我再次道歉，但我看到其他一些人有类似的问题，并且没有书面解释我们缺少什么......

初始状态

突变

行动

零件

总而言之，在 devtools 中，我看到了我设置的对象的值id和price变化state.quotes——它们显然与我的组件的 v-model 相关quote.price联quote.id。只有当我在 devtools 中“全部提交”时，这些对象的属性才会停止更改。为什么commit动作中的方法不进行这些提交？

我有一个在 laravel valet 上运行的 laravel 项目，但我无法使用 vue 开发工具来处理它。

这是它所说的：

在此页面上检测到 Vue.js。Devtools 检查不可用，因为它处于生产模式或被作者明确禁用。

我已经去管理扩展并选择了允许访问文件 URL。

任何帮助将不胜感激！

我对整个 js 真的很陌生，我不太了解代码。这是包：https ://github.com/xkjyeah/vue-google-maps

这必须在明天提交。但这是我到目前为止所做的。当我点击按钮时。我必须在地图上显示标记。

这是单击具有 @click="showRoute" 的按钮后在我的 devtools 中的结果

在它上面然后

我正在实现一个包含多个 Vue 实例的网页。

我有一个简单的问题：是否可以使用 vue-devtools 来命名和显示它们？

实际上我的控制台显示这样的实例，很难区分它们：

Vue Devtools适用于所有在线演示/示例，但不适用于我的本地页面。即使有以下情况，Vue Devtools图标仍然是灰色的（“未检测到 Vue.js”）。为什么？