15

Suddenly my Vue.js devtools stopped working. I had it in the chrome for like 2 years (since I started developing Vue.js). Now I can't see devtools in chrome. It happened yesterday just like that - I was using devtools for a while, then I was working on something else and after a while, I noticed something - devtools is away. Even though the extension is saying that devtools works: enter image description here


Why it is not "my" problem:

  1. I use it for 2 years with no problem, until now
  2. It was working in the morning, then it "just" stopped
  3. Now it doesn't work on any project, even I know it worked before
  4. I'm not using production mode, minified version, etc... I compile it through webpack and worked before.
  5. It doesn't work even on the simple-fresh Vue.js app *

Why I tried so far:

  1. Hard-refresh website (close and reopen devtools of course)
  2. Restart browser
  3. Reinstall extension
  4. Tried this version and also this bugfix version
  5. Logout and login from the account
  6. Enabled all settings for the extension: enter image description here

OS: macOS Catalina 10.15.4 (19E287)

Browser: 83.0.4103.61

Vue.js DevTools: 5.3.3


* Fresh Vue.js app code looks like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

And it still doesn't work (yes, the extension still says "Vue.js detected on this page. Open DevTools and..."): enter image description here

9
  • Even on an application being created through vue-cli? Because the "fresh snippet" you sent Is using Vue on the browser Commented May 28, 2020 at 10:12
  • I don't use vue-cli at all. Even if it would work, all my projects would be unable to get it work, because they were not made with vue-cli? I need a solution for a browser vue, that's why I didn't even try vue-cli. Commented May 28, 2020 at 11:17
  • Yea, but I wanted to understand under which scenario it doesn't work, just trying to help man Commented May 28, 2020 at 12:19
  • And I appreciate that. Funny thing - it works well for all my colleagues, except that they didn't update their chrome yet. Commented May 28, 2020 at 15:23
  • 1
    @CristianoSoleti I haven't reinstalled chrome, because I haven't got time for it... But all of a sudden it works now, I really didn't do anything with it. Weird. Commented Jun 1, 2020 at 8:40

7 Answers 7

23

I experienced this, too, both for Chrome and Firefox.

The unfortunate solution for Chrome was updating it to the latest version (today, that is 83.0.4103.106, 64bit on Windows).

For Firefox (77.0.1, 64bit) I disabled all other extensions, loaded the page without Firefox Devtools open, then hit F12 and the Vue tab popped up.

In general, disabling any other extensions (think of "Ad Block Plus" or "I don't care about cookies" for example) might help.

[EDIT]: Adding another case I experienced, when the Vue tab does not show up in Chrome's Devtools:

  1. load the page without Devtools open
  2. press the Vue Devtools button in the extensions area (might say "Vue.js not detected", but don't let that bother you). In some setups, this step is crucial.
  3. only then open Devtools by hitting F12. Vue tab should appear (check to the very right of all tabs, you can drag it to the left)
Sign up to request clarification or add additional context in comments.

6 Comments

Since I'm not experiencing this anymore I consider updateing chrome was the solution :D
I'm having a similar problem where it says that it can detect vue but that I didn't build it in developer mode, but I absolutely did build it in developer mode, so I don't know what's going on... Did yours say that?
Install Beta version of Vue dev tools works. Stable does not work.
@Čamo That should only be the solution if you use Vue 3. The stable version of vue devtools should work fine with Vue 2.
Yes but Vue 3 was released more than year ago.
|
4

If using Vue 3, you need the new version of the extension that is currently still in beta https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

1 Comment

the link does not work
1

Well another reason why Vuejs devtools might not be showing is because you ran npm run production or npm run dev so in that case the extension will detect Vuejs but won't show in devtools.

So you'll have to either run npm run dev or npm run watch.

Close devtools, reload page and open devtools

3 Comments

I'm running it through gulp+webpack and I do know I had development mode (because it is not possible to run the project on localhost in production, just in case I would do a mistake). Anyway, I haven't experienced it since.
Actually it's possible to run a production project locally, except for having different data
I know, I just made it like that on purpose :)
0

What I found out is I had to do Ctrl+C to quit current process, then run "php artisan serve" again, then Vue tool shows up in Chrome

Comments

0

This happened to me several times in Chrome. I just close the inspect and open it again to see Vue Devtools in inspect tabs.

3 Comments

Don't think it's a proper answer, no reasons/help provided. Just simple restart is not solution of problem.
I think it's not our problem to fix bug of vue.js dev tools. We can continue to work with the tool until next updates of it
There are info in question description that reopening page/inspector/browser don't help
0

To me embedding VUE versionless via unpkg helps. It pulls the latest version. Now the browser Vue Devtools show up.

Comments

0

For what it is worth, and may it be helpful to someone ending up here: error in the code may hinder vue devtools from showing up. I encountered this when calling data from pinia store in router/index.js.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.