VueJs dev tools panel not showing

Question

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.

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

I do get the following message when I click on the chrome extension

Except the panel is not actually showing.

Does anyone have a solution to this? Thanks.

I contributed to vue-devtools-3.0 so I was following closely to make sure nothing I did broke anything. This is likely the issue: https://github.com/vuejs/vue-devtools/issues/218 — Bill Criswell, Jan 06 '17 at 14:52
unfortunately i still have the same issue . I tried different way to get the chrome extension . By cloning the repo building the dev-tools app . But still no luck . I don't see the vue dev-tools panel. — Malik, Jan 06 '17 at 19:17
Any chance you could mark my answer below as the correct one? — Daryn, Jan 11 '21 at 13:16
This is how my experience with it began: The devtool wasn't functioning when the build was set to prod mode. Initially, I was running my application on my local machine, and after fixing some bugs, I deployed the build using "npm run build" to the production environment. However, upon trying to run the application locally again, I found that the Vue dev tools had stopped working. To resolve the issue, I deleted the "dist" directory and restarted the application in dev mode, which allowed everything to start working again. — Ngen CMS, Feb 25 '23 at 17:01

score 96 · Answer 1 · answered Jun 26 '17 at 18:28

96

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.

answered Jun 26 '17 at 18:28

Daryn

3,394
5
30
41

5

I just closed and re-open Chrome, it was enough. And thanks for the tip. – sr9yar May 16 '19 at 10:39
4

In my case, the Vue DevTools icon was illuminated and detected Vue.js, but the Vue tab was absent from Chrome's DevTools panel. Closing DevTools, hard-refreshing the page, and re-opening DevTools allowed me to see the Vue panel, but none of the Vue functionality was present (e.g., no components detected). I had to close Chrome completely and relaunch it, and then everything worked as expected. Odd. – Ben Johnson May 22 '19 at 20:41

score 25 · Answer 2 · answered Oct 06 '17 at 06:43

25

I had this same issue, I was using minified vue from cdn "vue.min.js" .Then I removed that and used non-minified vue. Then I reloaded browser and reopened console and the vue tab was there.

answered Oct 06 '17 at 06:43

Sebastian Gomes

775
9
12

1

Oh thanks man. This was the only solution that worked for me. saved my day. – AliN11 Dec 09 '18 at 11:14
1

This works for me. I'm just using the cdn setup. – Blues Clues Jul 10 '21 at 15:04
1

Thanks!! it's working. – Abhishek Tomar Sep 30 '21 at 16:00

score 15 · Answer 3 · edited Aug 12 '21 at 06:53

15

For me, I was running a local HTML file. By default, Chrome blocks extensions from working on local files.

3-dot menu -> More Tools -> Extensions
Find the Vue extension, click details and change turn on the setting "Allow access to file URLs:

Screenshot

close & reopen chrome

edited Aug 12 '21 at 06:53

Nicolas

2,684
1
16
22

answered Sep 12 '18 at 22:26

swiftB3

151
1
3

Found that I did NOT need to close and reopen Chrome. Got by with a hard reset. – Thom Ives Aug 11 '22 at 16:38

score 11 · Answer 4 · answered Jan 19 '17 at 11:28

11

Also found today that if you have an ad blocker installed that this also stops Vue Devtools from running properly.

answered Jan 19 '17 at 11:28

Steven Grant

1,236
3
15
32

score 9 · Answer 5 · answered Jun 10 '17 at 06:00

9

Closing the file tab and reopening it worked for me.

answered Jun 10 '17 at 06:00

Bhoomika Chauhan

153
1
3
7

score 7 · Answer 6 · edited Oct 15 '18 at 00:32

7

Restart many times Google Chrome
Don't use min file
And add before new vue instantiation:
```
Vue.config.devtools = true;
```

edited Oct 15 '18 at 00:32

Stephen Rauch

47,830
31
106
135

answered Oct 15 '18 at 00:03

