search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.63k stars 4.15k forks source link

Vue.js is not detected with vue@3.0.0-rc.4 #1244

Closed way2ex closed 3 years ago

way2ex commented 4 years ago

Be patient.

FYI: @Akryum is working on this. Please wait for the next release. —— From Evan

Version

6.0.0-beta.1

Browser and OS info

版本 84.0.4147.89/ MacOS10.14.3

Steps to reproduce

What is expected?

Vue can be detected

What is actually happening?

Vue.js is not detected

I don't know it's a question of vue-devtools or vue-next. Could you point what should i do to use vue-devtools . Is something wrong in my project ?

Uninen commented 4 years ago

Vue is also not detected when creating a new Vue 3 project w/ vuex and vue-router using the new vue-cli 4.5.0.

BellemareMederic commented 4 years ago

Confirm that bugs devtools version : 6.0.0 beta 1 "core-js": "^3.6.5", "vue": "^3.0.0-rc.5", "vue-router": "^4.0.0-beta.4"

have a not detected on the chrome extension and my files are not minify

ThisIsRuddy commented 4 years ago

Same except 3.0.0-rc.5 :(

yoyoys commented 4 years ago

I've tested with same result with 3.0.0-rc.5, but __VUE_DEVTOOLS_GLOBAL_HOOK__.store is detected.

...
    "vue": "3.0.0-rc.5",
    "vue-router": "4.0.0-beta.5",
    "vuex": "4.0.0-beta.4"
    "@vue/compiler-sfc": "^3.0.0-rc.5",
    "vue-cli-plugin-vue-next": "~0.1.3"
    "core-js": "^3.6.5",
...
d-pollard commented 4 years ago

Hoping this gets resolved; would love to start playing with the new features

Rekodr commented 4 years ago

same issue with 3.0.0-rc.1, ..., 3.0.0-rc.5 on both Chrome and FireFox. The standalone does not work either. Hope this to be fix soon.

Yakoot commented 4 years ago

same issue

bzd2000 commented 4 years ago

indeed, it is really hard to test vue3 without the devtools working.

I try to debug it, but my knowledge of chrome devtools is not good enough

bzd2000 commented 4 years ago

I cannot manage to build it locally, something weird in the package.json I don't understand

haoqunjiang commented 4 years ago

I think it's fixed in Vue CLI 4.5.4 with this PR https://github.com/vuejs/vue-cli/pull/5788

If you are using the webpack template, please update the config accordingly.

marcus-herrmann commented 4 years ago

I think it's fixed in Vue CLI 4.5.4 with this PR vuejs/vue-cli#5788

Vue CLI 4.5.4 does not make any difference in my case:

"vue": "^3.0.0-rc.5",
"@vue/cli-service": "~4.5.4",

No dev tools pane in both Firefox (79) and Chrome (83)

9mm commented 4 years ago

I am trying to learn vue and i used vue-cli to make a new vue-3 project, and using the router option with history state enabled. I am using yarn serve for the server. It says vue.js not found in the vue chrome extension. Is this related? Im at a loss how to fix it. Thanks

Zenemig commented 4 years ago

Vue Devtools Version

6.0.0-beta.1

Vue CLI Version

4.5.4

Vue Version

3.0.0-rc.5

Browser and OS info

Google Chrome Version 86.0.4239.0 (Official Build) canary (x86_64) MacOS Catalina 10.15.2

Steps to reproduce

Create a Vue project using vue@3.0.0-rc.5 and run npm run serve Download Vue Devtools version of 6.0.0-beta.1

What is expected?

Vue is detected by the extension

What is actually happening?

Vue is not detected

Just started a new project and when I got to a point where I needed Vue Devtools, turns out it's not working. Is there a fix on the works? I didn't see this referenced on any PRs.

yyx990803 commented 4 years ago

FYI: @Akryum is working on this. Please wait for the next release.

stefaanv commented 4 years ago

Same problem here with vue-cli 4.5.4 and typescript.

    "vue": "^3.0.0-0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
euaaaio commented 4 years ago

Just build next brunch via yarn && yarn build command then manually add packages/shell-chrome folder to Chrome → Extensions → Developer mode → Load unpacked.

Uninen commented 4 years ago

The manual build works for me but I haven't seen any version yet that would actually work in any meaningful way that would show any components or any other details from my app. The current build only shows an empty app with no components or data. I've tested this with four different Vue 3 projects, the same results with all of them.

euaaaio commented 4 years ago

The manual build works for me but I haven't seen any version yet that would actually work in any meaningful way that would show any components or any other details from my app. The current build only shows an empty app with no components or data. I've tested this with four different Vue 3 projects, the same results with all of them.

Build from next already works.

image
Uninen commented 4 years ago

Re-tested just now. Interestingly the build from very latest commit doesn't show the Vue tab at all even though the extension loads ok and shows active on the projects. Tested with three different projects.

A build from a couple of commits back loads but for me doesn't show anything but a blank app and doesn't do anything. Haven't seen any functionality in any of my builds from the next branch ever in any of my Vue 3 projects. Using Chrome (85.0.4183.83) on macOS and Vue 3 RC9 w/ vue-router and TypeScript, with vue-cli and one test project with Vite.

All projects show up like this for me (I also have dark mode on but the plugin always loads bright version and haven't found a place for setting it from the new plugin as none of the tabs work properly):

Screenshot 2020-09-01 at 14 34 35
Uninen commented 4 years ago

I also get this error (taken from Chrome extensions error tab) with first page load but it goes away with refresh. It still doesn't seem to affect in te behaviour at all, nothing shows up except a blank App.

Screenshot 2020-09-01 at 14 45 24
Uninen commented 4 years ago

Sorry for the comment spam but I got the plugin somewhat working after completely deleting and reinstalling Chrome. Found out that the problem was in my code which in all projects uses Suspense and async components. After removing these just for debugging purposes I now see a list of components:

Screenshot 2020-09-01 at 15 11 01

So the Suspense-component and async setup is not yet supported (or doesn't work properly) but a build from the next-branch kind-of works already indeed.

Mehdi-Hp commented 4 years ago

Running window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor makes Vue tab to appear, but empty.

image

Mehdi-Hp commented 4 years ago

Found a caveat. Make sure vue-cli-plugin-vue-next is not installed. Fixed my problem.

ellisonpatterson commented 4 years ago

Found a caveat. Make sure vue-cli-plugin-vue-next is not installed. Fixed my problem.

Fixes all issues, thank you!

yoyoys commented 4 years ago

@Mehdi-Hp

Found a caveat. Make sure vue-cli-plugin-vue-next is not installed. Fixed my problem.

This breaks vuex and vue-router.

got message like that

Failed to compile with 7 errors                                        

This dependency was not found:

* vue in ./node_modules/vue-router/dist/vue-router.esm.js, ./node_modules/vuex/dist/vuex.esm-browser.js and 5 others

To install it, you can run: npm install --save vue
No issues found.
rajinder-yadav commented 4 years ago

Not working on Firefox also

edikdeisling commented 4 years ago

This code works for me (Chrome + Vue 3.0.0-rc.10)

// main.ts
import App from '@/App.vue';
import { devtools } from '@/devtools';
import router from '@/router';

createApp(App).use(devtools).use(router).mount('#app');

// devtools.ts
import { App, Plugin } from 'vue';

const devtools: Plugin = {
    install(app: App) {
        // @ts-ignore
        if (process.env.NODE_ENV === 'development' && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
            // @ts-ignore
            window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app;
        }
    },
};

export { devtools };
ThisIsRuddy commented 4 years ago

Not sure what has changed but it seems to be working now as I have just created a fresh project via vue-cli and re-tested

Chrome Extension: Vue DevTools 6.0.0 beta 2

 "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "4.0.0-beta.9"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2"
  }

screenshot

9mm commented 4 years ago

@ThisIsRuddy did you install it from github using the developer version of the extension instead of doing it from the chrome store? Maybe that is the problem

9mm commented 4 years ago

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

9mm commented 4 years ago

Now it works, awesome. Thank you @ThisIsRuddy I'm glad you put the version of your extension or I would not have ever noticed.

edit sorry for 3 replies blowing everyone here up

mkasprz commented 3 years ago

I also confirm that on Firefox a version from a beta channel works too. It's available here: https://github.com/vuejs/vue-devtools/releases . Thank You @9mm and others involved.

lauri108 commented 3 years ago

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Thank you @9mm and @ThisIsRuddy, now works for me after installing that beta version of Vue devtools. My Vue3 app is being detected.

mustafadalga commented 3 years ago

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

I solved the problem with vue.js devtools beta in vue cli 4.5.8 version.Thank you.

binaryben commented 3 years ago

Not sure if related. I installed Vue Dev Tools and when I click the icon it tells me it can't find Vue on the page. I have the following dependencies:

...
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
...
"@vue/cli-service": "~4.5.0",

Here is where it gets weird. I installed the beta channel, and now BOTH(!) say they can find vue on the page when I click the icon, but the panel never shows up in devtools. I have also tried disabling the stable channel extension, and the beta extension still says it can detect it but again, no panel. Same behaviour on Brave and Chrome (pretty unsurprising, but thought I would note in case it's of interest).

Thoughts?

tony140407 commented 3 years ago

Not sure if related. I installed Vue Dev Tools and when I click the icon it tells me it can't find Vue on the page. I have the following dependencies:

...
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
...
"@vue/cli-service": "~4.5.0",

Here is where it gets weird. I installed the beta channel, and now BOTH(!) say they can find vue on the page when I click the icon, but the panel never shows up in devtools. I have also tried disabling the stable channel extension, and the beta extension still says it can detect it but again, no panel. Same behaviour on Brave and Chrome (pretty unsurprising, but thought I would note in case it's of interest).

Thoughts?

right click on vue-devtools icon click "Manage Extensions" check the "Allow access to file URLs"

It works for me I hope this answers your questions.

bryansray commented 3 years ago

For anyone else still having issues ... I had to remove my previous vue.js devtools extension (v5.x) to get the new extension to show up in my Chrome Dev Tools tab. I'm sure you can probably "disable" it as well.

Hope that helps someone out. 🍀

sgrubsmyon commented 3 years ago

Using version 6.0.0.2 of vue-devtools (v6.0.0-beta.2 installed from https://github.com/vuejs/vue-devtools/releases) in Firefox 82.0.3, when I open the Vue panel in Dev Tools (connecting to a Vue 3.0.2 app), I get an exception in the console:

Uncaught (in promise) TypeError: appRecord is undefined
    setupBuiltinLayers moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:2164
    emit eval:1
    _replayBuffer eval:1
    on eval:1
    setupBuiltinLayers moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:2162
    setupTimeline moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:2113
    connect moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:621
    n eval:1
    emit eval:1
    initBackend moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:531
    emit eval:1
    _replayBuffer eval:1
    on eval:1
    initBackend moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:529
    handshake moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1501
    262 moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1458
    __webpack_require__ moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:20
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:84
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:87
backend.js:2164:23

and 2 times:

App with id NaN not found 2 backend.js:561:21
    connect moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:561
    emit moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:3998
    _emit moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:903
    Bridge moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:835
    Bridge moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:835
    listener moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1477
    (Async: EventListener.handleEvent)
    listen moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1480
    Bridge moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:833
    handshake moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1473
    (Async: EventListener.handleEvent)
    262 moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:1458
    __webpack_require__ moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:20
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:84
    <anonymous> moz-extension://bf79a28c-5cbf-4da1-b16d-3bf83aad5179/build/backend.js:87

Anyone else seeing this?

cb-adarsh commented 3 years ago

For anyone else still having issues ... I had to remove my previous vue.js devtools extension (v5.x) to get the new extension to show up in my Chrome Dev Tools tab. I'm sure you can probably "disable" it as well.

Hope that helps someone out. 🍀

@bryansray Turns out having both normal and beta devtools causes the issue! I disabled the original vue devtools and beta devtools worked perfectly!! FYI: i had to export devtools manually in my code, see snippet here

yangtianxia commented 3 years ago

Be patient.

FYI: @Akryum is working on this. Please wait for the next release. —— From Evan

Version

6.0.0-beta.1

Browser and OS info

版本 84.0.4147.89/ MacOS10.14.3

Steps to reproduce

  • install vue@3.0.0-rc.4 and run webpack-dev-server
  • download vue-devtools in version of 6.0.0-beta.1

What is expected?

Vue can be detected

What is actually happening?

Vue.js is not detected

I don't know it's a question of vue-devtools or vue-next. Could you point what should i do to use vue-devtools . Is something wrong in my project ?

可用的方法

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 分环境处理
if (process.env.NODE_ENV === 'development') {
  if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window) {
  // 这里__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue赋值一个createApp实例
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
  }
}

app.mount('#app')

解决方法来自vue-devtools README.md，之后对比了Vue2 window __VUE_DEVTOOLS_GLOBAL_HOOK__.Vue

后面翻评论看到 @xSorc 已经解决了

VottusCode commented 3 years ago

My current dependencies are the following (Currently, Vue 3.0.3 is installed):

{
  "dependencies": {
    "autoprefixer": "^9",
    "axios": "^0.21.0",
    "bulma": "^0.9.1",
    "core-js": "^3.6.5",
    "epic-spinners": "^1.1.0",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "topbar": "^0.1.4",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vue3-click-away": "^1.1.0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}

The project is working fine, without any issues. It has been migrated from Vue 2. With Vue 2, the devtools have worked, but after migrating to Vue 3 they stopped working.

I currently have the Vue.js devtools 6.0.0-beta2 and while they do work with new Vue 3 projects (created via Vue CLI), it does not work with ours. I have even went as far as removing anything except app.mount("#app") and the App.vue component only contained of one div, but to no avail.

Edit: bumped to 3.0.4, still the same issue

tomhave97 commented 3 years ago

Ah-ha! Here's the beta channel for anyone interested: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Thank you @9mm and @ThisIsRuddy, now works for me after installing that beta version of Vue devtools. My Vue3 app is being detected.

You need to remove it completely. Also if you added it before removing the base one, romove both again and install the beta version. After that it should work. 😄

VottusCode commented 3 years ago

To fix the issue, remove your yarn.lock (or package-lock.json in case of NPM) and install your dependencies again using the appropriate command.

Worked for me, some deps were bumped and I suppose it was fixed in one of them

FavourOyewumi7 commented 3 years ago

What works for me is when i installed both the beta and the former version , the only bad thing is the vue panel doesn't actually show

EthanZeigler commented 3 years ago

What works for me is when i installed both the beta and the former version , the only bad thing is the vue panel doesn't actually show

I had the same issue. You have to restart the browser when installing the beta devtools.

FavourOyewumi7 commented 3 years ago

oh thanks later got this

yashrathi-git commented 3 years ago

Switching to Vue.js devtools beta channel worked for me. Remove the vue.js devtools extension and install the beta version. Install it from here: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related

jcrawford commented 3 years ago

Switching to Vue.js devtools beta channel worked for me. Remove the vue.js devtools extension and install the beta version. Install it from here: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg/related

Thanks that worked for me as well :)

nicooprat commented 3 years ago

I couldn't make devtools work with Vue 3 + Vite 2, for now I got this workaround in main.js (based on previous comment):

const app = createApp(App)
if(import.meta.env.DEV && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
  window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
}
app.mount('#app')

I might have missed something obvious but devtools were working fine with other Vue 3 +vue-cli, so I guess it's some kind of Vite incompatibility for now.

LinusBorg commented 3 years ago

Devtools work fine for my Vite projects without any workarounds:

Bildschirmfoto 2021-03-21 um 12 09 45