Vue.js devtools no longer showing the Vue tab in my console.

timmeijers commented 3 weeks ago

Since today the devtools in my console is no longer showing up. however the extension says: "Vue.js is detected on this page." Im not sure if this is related to the release done today, but I have checked with my 3 colleagues, and they were all investigating the same issue without knowing we all had the issue. And the branches where it worked yesterday don't work today, so its not our code I assume...

GTCrais commented 3 weeks ago

Same here. In one project it's showing up, in another one it's not. Both running Vue 3 and Vite.

ChrisColpittsPHP commented 3 weeks ago

We are also experiencing the same issue

daniel-simplyphp commented 3 weeks ago

+1

ahmed-ben10 commented 3 weeks ago

+1

timmeijers commented 3 weeks ago

Same here. In one project it's showing up, in another one it's not. Both running Vue 3 and Vite.

I have asked, it is not working on our new Vue3 + Vite project nor our Vue3 + Webpack old project.

webfansplz commented 3 weeks ago

Can anyone help provide a mini repo 🙏?

timmeijers commented 3 weeks ago

I'm afraid i do not have the time to create project, and our current projects are private, but I'm willing to help you figure it out of you give me specifics to try. Or supply a chrome extension zip from an earlier version, to pinpoint which version worked.

webfansplz commented 3 weeks ago

I'm afraid i do not have the time to create project, and our current projects are private, but I'm willing to help you figure it out of you give me specifics to try. Or supply a chrome extension zip from an earlier version, to pinpoint which version worked.

I'll follow up on this issue (but unfortunately I can't reproduce it now), and if anyone who has this issue wants devtools to work right away, I think we can use v6 version, we officially released the v7 version today.

webfansplz commented 3 weeks ago

