标签: vue-devtools

Vue devtools 检查在本地托管应用程序上不可用

当我运行 Vue 应用程序时,Vue devtools 扩展会检测到 Vue.js,但会抱怨:

Devtools 检查不可用,因为它处于生产模式或被作者明确禁用。

我在本地使用yarn serve运行的应用程序提供服务vue-cli-service serve

vue: 3.0.0
vue devtools: 6.0.12
@vue/vue-cli: 5.0.1
@vue/vue-cli-service: 4.5.14
node: 16.14.0
yarn: 1.22.4
Chrome:  98.0.4758.102
Run Code Online (Sandbox Code Playgroud)

Vue 开发工具在以下情况下可以工作:

  • 另一个开发人员从干净的本地存储库在 Chrome 中运行该应用程序(与上述所有内容的版本相同)
  • 我在 Chrome 中创建并运行一个新的 Vue 应用程序 (vue create)

如果出现以下情况, Vue devtools不起作用(相同的错误消息):

  • 我从新的本地存储库运行我的应用程序
  • 我清除了 Chrome 中的所有浏览数据
  • 我添加vue.config.performance = true到我的main.ts文件中
  • 我添加--mode=development到我的vue-cli-service build命令中
  • 我使用 Edge (Chromium) 而不是 Chrome
  • 我将 vue 更新到 3.0.14
  • http://localhost:8080我通过主机文件别名访问该应用程序https://myalias:8080

AFAIK 我从未做过任何强制生产构建或禁用 …

google-chrome vue.js yarnpkg vue-devtools

5
推荐指数
1
解决办法
5864
查看次数

Vue2 + Vuex 提交不提交(没有 Vue devtools)

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

我正在尝试做的事情

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

出了什么问题

在我什至调度操作以从我的组件提交新对象之前(我正在通过 mapActions 访问该操作),列表中任何现有对象中的某些属性都会更新为与我的组件中的输入/v-models 相关的值. 正如我的代码如下所示,我知道对象的反应性是一个问题,所以我Vue.set(...)根据文档使用(突变遵循 Vue 的反应性规则

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

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

我再次为可能是基本问题的问题道歉,但我已经看到其他一些人有类似的问题,但没有书面解释我们遗漏了什么......

初始状态

const state = {
  quotes: {}
}
Run Code Online (Sandbox Code Playgroud)

突变

mutations: {
  [types.ADD_QUOTE] (state, payload) {
    Vue.set(state.quotes, payload.id, payload)
  }
}
Run Code Online (Sandbox Code Playgroud)

行动

actions: {
  addQuote ({ commit }, payload) {
    commit(types.ADD_QUOTE, payload) 
  }    
}
Run Code Online (Sandbox Code Playgroud)

成分

<template>
  <div class="quote-block">
    <label>price</label>
    <input type="text" v-model="quote.price">
    <label>id</label>
    <input type="text" v-model="quote.id">
    <!-- Just displaying props below -->
    <div>{{ quote.item }}</div>
    <div>{{ quote.vendor …
Run Code Online (Sandbox Code Playgroud)

vuex vuejs2 vue-devtools

4
推荐指数
1
解决办法
3314
查看次数

Vue Devtools不在本地工作

Vue Devtools适用于所有在线演示/示例,但不适用于我的本地页面.即使有以下情况,Vue Devtools图标仍为灰色("未检测到Vue.js").为什么?

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app"></div>
  <script>    
    Vue.config.devtools = true;
  </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

vue.js vuejs2 vue-devtools

4
推荐指数
1
解决办法
2753
查看次数

Safari的Vue-devtools扩展

我发现Firefox和Safari处理(至少)我的一个Vue属性之间存在不一致的地方,并且能够看到其中的内容将非常有帮助。谢谢!

safari macos vue.js vuejs2 vue-devtools

3
推荐指数
2
解决办法
8075
查看次数

在Vue开发工具中未检测到Vuex存储

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

Vue.config.devtools = true
Run Code Online (Sandbox Code Playgroud)

我正在使用以下版本:

"vue": "^2.5.2"
"vuex": "^3.0.1"
"vuetify": "^1.0.0"
Run Code Online (Sandbox Code Playgroud)

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

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

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

任何指针表示赞赏。

google-chrome vue.js vuex vue-devtools

3
推荐指数
1
解决办法
3010
查看次数

vue-devtools始终与nuxt.js禁用

我正在使用nuxt.js v2.3.0创建一个新项目。当我npm run dev在我的想法控制台中运行时,所有内容都能正确编译,但是当我转到页面时,出现以下错误: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:

const pkg = require('./package');

module.exports = {
  mode: 'spa',

  dev: true,
  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', …
Run Code Online (Sandbox Code Playgroud)

vue.js nuxt.js vue-devtools

3
推荐指数
2
解决办法
2772
查看次数

Vue 开发工具中组件旁边的性能数字是多少?

有人对 Vue 开发工具中的某个功能有见解或资源吗?在组件窗格上,它显示了我的组件,然后显示了这些红色和黄色的小方块,以及我假设的组件的性能。

当我第一次加载应用程序时,它们不会出现,但例如我更新了一个文本输入组件,当用户输入新值时,该组件会验证其自己的格式。这会更新 Vuex 存储和/或计算属性,但令我困惑的是为什么整个事情像一棵愤怒的圣诞树一样亮起来。不相关的组件显示这些性能数据。

当我检查 Vuex 历史记录中的突变时,我只更新一项。

在询问之前我尽了最大努力四处搜索,但找不到任何有关此功能的信息。一般来说,Vue 开发工具没有太多好的资源,这有点令人惊讶,因为它们通常都有很好的文档。

在此输入图像描述

vue.js vue-component vue-devtools

3
推荐指数
1
解决办法
1885
查看次数

Where has Vue Devtools's Time Travel Debugging feature gone?

It's been a while since I worked with VueJS (2 or so years ago). I wanted to get back to working on an old VueJS 2.6 app, and I'm having trouble finding the Time Travel Debugging feature of Devtools for Vuex.

Here you can see what Time Travel Debugging is supposed to look like:

时间旅行调试

But now at least with Devtools 6.1.4, I'm having trouble finding that feature. I see the Vuex state, but I can't find: the list of mutations, …

vue.js vuex vue-devtools

2
推荐指数
1
解决办法
1697
查看次数

如何在vue2-google-maps中填充标记

我对整个JS真的很陌生,我也不了解很多代码,这是一个包:https : //github.com/xkjyeah/vue-google-maps

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

在此处输入图片说明

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

 showRoute(){

this.fetchDeliveries() ;    


//I want then to populate the map with the marker with the given lat, lng in 
 the response
        }
Run Code Online (Sandbox Code Playgroud)

在它上,然后

javascript vue.js vue-devtools

1
推荐指数
1
解决办法
4669
查看次数