Wilfried Kakou

71
1
2

score 5 · Answer 7 · answered Nov 25 '21 at 18:20

5

chrome developer tools should be close before enabling the vue dev tools extention... (if chrome devtools is open, close chrome development tools and re-open)

answered Nov 25 '21 at 18:20

Akin Zeman

447
7
9

2

yes, this fix it for me, thanks! – n3dx Jan 22 '22 at 19:22

score 3 · Answer 8 · answered May 24 '17 at 13:40

3

Just do a "hard reload" for a few times. On windows: SHIFT + F5. On Mac: CMD + SHIFT + R.

answered May 24 '17 at 13:40

Hard reload (shift + cmd + r on mac) and reload (close and open) chrome inspect solve this. (yes in 2020) – Windo Oct 29 '20 at 03:08

score 3 · Answer 9 · answered Jun 13 '21 at 08:38

3

Use the devtools beta for Vue 3. And always check if your Vue app mounted correctly.

answered Jun 13 '21 at 08:38

Ostap Brehin

3,240
3
25
28

score 2 · Answer 10 · answered Oct 28 '20 at 20:07

2

Step 1: add vue.js devtools as an extension from here

step 2: After adding vue.js devtools, close your browser.

Step 3: Open your browser and open your html page.

Step 4: click right side of your mouse and select inspect and try to find Vue.

Note: If you didn't added the CDN of vue.js, then add these line to your html file.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

answered Oct 28 '20 at 20:07

Sayad Ahmed Shaurov

499
1
7
10

Does not work. Only Beta version works for me. – Čamo May 28 '21 at 11:35

score 2 · Answer 11 · answered Nov 21 '20 at 09:16

2

You should enable Allow access to file URLs from Vue extension and then hard refresh your page with Shift + F5 It worked for me

answered Nov 21 '20 at 09:16

Saeed RayatMoghadam

279
2
7

score 2 · Answer 12 · answered Apr 20 '21 at 12:06

2

(For Firefox Browser) If the add-ons 'Vue.js devtools' is added in browser..Just click on Inspect Element (or press F12) and there is a tab of Vue along with Inspector, Console, Network etc. Click on that Vue tab and enjoy debugging.

answered Apr 20 '21 at 12:06

abhijeetThakur

51
5

score 1 · Answer 13 · answered Aug 03 '17 at 03:22

1

Just do hard reload and close development console then reopen it.

answered Aug 03 '17 at 03:22

thavorac

71
7

I didn't down vote this, I think the reason it was down voted is because it looks like a copy of my answer which was made a few months before... – Daryn Aug 10 '17 at 10:03

score 1 · Answer 14 · answered Jan 13 '21 at 07:34

1

Hard Reload, help me.

Open devtools -> right click on reload button -> Hard Reload

answered Jan 13 '21 at 07:34

Marcin Wronecki

11
1

score 0 · Answer 15 · answered Jan 22 '18 at 09:53

0

Please make sure you don't use the production CDN. The only way that make it work for me is to use the VueJS dev version.

Development : vue.js

answered Jan 22 '18 at 09:53

Mohamed Salem Lamiri

5,767
6
34
47

score 0 · Answer 16 · answered Jan 29 '19 at 14:31

This happens to me periodically, pretty annoying because there seems to be no cause.

Go to Chrome browser extensions
Remove the Vue DevTools extension
Add it back again
Hard refresh your page

Chrome - Version 71.0.3578.98

MacOS Mojave 10.14

VueJS 2.5.21

score 0 · Answer 17 · edited Jul 11 '20 at 23:42

0

close the chrome app
re-run development server
re-open chrome app
open localhost
press F12 (to open development tools)

edited Jul 11 '20 at 23:42

Dharman

30,962
25
85
135

answered Jul 11 '20 at 23:36

Edsel Ayala

209
4
7

vekinox · Answer 18 · 2022-11-03T13:20:13.367

0