Not limited to provide a mini repo, any additional project information would be appreciated 🙏. For example, vue.js version. Whether the project is embedded in the iframe (see: #498 ), whether multiple vue devtools version extensions are installed at the same time, etc.

frufin commented 3 weeks ago

Hi, Same problem today using vue-cli 3 and Vue 2.7

buglavecz commented 3 weeks ago

webfansplz commented 3 weeks ago

BTW, The v7 version of devtools only supports Vue3. If your application is still using Vue2, please install the v6 version. If you're still using v5 version, you can install it here. See https://devtools.vuejs.org/guide/migration

timmeijers commented 3 weeks ago

We are using Vue3 for both our projects and i can confirm that v6 is indeed working. At least now i can keep working towards my deadline. I hope someone can supply you a repo to verify and test.

webfansplz commented 3 weeks ago

How many ppl are using Vue3 but can't display devtools panel? Leave a comment at 👀 . Leave a comment at 😕 if the devtools panel doesn't displayed on vue2 (as expected, v7 only supports vue3).

webfansplz commented 3 weeks ago

I found many Vue3 projects on GitHub to try to reproduce the issue that the Vue tab didn't display, but unfortunately, I couldn't reproduce it. So, if anyone is facing this issue in a vue3 project, providing a mini repo would be appreciated 🙏

yyx990803 commented 3 weeks ago

Also note because the extension is technically a different one now, the Vue tab may have changed its position in the devtools tabs and therefore hidden under the expand button (especially if you previously manually moved it to the front):

GTCrais commented 3 weeks ago

Also note because the extension is technically a different one now, the Vue tab may have changed its position in the devtools tabs and therefore hidden under the expand button (especially if you previously manually moved it to the front)

No, this is not the case. The Vue tab is just not displaying at all in Chrome. It still works in Firefox, where the version of the extension is 6.6.3

webfansplz commented 3 weeks ago

Also note because the extension is technically a different one now, the Vue tab may have changed its position in the devtools tabs and therefore hidden under the expand button (especially if you previously manually moved it to the front)

No, this is not the case. The Vue tab is just not displaying at all in Chrome. It still works in Firefox, where the version of the extension is 6.6.3

Can you provide more information? Vue version, snapshot, or something specific about the project.

GTCrais commented 3 weeks ago

I can't give you repo access, but I can paste our package.json and vite.config.js if that helps:

package.json

{
    "name": "foobar",
    "version": "1.1.0",
    "private": true,
    "type": "module",
    "scripts": {
        "preinstall": "npx only-allow pnpm",
        "dev": "vite --host",
        "build": "vite build",
        "lint": "eslint --ext .vue --ignore-path .gitignore --fix resources",
        "format": "prettier .  --write"
    },
    "engines": {
        "node": "^20.13.1"
    },
    "dependencies": {
        "@casl/ability": "^6.7.1",
        "@casl/vue": "^2.2.2",
        "@ckeditor/ckeditor5-basic-styles": "^41.4.2",
        "@ckeditor/ckeditor5-build-decoupled-document": "^41.4.2",
        "@ckeditor/ckeditor5-essentials": "^41.4.2",
        "@ckeditor/ckeditor5-font": "^41.4.2",
        "@ckeditor/ckeditor5-link": "^41.4.2",
        "@ckeditor/ckeditor5-paragraph": "^41.4.2",
        "@ckeditor/ckeditor5-table": "^41.4.2",
        "@ckeditor/ckeditor5-theme-lark": "^41.4.2",
        "@ckeditor/ckeditor5-vue": "^5.1.0",
        "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
        "@fortawesome/fontawesome-free": "^6.5.2",
        "@he-tree/vue3": "^1.2.9",
        "@highlightjs/vue-plugin": "^2.1.2",
        "@mdi/font": "^7.4.47",
        "@pdftron/webviewer": "^10.9.0",
        "@popperjs/core": "^2.11.8",
        "@sentry/vite-plugin": "^2.16.1",
        "@sentry/vue": "^8.9.1",
        "@syncfusion/ej2-base": "^26.1.35",
        "@syncfusion/ej2-data": "^26.1.35",
        "@syncfusion/ej2-icons": "^26.1.35",
        "@syncfusion/ej2-navigations": "^26.1.35",
        "@syncfusion/ej2-vue-base": "^26.1.35",
        "@syncfusion/ej2-vue-buttons": "^26.1.35",
        "@syncfusion/ej2-vue-calendars": "^26.1.35",
        "@syncfusion/ej2-vue-dropdowns": "^26.1.35",
        "@syncfusion/ej2-vue-grids": "^26.1.35",
        "@syncfusion/ej2-vue-inputs": "^26.1.35",
        "@syncfusion/ej2-vue-layouts": "^26.1.35",
        "@syncfusion/ej2-vue-lists": "^26.1.35",
        "@syncfusion/ej2-vue-navigations": "^26.1.35",
        "@syncfusion/ej2-vue-pivotview": "^26.1.35",
        "@syncfusion/ej2-vue-popups": "^26.1.35",
        "@syncfusion/ej2-vue-richtexteditor": "^26.1.35",
        "@syncfusion/ej2-vue-schedule": "^26.1.35",
        "@syncfusion/ej2-vue-splitbuttons": "^26.1.35",
        "@vitejs/plugin-vue": "^5.0.5",
        "@vitejs/plugin-vue-jsx": "^4.0.0",
        "@vojtechlanka/vue-tags-input": "^3.1.1",
        "@vueform/toggle": "^2.1.4",
        "@vuelidate/core": "^2.0.3",
        "@vuelidate/validators": "^2.0.3",
        "@zanmato/vue3-treeselect": "^0.2.0",
        "autoprefixer": "^10.4.4",
        "axios": "^1.7.2",
        "axios-mock-adapter": "^1.20.0",
        "bootstrap": "^5.3.3",
        "bootstrap-vue-next": "^0.19.0",
        "ckeditor5": "^43.0.0",
        "clipboard": "^2.0.8",
        "core-js": "^3.37.0",
        "cross-env": "^7.0.3",
        "deepmerge": "^4.2.2",
        "dropzone": "^5.9.3",
        "helper-js": "^3.1.5",
        "highlight.js": "^11.9.0",
        "javascript-time-ago": "^2.3.10",
        "jszip": "^3.10.1",
        "laravel-echo": "^1.16.1",
        "laravel-vite-plugin": "^1.0.4",
        "less": "^4.1.2",
        "line-awesome": "^1.3.0",
        "lodash": "^4.17.21",
        "mitt": "^3.0.1",
        "moment": "^2.29.1",
        "npm": "^10.8.1",
        "nprogress": "^0.2.0",
        "object-path": "^0.11.8",
        "only-allow": "^1.2.1",
        "perfect-scrollbar": "^1.5.5",
        "pinia": "^2.1.7",
        "pinia-plugin-persistedstate": "^3.2.1",
        "pusher-js": "^8.3.0",
        "socicon": "^3.0.5",
        "splitpanes": "^3.1.5",
        "stream-browserify": "^3.0.0",
        "sweetalert2": "11.11.1",
        "timers-browserify": "^2.0.12",
        "typescript": "^5.4.5",
        "unplugin-icons": "^0.19.0",
        "unplugin-vue-components": "^0.27.0",
        "uuid": "^9.0.1",
        "v-resize-observer": "2.1.0",
        "vite": "^5.4.10",
        "vite-plugin-chunk-split": "^0.5.0",
        "vite-plugin-compression2": "^1.1.1",
        "vite-plugin-static-copy": "^1.0.5",
        "vue": "3.4.38",
        "vue-axios": "^3.4.0",
        "vue-fullscreen": "^3.1.1",
        "vue-global-events": "3.0.1",
        "vue-google-autocomplete": "^1.1.2",
        "vue-howler": "^0.7.0",
        "vue-i18n": "^9.13.1",
        "vue-infinite-loading": "3.0.0-alpha.0-0",
        "vue-inline-svg": "^3.1.3",
        "vue-material-design-icons": "^5.0.0",
        "vue-multiselect": "^3.0.0",
        "vue-router": "^4.3.3",
        "vue-select": "^4.0.0-beta.6",
        "vue-swatches": "^2.1.1",
        "vue-toastification": "^2.0.0-rc.5",
        "vue-validate": "^1.0.1",
        "vue3-avatar": "^3.0.0",
        "vue3-perfect-scrollbar": "^2.0.0",
        "vue3-smooth-dnd": "^0.0.6",
        "vuedraggable": "^4.1.0",
        "x-data-spreadsheet": "^1.1.9",
        "xml2js": "^0.6.2",
        "ziggy-js": "^2.2.1"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 10"
    ],
    "devDependencies": {
        "@vue/compiler-sfc": "^3.4.26",
        "@vue/eslint-config-prettier": "^9.0.0",
        "eslint": "^9.3.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-vue": "^9.21.0",
        "prettier": "3.3.2",
        "sass": "^1.77.5",
        "vite-plugin-node-polyfills": "^0.22.0"
    },
    "pnpm": {
        "overrides": {
            "minimist": "1.2.6",
            "node-fetch": "2.6.7"
        }
    }
}

vite.config.js

import { resolve } from "path";
import { defineConfig, loadEnv } from "vite";

import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

// bootstrap, icons
import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import IconsResolve from "unplugin-icons/resolver";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import { compression } from "vite-plugin-compression2";
import { viteStaticCopy } from "vite-plugin-static-copy";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default ({ mode }) => {
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    const plugins = [
        laravel({
            input: ["resources/main.js"],
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,

                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directly as expected.
                    includeAbsolute: false
                }
            }
        }),
        vueJsx(),
        Components({
            resolvers: [BootstrapVueNextResolver(), IconsResolve()],
            dts: true
        }),
        Icons({
            compiler: "vue3",
            autoInstall: true
        }),
        ckeditor5( { theme: resolve( __dirname + '/node_modules/@ckeditor/ckeditor5-theme-lark' ) } ),
        compression(),
        nodePolyfills()
    ];

    // NOTE: elsewhere always use import.meta.env for vite usage. it is not loaded yet here though
    if (process.env.NODE_ENV === "production") {
        plugins.push(chunkSplitPlugin());
        plugins.push(compression());
    }

    let serverConfig = {
        host: process.env.VITE_SERVER_HOST_CONTAINER || "php",
        port: process.env.VITE_SERVER_PORT || 5173,
        hmr: {
            host: "localhost",
            protocol: "ws"
        },
        watch: {
            usePolling: true
        }
    }

    return defineConfig({
        define: {
            "process.env": process.env // in case node_modules packages use process.env
        },
        plugins: plugins,
        resolve: {
            extensions: [".vue", ".js", ".mjs", ".cjs"],
            alias: {
                "@": resolve(__dirname + "/resources"),
                '~bootstrap': resolve(__dirname + '/node_modules/bootstrap'),
            }
        },
        base: "./",
        build: {
            sourcemap: false,
            manifest: "manifest.json",
            rollupOptions: {
                external: []
            }
        },
        server: serverConfig
    });
}

