Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

VueJs dev tools panel not showing

Tags:

vue.js

vue-resource

vuejs2

I started using vue dev-tools in my application but it is not visible when in developer mode in Chrome. I tried various solutions found on the dev-tools github page and in other places on the web, but no luck. Below are the things i have done/tried to get it to display.

  1. Enabled allow access to file URL’s option in the chrome extension
  2. Added Vue.config.debug = true; Vue.config.devtools = true; just before new Vue({})
  3. Added non-minified versions of VueJS file
  4. Also I am using Chrome latest version: 55.0.2883.87.

I do get the following message when I click on the chrome extension enter image description here

Except the panel is not actually showing.

Does anyone have a solution to this? Thanks.

like image 605
Malik Avatar asked Jan 06 '17 11:01

Malik

People also ask

Why is my Vue Devtools not showing?

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

How do I access Vue Devtools in Chrome?

Start the application by running `npm start` and navigating to http://localhost:8080/. Open Chrome DevTools and you should find a tab for Vue.

How do I turn off Vue Devtools in production?

change console. log globally to filter out this particular message → not "The Vue Way" modify the source code of Vue → not "The NPM Way" kindly ask the Vue developers to remove this → takes time + change likely to be refused for business reasons.

1 Answers

I could not get the Vue icon to be active on the menu bar, however I was able to get the Vue tab to show in the Chrome developer tools. Try the following:

  • Close the Chrome developer tools window
  • Hard refresh the browser
  • Re-open the developer tools window and look for the Vue tab

The icon in the toolbar might still indicate that it cannot detect Vue, but the tab should be visible in the Chrome developer tools.

like image 116
Daryn Avatar answered Oct 05 '22 19:10

Daryn
Sign in to Comment

Related questions

Accessing nested child components in VueJS
Vue JS: Difference of data() { return {} } vs data:() => ({ })
VueJs vue-router linking an external website
Vue.js ref inside the v-for loop
Vuejs typescript this.$refs.<refField>.value does not exist
Error message. "Props with type Object/Array must use a factory function to return the default value."
Which is better vue-native or nativescript-vue? [closed]
Passing boolean Vue prop value in HTML
How to get current route name in Nuxt.js?
Vuex: Skipping Action and committing Mutation directly from Component
How to use onfocusout function in vue.js?
`This` is undefined in vue.js watcher
How to run production site after build vue cli
Click event target gives element or it's child, not parent element
Set data Type in Vue data object with Typescript
How to disable eslint rule max line length for paragraph in <template> of vue.js?
How to define a temporary variable in Vue.js template
How to access a computed property from a method in a Single File Component with Vue.js
How could I use const in vue template?
Vuex | How to commit a global mutation in a module action?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!