search

vuejs / devtools-v6

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

vue.js not detected #1279

Closed Mavrick2020 closed 3 years ago

Mavrick2020 commented 4 years ago

Version

5.3.3

Browser and OS info

Chrome 85 / Windows 10

Steps to reproduce

The below line of code properly executed in Chrome. However, the dev tool doesn't recognize Vue.

What is expected?

Vue tab in Chrome Developer Tool

What is actually happening?

vue.js not detected

mathewgrabau commented 4 years ago

I am seeing/having the same problem in Chrome. Using cli/webpack bundling and just the local development server.

mattrighetti commented 4 years ago

I am using Vue.js 3 and Firefox, this is happening to me too

ttntm commented 4 years ago

Solution is in the docs: https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension

-> install the beta extension and it'll work ;)

shevchenko-web commented 4 years ago

first things first, install vue devtools from manual. and then close the browser. finally restart browser and check your vue development environment. regards.

mattrighetti commented 4 years ago

This issue can be closed

toddprouty commented 4 years ago

If you are taking the Vue Mastery: Intro to Vue 3 course (linked from the official docs), and the extension is still not detecting Vue.js in the course files, try this:

  1. Install the beta extension as mentioned by @ttntm.
  2. Disable the stable (non-beta) version of the extension if you have it installed.

  3. In the HTML course files, replace:

    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>

    with:

    <script src="https://unpkg.com/vue@next"></script>

This is the library currently recommended in the official docs "for prototyping or learning purposes" (but not production use).

itsalaidbacklife commented 3 years ago

I am having this issue with Vue 2 on

  1. Chrome Version 88.0.4324.190 (Official Build) (64-bit) on windows 10
  2. And also with Firefox 8.60 (64 bit)

I am running a local development server in development mode with vue cli, I am using the non-beta version of the devtools meant for Vue 2 both for chrome and for firefox.

I've enabled 'Allow access to file URLs' in chrome, restarted my computer, but the problem persists. I'm at a loss. What am I missing?

itsalaidbacklife commented 3 years ago

Update: Running window.postMessage({ devtoolsEnabled: true, vueDetected: true }); in the console fixes the issue in chrome and in firefox. My process.env.NODE_ENV is development for this local development server, and I had no issue using the devtools on this project without the above hack until the past several days

fastfedora commented 3 years ago

I am having similar issues with Vue 2 on Chrome Version 88.0.4324.150 (Official Build) (x86_64) on a Mac.

I discovered that if I closed Developer Tools, reloaded the page, the reopened Developer Tools, the Vue tab is now showing in Developer Tools, but the extension icon on the top toolbar still says "Vue.js not detected".

So works fine enough for now, but something is still funky with the detection. Last time I used Vue Developer Tools, which was quite a few months back on the same project, both the toolbar extension icon and the tab in Developer Tools worked.

narkan commented 3 years ago

Me too. Vue 2 and 3. Can never detect Vue pages. Uninstalled/reinstalled Vue.js devtools. No change Any ideas??

Brakaduun commented 3 years ago

Same here - have not found a solution yet...

shmooth commented 3 years ago

mine eventually worked. not quite sure what fixed it -- maybe just the beta version of the Chrome plugin (linked above by @ttntm).

my setup: chromebook on the Linux VM, vue@3.0.11, Chrome Version 89.0.4389.130 (Official Build) (64-bit), laravel 8.x/php/intertiajs/vue with the out of the box laravel breeze/interia starter kit.

https://laravel.com/docs/8.x/starter-kits

My basic process:

  1. uninstalled original vuejs extension.
  2. restarted Chrome. rebooted.
  3. installed beta.
  4. tried. nothing.
  5. uninstalled, re-installed beta, rebooted, restarted chrome, etc.
  6. magically it started working, for now anyways.

There is also a standalone electron/desktop app, which looks interesting:

https://github.com/vuejs/vue-devtools

Akryum commented 3 years ago

Please install the beta version which is the only one that supports Vue 3.

melroy89 commented 3 years ago

For the people who want to know where to download the beta, just go to Releases in GitHub: https://github.com/vuejs/devtools/releases

tenaciouspete commented 2 years ago

I'm still having this issue, I have also tried Legacy to no avail

29.04.22

gerardreches commented 1 year ago

2023, same issue

chevylady commented 1 year ago

I am just doing the course and have some prepared files to work with. I have same issue once it works once not. I work on VUE3 and have instalation codes from CDN in some files it works and browser detects vue, in other where is exactly same code it doesn't work. I used all kinds of cdn and tried to restart, reinstall extension, and so and so...

Just to proof

in one folder in html I have : and it is detected!

in other I have: 

<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue@next"></script>

it is not detected.

I used also without beta: vue@3dist/vue.global.js and sometimes works sometimes not.