webfansplz commented 3 weeks ago

I can't give you repo access, but I can paste our package.json and vite.config.js if that helps:

package.json

{
  "name": "foobar",
  "version": "1.1.0",
  "private": true,
  "type": "module",
  "scripts": {
      "preinstall": "npx only-allow pnpm",
      "dev": "vite --host",
      "build": "vite build",
      "lint": "eslint --ext .vue --ignore-path .gitignore --fix resources",
      "format": "prettier .  --write"
  },
  "engines": {
      "node": "^20.13.1"
  },
  "dependencies": {
      "@casl/ability": "^6.7.1",
      "@casl/vue": "^2.2.2",
      "@ckeditor/ckeditor5-basic-styles": "^41.4.2",
      "@ckeditor/ckeditor5-build-decoupled-document": "^41.4.2",
      "@ckeditor/ckeditor5-essentials": "^41.4.2",
      "@ckeditor/ckeditor5-font": "^41.4.2",
      "@ckeditor/ckeditor5-link": "^41.4.2",
      "@ckeditor/ckeditor5-paragraph": "^41.4.2",
      "@ckeditor/ckeditor5-table": "^41.4.2",
      "@ckeditor/ckeditor5-theme-lark": "^41.4.2",
      "@ckeditor/ckeditor5-vue": "^5.1.0",
      "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
      "@fortawesome/fontawesome-free": "^6.5.2",
      "@he-tree/vue3": "^1.2.9",
      "@highlightjs/vue-plugin": "^2.1.2",
      "@mdi/font": "^7.4.47",
      "@pdftron/webviewer": "^10.9.0",
      "@popperjs/core": "^2.11.8",
      "@sentry/vite-plugin": "^2.16.1",
      "@sentry/vue": "^8.9.1",
      "@syncfusion/ej2-base": "^26.1.35",
      "@syncfusion/ej2-data": "^26.1.35",
      "@syncfusion/ej2-icons": "^26.1.35",
      "@syncfusion/ej2-navigations": "^26.1.35",
      "@syncfusion/ej2-vue-base": "^26.1.35",
      "@syncfusion/ej2-vue-buttons": "^26.1.35",
      "@syncfusion/ej2-vue-calendars": "^26.1.35",
      "@syncfusion/ej2-vue-dropdowns": "^26.1.35",
      "@syncfusion/ej2-vue-grids": "^26.1.35",
      "@syncfusion/ej2-vue-inputs": "^26.1.35",
      "@syncfusion/ej2-vue-layouts": "^26.1.35",
      "@syncfusion/ej2-vue-lists": "^26.1.35",
      "@syncfusion/ej2-vue-navigations": "^26.1.35",
      "@syncfusion/ej2-vue-pivotview": "^26.1.35",
      "@syncfusion/ej2-vue-popups": "^26.1.35",
      "@syncfusion/ej2-vue-richtexteditor": "^26.1.35",
      "@syncfusion/ej2-vue-schedule": "^26.1.35",
      "@syncfusion/ej2-vue-splitbuttons": "^26.1.35",
      "@vitejs/plugin-vue": "^5.0.5",
      "@vitejs/plugin-vue-jsx": "^4.0.0",
      "@vojtechlanka/vue-tags-input": "^3.1.1",
      "@vueform/toggle": "^2.1.4",
      "@vuelidate/core": "^2.0.3",
      "@vuelidate/validators": "^2.0.3",
      "@zanmato/vue3-treeselect": "^0.2.0",
      "autoprefixer": "^10.4.4",
      "axios": "^1.7.2",
      "axios-mock-adapter": "^1.20.0",
      "bootstrap": "^5.3.3",
      "bootstrap-vue-next": "^0.19.0",
      "ckeditor5": "^43.0.0",
      "clipboard": "^2.0.8",
      "core-js": "^3.37.0",
      "cross-env": "^7.0.3",
      "deepmerge": "^4.2.2",
      "dropzone": "^5.9.3",
      "helper-js": "^3.1.5",
      "highlight.js": "^11.9.0",
      "javascript-time-ago": "^2.3.10",
      "jszip": "^3.10.1",
      "laravel-echo": "^1.16.1",
      "laravel-vite-plugin": "^1.0.4",
      "less": "^4.1.2",
      "line-awesome": "^1.3.0",
      "lodash": "^4.17.21",
      "mitt": "^3.0.1",
      "moment": "^2.29.1",
      "npm": "^10.8.1",
      "nprogress": "^0.2.0",
      "object-path": "^0.11.8",
      "only-allow": "^1.2.1",
      "perfect-scrollbar": "^1.5.5",
      "pinia": "^2.1.7",
      "pinia-plugin-persistedstate": "^3.2.1",
      "pusher-js": "^8.3.0",
      "socicon": "^3.0.5",
      "splitpanes": "^3.1.5",
      "stream-browserify": "^3.0.0",
      "sweetalert2": "11.11.1",
      "timers-browserify": "^2.0.12",
      "typescript": "^5.4.5",
      "unplugin-icons": "^0.19.0",
      "unplugin-vue-components": "^0.27.0",
      "uuid": "^9.0.1",
      "v-resize-observer": "2.1.0",
      "vite": "^5.4.10",
      "vite-plugin-chunk-split": "^0.5.0",
      "vite-plugin-compression2": "^1.1.1",
      "vite-plugin-static-copy": "^1.0.5",
      "vue": "3.4.38",
      "vue-axios": "^3.4.0",
      "vue-fullscreen": "^3.1.1",
      "vue-global-events": "3.0.1",
      "vue-google-autocomplete": "^1.1.2",
      "vue-howler": "^0.7.0",
      "vue-i18n": "^9.13.1",
      "vue-infinite-loading": "3.0.0-alpha.0-0",
      "vue-inline-svg": "^3.1.3",
      "vue-material-design-icons": "^5.0.0",
      "vue-multiselect": "^3.0.0",
      "vue-router": "^4.3.3",
      "vue-select": "^4.0.0-beta.6",
      "vue-swatches": "^2.1.1",
      "vue-toastification": "^2.0.0-rc.5",
      "vue-validate": "^1.0.1",
      "vue3-avatar": "^3.0.0",
      "vue3-perfect-scrollbar": "^2.0.0",
      "vue3-smooth-dnd": "^0.0.6",
      "vuedraggable": "^4.1.0",
      "x-data-spreadsheet": "^1.1.9",
      "xml2js": "^0.6.2",
      "ziggy-js": "^2.2.1"
  },
  "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 10"
  ],
  "devDependencies": {
      "@vue/compiler-sfc": "^3.4.26",
      "@vue/eslint-config-prettier": "^9.0.0",
      "eslint": "^9.3.0",
      "eslint-config-prettier": "^9.1.0",
      "eslint-plugin-vue": "^9.21.0",
      "prettier": "3.3.2",
      "sass": "^1.77.5",
      "vite-plugin-node-polyfills": "^0.22.0"
  },
  "pnpm": {
      "overrides": {
          "minimist": "1.2.6",
          "node-fetch": "2.6.7"
      }
  }
}

