google-chromevue.jsvuejs2devtoolsvue-devtools

Vue.js devtools not showing

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

Solution

  • 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)