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

timmeijers · 2024-10-30T12:58:59Z

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 · 2024-10-30T13:06:48Z

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

ChrisColpittsPHP · 2024-10-30T13:06:58Z

We are also experiencing the same issue

daniel-simplyphp · 2024-10-30T13:08:20Z

+1

ahmed-ben10 · 2024-10-30T13:09:44Z

+1

timmeijers · 2024-10-30T13:12:16Z

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 · 2024-10-30T13:13:38Z

Can anyone help provide a mini repo 🙏?

timmeijers · 2024-10-30T14:04:13Z

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 · 2024-10-30T14:09:51Z

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 · 2024-10-30T14:21:38Z

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 · 2024-10-30T14:22:52Z

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

buglavecz · 2024-10-30T14:23:25Z

webfansplz · 2024-10-30T14:29:40Z

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 · 2024-10-30T14:32:25Z

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 · 2024-10-30T15:35:24Z

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 · 2024-10-30T15:58:59Z

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 · 2024-10-31T01:07:10Z

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 · 2024-10-31T11:54:58Z

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 · 2024-10-31T11:59:39Z

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 · 2024-10-31T11:59:59Z

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 · 2024-10-31T12:58:56Z

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 · 2024-10-31T13:57:29Z

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

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

webfansplz · 2024-10-31T15:00:09Z

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

webfansplz · 2024-10-31T15:01:08Z

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 · 2024-10-31T15:21:23Z

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

Checking...

timmeijers · 2024-10-31T15:31:08Z

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 · 2024-10-31T15:43:37Z

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 · 2024-10-31T15:54:00Z

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 GitHub<#652 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AASZMHDWA2CDSWUUOMLMCNDZ6JF4BAVCNFSM6AAAAABQ4BXNJ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJQGIYDOMZTG4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

webfansplz · 2024-11-01T01:03:34Z

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

timmeijers · 2024-11-01T08:43:37Z

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 · 2024-11-01T09:03:00Z

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 · 2024-11-01T09:39:59Z

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 · 2024-11-01T09:43:37Z

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 · 2024-11-01T10:55:45Z

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

kroegen · 2024-11-03T16:07:23Z

For everyone who is having an issue with Legacy Vue Devtools, check if you disabled the new version

talmaron · 2024-11-03T22:23:53Z

having the same issue on most updated chrome and devtools

talmaron · 2024-11-04T09:12:59Z

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

abdmdjr · 2024-11-04T14:00:49Z

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

webfansplz · 2024-11-05T03:57:36Z

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 · 2024-11-05T03:59:34Z

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 · 2024-11-05T04:36:04Z

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 · 2024-11-05T09:45:36Z

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

GTCrais · 2024-11-19T11:18:45Z

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

isenewotheo · 2024-11-29T11:22:41Z

Vue 2 is no longer supported by the v7 dev tool,
the new Vue.js devtools (lagacy)
https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp

webfansplz added the need reproduction Reproduction is needed label Oct 30, 2024

webfansplz pinned this issue Oct 30, 2024

webfansplz mentioned this issue Oct 31, 2024

fix(kit): replay hook when devtools inject late #666

Merged

webfansplz closed this as completed in #666 Oct 31, 2024

webfansplz reopened this Oct 31, 2024

prd-dat-tran mentioned this issue Nov 6, 2024

dose not work with the new devtools version 7.6.2 hzmming/vue-force-dev#18

Closed

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

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

Comments

timmeijers commented Oct 30, 2024

GTCrais commented Oct 30, 2024 • edited Loading

ChrisColpittsPHP commented Oct 30, 2024

daniel-simplyphp commented Oct 30, 2024

ahmed-ben10 commented Oct 30, 2024 • edited Loading

timmeijers commented Oct 30, 2024

webfansplz commented Oct 30, 2024

timmeijers commented Oct 30, 2024

webfansplz commented Oct 30, 2024

webfansplz commented Oct 30, 2024

frufin commented Oct 30, 2024

buglavecz commented Oct 30, 2024

webfansplz commented Oct 30, 2024 • edited Loading

timmeijers commented Oct 30, 2024

webfansplz commented Oct 30, 2024

webfansplz commented Oct 30, 2024

yyx990803 commented Oct 31, 2024

GTCrais commented Oct 31, 2024 • edited Loading

webfansplz commented Oct 31, 2024

GTCrais commented Oct 31, 2024

webfansplz commented Oct 31, 2024

GTCrais commented Oct 31, 2024 • edited Loading

webfansplz commented Oct 31, 2024

webfansplz commented Oct 31, 2024

timmeijers commented Oct 31, 2024

timmeijers commented Oct 31, 2024

webfansplz commented Oct 31, 2024

timmeijers commented Oct 31, 2024 via email

webfansplz commented Nov 1, 2024

timmeijers commented Nov 1, 2024

webfansplz commented Nov 1, 2024

GTCrais commented Nov 1, 2024

timmeijers commented Nov 1, 2024

webfansplz commented Nov 1, 2024

kroegen commented Nov 3, 2024

talmaron commented Nov 3, 2024

talmaron commented Nov 4, 2024

abdmdjr commented Nov 4, 2024

webfansplz commented Nov 5, 2024

webfansplz commented Nov 5, 2024

abdmdjr commented Nov 5, 2024

GTCrais commented Nov 5, 2024

GTCrais commented Nov 19, 2024

isenewotheo commented Nov 29, 2024

GTCrais commented Oct 30, 2024 •

edited

Loading

ahmed-ben10 commented Oct 30, 2024 •

edited

Loading

webfansplz commented Oct 30, 2024 •

edited

Loading

GTCrais commented Oct 31, 2024 •

edited

Loading

GTCrais commented Oct 31, 2024 •

edited

Loading