vite.config.js

import { resolve } from "path";
import { defineConfig, loadEnv } from "vite";

import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

// bootstrap, icons
import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import IconsResolve from "unplugin-icons/resolver";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import { compression } from "vite-plugin-compression2";
import { viteStaticCopy } from "vite-plugin-static-copy";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default ({ mode }) => {
  process.env = {...process.env, ...loadEnv(mode, process.cwd())};

  const plugins = [
      laravel({
          input: ["resources/main.js"],
          refresh: true
      }),
      vue({
          template: {
              transformAssetUrls: {
                  // The Vue plugin will re-write asset URLs, when referenced
                  // in Single File Components, to point to the Laravel web
                  // server. Setting this to `null` allows the Laravel plugin
                  // to instead re-write asset URLs to point to the Vite
                  // server instead.
                  base: null,

                  // The Vue plugin will parse absolute URLs and treat them
                  // as absolute paths to files on disk. Setting this to
                  // `false` will leave absolute URLs un-touched so they can
                  // reference assets in the public directly as expected.
                  includeAbsolute: false
              }
          }
      }),
      vueJsx(),
      Components({
          resolvers: [BootstrapVueNextResolver(), IconsResolve()],
          dts: true
      }),
      Icons({
          compiler: "vue3",
          autoInstall: true
      }),
      ckeditor5( { theme: resolve( __dirname + '/node_modules/@ckeditor/ckeditor5-theme-lark' ) } ),
      compression(),
      nodePolyfills()
  ];

  // NOTE: elsewhere always use import.meta.env for vite usage. it is not loaded yet here though
  if (process.env.NODE_ENV === "production") {
      plugins.push(chunkSplitPlugin());
      plugins.push(compression());
  }

  let serverConfig = {
      host: process.env.VITE_SERVER_HOST_CONTAINER || "php",
      port: process.env.VITE_SERVER_PORT || 5173,
      hmr: {
          host: "localhost",
          protocol: "ws"
      },
      watch: {
          usePolling: true
      }
  }

  return defineConfig({
      define: {
          "process.env": process.env // in case node_modules packages use process.env
      },
      plugins: plugins,
      resolve: {
          extensions: [".vue", ".js", ".mjs", ".cjs"],
          alias: {
              "@": resolve(__dirname + "/resources"),
              '~bootstrap': resolve(__dirname + '/node_modules/bootstrap'),
          }
      },
      base: "./",
      build: {
          sourcemap: false,
          manifest: "manifest.json",
          rollupOptions: {
              external: []
          }
      },
      server: serverConfig
  });
}

