CODEWITHSUNDEEP
google-chromevue.jsvuejs2devtoolsvue-devtools
Patrik Krehák
Patrik Krehák

Reputation: 2683

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

Upvotes: 14

Views: 18462

Answers (7)

thiebo
thiebo

Reputation: 1435

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.

Upvotes: 0

Michael Rhema
Michael Rhema

Reputation: 171

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

Upvotes: 4

Anette
Anette

Reputation: 1

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

Upvotes: 0

fffarzan
fffarzan

Reputation: 19

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

Upvotes: 0

devXen
devXen

Reputation: 3161

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

Upvotes: 0

Solar
Solar

Reputation: 1015

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

Upvotes: 1

hennzen
hennzen

Reputation: 625

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)

Upvotes: 20

Related Questions