Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author

Question

I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.

My server runs using php artisan serve command.

Bah

OK, how do you enable vue.js. Did you install it with Laravel. (Ok I don't know Laravel). However, that would be nice to know – Provinciality

No, It come as default in Laravel. laravel.com/docs/5.4/frontend#writing-javascript – Bah

OK, as I understand do you use npm to manage all scss and javascript packages. Is that right? You may can look into your package.json which version of vue is used. Like it is explained here: vuejs.org/v2/guide/… if you using the minified version it is only availble in production mode and no dev tools will work. – Provinciality

Answer 1

I was seeing the error message in this question's title and this solution worked for me:

Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).

Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.

Below is what the changes looked like in my project:

Futility

Answer 2

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
3. I had to restart the chrome, and it worked :-)

Postbox

I had to change from cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js to cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js – Equiponderate

This did not work for me, even with a Chrome restart. – Banquer

Answer 3

Updated Aug 2022
So apparently as @kissu said, the answer below causes the released code to be an unoptimized one. This might be different than what you want if you want to check production code while being able to check Vue Dev Tools.

Just be aware of it. Unless you don't mind checking the released code in an unoptimized bundle, then the following script is fine. If you don't like the Vue.config.devtools value being static, it might be time to consider env variables or something similar.

Here's how to setup Environtment Variables in Vue

---

Alternative answer for Vue CLI 3.x
Besides what @NathanWailes has said, this is an alternative which allows the Dev Tools to be available through scripts instead of writing it in your main Vue entry (which is usually main.js or index.js).

You can do this by simply adding this script to package.json

scripts: {
   "start:dev": "vue-cli-service build --mode=development"
}

Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.

Then you can run using npm run start:dev and check the file in your dist/ folder! ;)

Wrapper

Similar approach when using Vite: "vite build --mode development", as documented here: vitejs.dev/guide/env-and-mode.html#modes – Aquila

Sorry, forgot the step 2, adding the run script to my deploy. ::) works like charm. – Pentha

Isn't this sending an unoptimized bundle to production? Probably not a good idea. – Backhouse

@Backhouse The OP wants to enable Vue Dev Tools, this only answers that question. Now how you use it is another issue. That's why I added a custom script start:dev. Nonetheless, this answer was when I used Vue 2. I haven't been using Vue 3 yet. If you have something to add, feel free to add it. – Wrapper

Nothing related to Vue2 vs 3 and also, even if this one answers the question it's still hiding quite a big quirk. OP not being aware of such impact, is probably not something that he wants. It's like recommending to cut one of your arms with the purpose of loosing weight, yeah it works indeed. Probably not a viable solution overall tho. – Backhouse

Thanks for the comment @kissu. I haven't been in a Vue project for a while, what enhancement do you suggest to this answer? Or maybe if you have any references that refer to this issue it would be great! – Wrapper

I basically recommend the most official solution aka the most upvoted one here. – Backhouse

Thanks @kissu. I just remembered what you meant. Hope the updated answer pleases you and the others! 🥳 – Wrapper

Answer 4

If your using CDN; make sure your not using a production (minified) build of the library.

Use: https://unpkg.com/[email protected]/dist/vue.js

Instead of: https://unpkg.com/[email protected]/dist/vue.min.js

You might need to do Ctrl+Alt+I for it to show up the first time. (Source)

Note

Answer 5

vite build --mode development

In order to enable Vue devtools for vite build --mode development you need this config:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => ({
  ...
  define: {
    __VUE_PROD_DEVTOOLS__: mode !== 'production'
  },
}))

Corby

This is the solution for Vue 3! – Disaccustom

This is the only solution that worked for me with Vite + Laravel + Inertia.js – Lecture

Answer 6

You may use the dev version of vue.js. For example get it here: https://unpkg.com/[email protected]

Provinciality

It comes with Laravel 5.4. If you can explain more, it would be nice. I will update the question. – Bah

Answer 7

When using Laravel just make sure you run the proper webpack for your environment for development . Running

npm run watch

should build Vue with debug mode on. Using

npm run production

minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.

Ssw

Answer 8

For me Installing latest Vue dev tools - link and enabling 'Allow access to file URLs' in extension settings resolved the issue.

Nightgown

Answer 9

make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62

Aloke

Answer 10

Just add into vue.config.js:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

delete package-lock.json, node_modules, run npm i and VueJS Devtool will be working

Merci

Answer 11

you could try to set environment variable NODE_ENV to 'development' (e.g. set NODE_ENV=development on Windows or export NODE_ENV="development" under Linux) before launching Vue dev server.

Necrose

Answer 12

In my case for Laravel 9 fresh installation, I forgot to run sail npm run dev.

Geometrid

Answer 13

If you're using Vite you can configure your environment directory via shared options. If you change that and have NODE_ENV set to production you'll receive this message when trying to inspect your app.

Sidky

Answer 14

If you are using the CDN version of Vue, then you need to set the following configuration:

Vue.config.devtools = true;

After running this command, open the browser console and refresh the page. If the Vue DevTools still don't show up, then try clearing the cache in your browser.

Marvin