devtools popup What is shown here? Is there any other information output on the page?

GTCrais commented 3 weeks ago

devtools popup What is shown here? Is there any other information output on the page?

devtools2

What do you mean by "is there any information output on the page" ?

webfansplz commented 3 weeks ago

devtools-chrome.zip I am trying to fix it, can someone install this zip package to help me try it? 🙏

webfansplz commented 3 weeks ago

devtools-chrome.zip I am trying to fix it, can someone install this zip package to help me try it? 🙏

@GTCrais Do you have time to try this? 🙏

timmeijers commented 3 weeks ago

devtools-chrome.zip I am trying to fix it, can someone install this zip package to help me try it? 🙏

Checking...

timmeijers commented 3 weeks ago

I have installed the extension, and i opened the devtools which by surprise showed the Vue tab, when i clicked it however it kept showing the Loader with the Vue logo. Then I refreshed the page and it was gone again.

However I see something I did not notice before, there is an error showing in my console, which i thought was just one of those random errors from our code when not accessing a prop correctly, but this is actually initiated by the vuejs devtools.

So it seems the prepare.js is calling functions from outside the devtools?

webfansplz commented 3 weeks ago

I have installed the extension, and i opened the devtools which by surprise showed the Vue tab, when i clicked it however it kept showing the Loader with the Vue logo. Then I refreshed the page and it was gone again.

