Menu
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:
Why it is not "my" problem:
Why I tried so far:
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..."):
454
The Vue devtools don't show upCheck if you have the extension installed. If you are on a live website, there is a good chance it's using a production build of Vue. Set the __VUE_PROD_DEVTOOLS__ environment variable for Vue 3 when using a bundler like Webpack (more info).
Make sure you're using the version that's compatible with Vue 3. Currently that'd be 6.0. 0 beta 3. You'll also need to use a dev build of Vue for the devtools to be able to interact with it.
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:
103
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
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
