Questions related to the Chrome and Firefox DevTools extension for debugging Vue.js applications.
Relevant Links:
Questions tagged [vue-devtools]
79 questions
4
votes
2 answers
Vue3.js and Pinia: Why is my store state undefined in VueDevtools?
I am using Vue 3 with Pinia ^2.0.14. I'm importing Pinia into the app in main.ts like so:
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
const pinia = createPinia()
const app =…
interwebjill
- 65
- 2
- 6
4
votes
2 answers
Is vuex state changeable via DevTools?
I store the user info in vuex, like {username: 'aa', role: 'admin'}, roles: admin/user. admin can do anything.
So I'm wondering if user can change his role to admin via Chrome Devtools? Is saving data to vuex safe?
vego
- 889
- 1
- 8
- 20
4
votes
3 answers
Vue Devtools not working locally
Vue Devtools works on all demos/examples online but not on my local pages. Even with the following, the Vue Devtools icon remains gray ("Vue.js not detected"). Why?
drake035
- 3,955
- 41
- 119
- 229
4
votes
1 answer
How to populate markers in vue2-google-maps
I'm really new to the whole js and I don't know much of the code.This is the package : https://github.com/xkjyeah/vue-google-maps
And this has to be submitted next tomorrow. But here is what i've done so far. When i click on the button. I gotta show…
TheBAST
- 2,680
- 10
- 40
- 68
4
votes
1 answer
VueJS: Why this data property doesn't updated on click event in Dev Tools?
In the code below, the getWidth event handler (defined in the methods object) updates the data.width property. As it updates, the variable width should be shown live in VueJS's Chrome addon.
However, that live update doesn't show up in the Vue…
appu
- 471
- 1
- 8
- 26
3
votes
1 answer
What are the performance numbers in the Vue devtools next to the components?
Does anyone have an insights or a resource for a feature in the Vue Dev Tools? On the components pane it shows my components and then these little red and yellow squares with what I am assuming is the component's performance.
When I first load the…
justalittleheat
- 387
- 2
- 13
3
votes
3 answers
Vue devtools inspection is not available on locally hosted app
When I run my Vue app, the Vue devtools extension detects Vue.js, but complains:
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I'm serving the app locally using yarn serve, which runs…
Bob Meyers
- 495
- 1
- 5
- 14
3
votes
2 answers
How to record mutation and action in "vue js dev tools" beta version?
I'm working on vue3 and managing state using Vuex, but I'm not able to load mutation and actions in the vuejs devtools beta version. Also no recording feature.
Image of my vuejs Devtools
ahmed raza
- 31
- 6
3
votes
0 answers
How to stop Electron from printing devtools extension errors to console?
I've been using Vue devtools extension with Electron and whenever I activate and use Vue devtools, all the errors occurred from it gets printed out to the Electron's main process console like this.
It's so frustrating because It's hard to find any…
m4heshd
- 773
- 9
- 23
3
votes
2 answers
Vue: different options to add a new reactive property?
I am trying to understand the different ways to add a reactive property. I know that I can't add a property directly to the root level so I have a user object set in my data:
data() {
return {
user: {
}
}
}
from here though is…
Kenstk8
- 35
- 3
3
votes
3 answers
Vue devtools in Chrome: Vue.js not detected
I am new to Vue and I experiment with Vue 3 Composition API, which I created demo app and it works fine.
I installed Vue.js Devtools in Chrome, but when I open my site I can do nothing with it;
it has a gray/disabled look and when I click on it, I…
Dalibor
- 1,430
- 18
- 42
3
votes
2 answers
How can I get vue DevTools to automatically commit vuex mutations?
I see these mutations:
But it's only when I click the down arrow that they actually get committed. How can I have them commit automatically as the app progresses?
Shamoon
- 41,293
- 91
- 306
- 570
3
votes
0 answers
Remote Debugging with Vue-Devtools Shell - net::ERR_CONNECTION_REFUSED
I’ve been trying to set up a mobile development environment for Vue.js using the command line ‘vue-devtools’ command. To access my localhost on the mobile device, I have set up reverse-tethering between my desktop and mobile.
The ‘Vue Developer…
Peter-M
- 145
- 10
3
votes
1 answer
How do Vue devtool detect Vue on the webpage?
When i was using webpack, I cannot access window.Vue, but the vue devtool can still work to tell whether the webpage uses vue, no matter in development mode or not.
Angular and react have their devtools too, which, i believe, can do the job as…
obfish
- 673
- 4
- 17
2
votes
0 answers
Vue devtools not working with Vue 3 Custom Elements
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the…
Lee Cichanowicz
- 101
- 1
- 6