Vue.js was discovered on this page. Devtools checkout is not available because it is in production mode or explicitly disabled by the author
I am trying to enable vue-devtools in Google Chrome. But I cannot enable this. I am using vue.js inside a Laravel application.
My server is running using the command php artisan serve
.
source to share
- If the page uses Vue.js production / mini-build, devtools validation is disabled by default, so the Vue panel will not be displayed.
- To make it work on pages opened via file: //, you need to check the "Allow access to file URLs" checkbox for this extension in the Chrome add control panel.
- I had to restart chrome and it worked :-)
source to share
If you are using CDN; make sure you are not using assembly (shorthand) assembly library.
Usage: https://unpkg.com/ vue@2.4.4 /dist/vue.js
Instead of https://unpkg.com/ vue@2.4.4 /dist/vue.min.js
You may need to make it appear the first time. ( Source ) Ctrl+Alt+I
source to share
When using Laravel, just make sure you are running the correct webpack for your development environment. Performance
npm watch watch
should build Vue with debug mode enabled. Using
npm start production
minimizes Vue for production. This saves you the trouble of remembering the debug mode when building for production.
source to share
You can use vue.js version. For example, get it here: https://unpkg.com/ vue@2.3.2
source to share
I saw an error in this question title and this solution worked for me:
Add Vue.config.devtools = true
to file where you instantiate Vue ( main.js
for me).
Please note that as mentioned in this answer you need to put Vue.config.devtools = true
before you create your repository for the Vuex part in devtools to work. If you create your Vuex repository in a separate file (for example store.js
), you may need Vue.config.devtools = true
both a file main.js
and a file store.js
.
This is what the changes looked like in my project:
source to share
make sure you are using a non-production Vue.js build. https://github.com/vuejs/vue-devtools/issues/62
source to share
Short answer for Vue CLI 3.x
If you are using Vue CLI 3.x you can do it simply by adding this script topackage.json
scripts: {
"test": "vue-cli-service build --mode=development"
}
explanation
This is because the Vue.config.devtools
default is set false
in production as stated in this GitHub issue . But this can be circumvented simply by using the --mode=development
flag --mode=development
provided in the documentation .
Then you can run with npm run test
and check the file in your folder dist/
! ;)
source to share