Maybe obvious but the Vue panel is not available when in incognito mode. In this case, the Vue icon is not visible either.

Enter chrome://extensions in the address bar and click on Details for Vue.js devtools. Scroll down to "Allow in Incognito" and switch to On.

edited Nov 03 '22 at 13:20

answered Feb 09 '21 at 18:46

vekinox

41
4

This is not an answer to the question. Can you add any information, e. g. for what to do when incognito mode is the problem? – philburns Jul 04 '22 at 12:44

score 0 · Answer 19 · answered Aug 15 '21 at 16:25

0

In case you are using vue3, uninstall Vue devtool extension and install the beta version. you can install it for chrome from the below link: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

answered Aug 15 '21 at 16:25

Alireza Bahrololoom

322
2
5

If just adding information to an existing answer, consider leaving a comment instead of posting a duplicate – Aram Becker Aug 16 '21 at 15:01

score 0 · Answer 20 · answered Sep 03 '21 at 05:19

In @Daryn answer he mention that he has problems witch vue icon - here is solution to this part of running vue extension on chrome which in the same time also solve OP problem for me:

During plugin installation for short moment in upper right chrome corner the VUE ICON appears with message (screenshot is not my):

And CRITICAL is to click right button on that icon (without close that message!) and choose "PIN" (it pin to extensions icons bar) - if you not do it - then you will never see that icon again (which is mistake). After that shut down and reopen chrome. And now in you page with vue, this icon should have green colors (you can click on it) and click right button on some page element (or on screen center) and choose "Inspect" to see

score 0 · Answer 21 · answered Sep 04 '21 at 01:59

0

maybe you can go to settings then go to preferences then look for persistence then enable local overrides, sorry my english is not good

answered Sep 04 '21 at 01:59

Safuh

87
1
1

score 0 · Answer 22 · answered May 29 '22 at 16:44

Don't know if this helps but make sure to refer to app.js in your view file you are rendering in your current path. Laravel example from view file: <script src="{{ asset('js/app.js') }}" defer></script>

This way the vue extension starded working for me.

score 0 · Answer 23 · answered Aug 02 '22 at 11:08

0

You should run

npm run watch

or

npm run dev

otherwise you can not see Vue Toolbar

answered Aug 02 '22 at 11:08

Mehmet Ali kandemir

51
6

score 0 · Answer 24 · answered Sep 14 '22 at 05:08

0

Restarting Chrome worked for me

answered Sep 14 '22 at 05:08

Ayenew Yihune

1,059
13
19

score 0 · Answer 25 · answered Feb 24 '23 at 20:54

Check 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. Use a non-minified, non-prod version of Vue on CDN Set the VUE_PROD_DEVTOOLS environment variable for Vue 3 when using a bundler like Webpack (more info).
Try closing the devtools pane, refreshing the page and opening the devtools pane again.
Try restarting the browser or the computer.
If you have multiple versions of the Vue devtools installed, it's recommended to disable/remove the others.
Try disabling other devtools extensions like React devtools.
Look for errors in the browser Console.
Update your project dependencies.
Even if the Vue logo in the toolbar is gray and says "Vue not detected", open your browser devtools and check if the Vue tab is showing up anyaway.

more details bellow down link

"devtools don't Show Up" GUIDE

score -1 · Answer 26 · answered Mar 25 '22 at 05:17

-1

don't forget about

npm run dev

(or something like in your project)

And then try advisions from first answers

answered Mar 25 '22 at 05:17

Necro The Human

16
1
5

that does not answer the question, as it's mentioned that vue is running at all – normic Mar 29 '22 at 14:52
Heh, I just made this mistake – Necro The Human Mar 30 '22 at 15:03
1

Great, that you found it, but again, this doesn't answer the question and in the question it's made clear that npm was running. So this answer is like "yes, me too". Please have a look here: https://stackoverflow.com/help/how-to-answer – normic Mar 30 '22 at 23:24

VueJs dev tools panel not showing

26 Answers26