However I see something I did not notice before, there is an error showing in my console, which i thought was just one of those random errors from our code when not accessing a prop correctly, but this is actually initiated by the vuejs devtools.

So it seems the prepare.js is calling functions from outside the devtools?

Yes, prepare.js try to inject some logic into the user environment. Can you try to fix this error and try again? Or do you have other projects that can't show vue devtools either?

timmeijers commented 3 weeks ago

Yes, our other project i did not test, i will check this tomorrow. Maybe someone else can check aswell.

From: Arlo @.> Sent: Thursday, October 31, 2024 4:44:00 PM To: vuejs/devtools @.> Cc: timmeijers @.>; Author @.> Subject: Re: [vuejs/devtools] Vue.js devtools no longer showing the Vue tab in my console. (Issue #652)

I have installed the extension, and i opened the devtools which by surprise showed the Vue tab, when i clicked it however it kept showing the Loader with the Vue logo. Then I refreshed the page and it was gone again.

However I see something I did not notice before, there is an error showing in my console, which i thought was just one of those random errors from our code when not accessing a prop correctly, but this is actually initiated by the vuejs devtools.

[image]https://private-user-images.githubusercontent.com/2463260/382006995-ff49a0db-6003-4b39-ab39-f0a29d33ad18.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzAzODk0ODUsIm5iZiI6MTczMDM4OTE4NSwicGF0aCI6Ii8yNDYzMjYwLzM4MjAwNjk5NS1mZjQ5YTBkYi02MDAzLTRiMzktYWIzOS1mMGEyOWQzM2FkMTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTAzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDEwMzFUMTUzOTQ1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGIxNGFlOWFkYzE3N2E1ZWJhOTBkZjI0OThiMjQ2MjM4MjYwYzEzNTc5ZjU5ZDBlMWU5ZjliNDM5MzAxYjAyZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.9wIQI8-cKNF_Ng_F0e8Hh6KW9gpCSuA-o5XswGPkY7Y

So it seems the prepare.js is calling functions from outside the devtools?

Yes, prepare.js try to inject some logic into the user environment. Can you try to fix this error and try again? Or do you have other projects that can't show vue devtools either?

— Reply to this email directly, view it on GitHubhttps://github.com/vuejs/devtools/issues/652#issuecomment-2450207337, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AASZMHDWA2CDSWUUOMLMCNDZ6JF4BAVCNFSM6AAAAABQ4BXNJ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJQGIYDOMZTG4. You are receiving this because you authored the thread.Message ID: @.***>

webfansplz commented 3 weeks ago

I tried to fix it in v7.6.2. Could anyone who issue this problem in Vue3 project help me test it? 🙏

timmeijers commented 2 weeks ago

I saw this code i had an error on was never used in our application, so i removed it, after removing it, my project no longer loaded the website. with the following error.

However i find it strange the vue.js devtools calls functions in our code and triggers errors. With the extension disabled, the website loads without any issues. Same for usage of v6.

webfansplz commented 2 weeks ago

I saw this code i had an error on was never used in our application, so i removed it, after removing it, my project no longer loaded the website. with the following error.

However i find it strange the vue.js devtools calls functions in our code and triggers errors. With the extension disabled, the website loads without any issues. Same for usage of v6.

Does it work with v6? Or will it also cause the site to crash? Is there any way to provide console error or more information? This will help us locate the issue. Thank you

GTCrais commented 2 weeks ago

I tried to fix it in v7.6.2. Could anyone who issue this problem in Vue3 project help me test it? 🙏

Still no Vue tab for me with 7.6.2

timmeijers commented 2 weeks ago

I saw this code i had an error on was never used in our application, so i removed it, after removing it, my project no longer loaded the website. with the following error. However i find it strange the vue.js devtools calls functions in our code and triggers errors. With the extension disabled, the website loads without any issues. Same for usage of v6.

Does it work with v6? Or will it also cause the site to crash? Is there any way to provide console error or more information? This will help us locate the issue. Thank you

I meant that in v6 it works fine. I'm not sure if this is related or not, but for my local i use a domain, like local.example.com

webfansplz commented 2 weeks ago

The tricky thing is that I can't reproduce these issue at all, so it would be helpful to provide reproduction 🙏

kroegen commented 2 weeks ago

For everyone who is having an issue with Legacy Vue Devtools, check if you disabled the new version Screenshot 2024-11-03 at 17 06 20

talmaron commented 2 weeks ago

having the same issue on most updated chrome and devtools

talmaron commented 2 weeks ago

try changing the app init from createApp to new Vue, it might help you reproduce @webfansplz

abdmdjr commented 2 weeks ago

I've found a fix that works for me:

You need to deactivate devtools v7 and v6 and reactivate v6.
Close devtools, refresh the page and reopen devtools
look for the Vue (Legacy) tab

CleanShot 2024-11-04 at 14 59 55

webfansplz commented 2 weeks ago

try changing the app init from createApp to new Vue, it might help you reproduce @webfansplz

The v7 version of devtools only supports Vue3. If your application is still using Vue2, please install the v6 version. If you're still using v5 version, you can install it here. See https://devtools.vuejs.org/guide/migration

webfansplz commented 2 weeks ago

I've found a fix that works for me:

You need to deactivate devtools v7 and v6 and reactivate v6.

Close devtools, refresh the page and reopen devtools

look for the Vue (Legacy) tab

Is your project vue 2? If it is Vue3, will it work if only v7 is enabled?

abdmdjr commented 2 weeks ago

I've found a fix that works for me:

You need to deactivate devtools v7 and v6 and reactivate v6.

Close devtools, refresh the page and reopen devtools

look for the Vue (Legacy) tab

Is your project vue 2? If it is Vue3, will it work if only v7 is enabled?

For a Vue2 project, I had to do what I have in my first message. For a Vue3 project, when v6 and v7 are activated, I have the two tabs.

GTCrais commented 2 weeks ago

@abdmdjr your issues are unrelated to the original issue in this thread.

GTCrais commented 2 days ago

I'm not sure at which point this started working, but...it is working now for us. v7.6.4

vuejs / devtools

Vue.js devtools no longer showing the Vue tab in my console. #652