search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.66k stars 4.15k forks source link

[Firefox] No VueJS tab in developer tools #366

Closed manniL closed 6 years ago

manniL commented 7 years ago

OS: Ubuntu 17.04 zesty Firefox Version: 54.0 (64 bit) VueJS dev tools version: 3.1.5 (official one)

After using the VueJS dev tools for a while, it happend to me that the Vue tab doesn't pop up in the developer tools anymore. It doesn't work on any site which uses Vue (in dev mode). In Google Chrome, the tools work as before. Other Dev Tools (like React) do work too.

image

manniL commented 7 years ago

However, it started working for me again.

Still letting this open because it looks like people having this issue too (#367)

ypeskov commented 7 years ago

Firefox 54.0 (x64) Ubuntu 16.04
I have the same issue. Vue is detected on but the panel is absent vue-absent

Any ideas?

ttpcodes commented 7 years ago

Yeah, this is a very mysterious issue.

I installed the Vue DevTools yesterday and had the same issue occur with the missing tab. But it's here now, about 24 hours later.

ypeskov commented 7 years ago

I have resolved the issue (at least for myself).

The tab appears after removing React Devtools extension. It seems they are in a conflict.

GeekJosh commented 7 years ago

@ypeskov thank you! It's a shame that we can't use both tools simultaneously but so grateful for a workaround

ttpcodes commented 7 years ago

Hmm, that makes me wonder about whether or not this is actually two separate issues. I didn't have React Devtools installed but had the same issue with the missing menu.

smallp commented 7 years ago

Same issue. Ubuntu 17.04 x64, Firefox Version: 53.0.2 (64 bit). I have disabled all other extensions. However, it still not shows. Click the botton in toolbar, it shows "Vue.js is detected on this page. Open DevTools and look for the Vue panel. "

Jantho1990 commented 7 years ago

Same issue. Ubuntu 16.04 x64, Firefox Version: 54.0 (64bit).

EDIT: I forgot that I had React DevTools installed. I disabled them and Vue DevTools now works.

hbielenia commented 7 years ago

Same issue. Debian Buster, Firefox 52.2.0 ESR (64-bit). Don't have React DevTools.

I thought that maybe WebSockets extension conflicts with Vue DevTools in a similar way, but disabling it didn't solve the issue.

i-erokhin commented 7 years ago

Same issue. Version 3.1.6, Firefox 52.3.0 (64-bit), Debian 9.1

screenshot from 2017-08-11 14-04-35 screenshot from 2017-08-11 14-05-12 screenshot from 2017-08-11 14-06-12 screenshot from 2017-08-11 14-11-48

Anand-Moghe commented 7 years ago

I am having same issue today August 29, 2017. I am on MAC OS X 10.11.16 (El Capitan). I had VueJS developer extension working in firefox and now suddenly stopped working. I reinstalled the firefox using 'brew cask install firefox' and the version is 55.0.3 (64-bit). Still no extension tab is visible to debug VueJS in firefox. But I can see that the VueJS is enabled on the toolbar.

01BTC10 commented 7 years ago

Same problem with Firefox ESR 52.3.0

I reset the browser to default then reinstalled the extension. I got this log in the console:

TypeError: can't redefine non-configurable property "__VUE_DEVTOOLS_GLOBAL_HOOK__" localhost:8000:66:3 installHook http://localhost:8000/:66:3

http://localhost:8000/:1:12 [17] jar:file:///home/r2d2/.mozilla/firefox/bsfzuii9.default/extensions/%7B5caff8cc-3d2e-4110-a88a-003cc85b3858%7D.xpi!/build/hook.js:80:1 __webpack_require__ jar:file:///home/r2d2/.mozilla/firefox/bsfzuii9.default/extensions/%7B5caff8cc-3d2e-4110-a88a-003cc85b3858%7D.xpi!/build/hook.js:20:12 jar:file:///home/r2d2/.mozilla/firefox/bsfzuii9.default/extensions/%7B5caff8cc-3d2e-4110-a88a-003cc85b3858%7D.xpi!/build/hook.js:63:18 jar:file:///home/r2d2/.mozilla/firefox/bsfzuii9.default/extensions/%7B5caff8cc-3d2e-4110-a88a-003cc85b3858%7D.xpi!/build/hook.js:1:11
01BTC10 commented 7 years ago

After some more digging I found out that Debian ship with Firefox ESR. I installed Firefox instead and now it works fine. I think the ESR version doesn't support the new WebExtension format.

blackinitial commented 7 years ago

The fixes solution is disable addons vue-devtools in firefox and restore again.

fanyer commented 7 years ago

@ypeskov react devtool has conflicts with vue devtool

hanxue commented 7 years ago

Confirm that the workaround is to disable vue-devtools, then restart Firefox's developer tool again.

OS: macOS 10.10.5 Firefox: 55.0.3 React Developer Tools: 2.5.0 Vue.js Devtools: 3.1.6

neithere commented 7 years ago

Confirming that this solves the problem:

  1. Close devtools
  2. Disable Vue.js devtools add-on
  3. Enable it again
  4. Open devtools

OS: GNU/Linux (ArchLinux) Firefox: 55.0.3 (64-bit) Vue.js devtools: 3.1.6 No React-related add-on installed.

vizvamitra commented 6 years ago

Solution above doesn't work in vivaldi 1.12.955.48, Ubuntu 16.04, flash switched off (not shure if this can be relevant). Also I've tried to switch off all other plugins and it doesn't help either

benheu commented 6 years ago

Confirming as @neithere :

  1. Close devtools
  2. Disable Vue.js devtools add-on
  3. Enable it again
  4. Open devtools

OS: Ubuntu 16.04 LTS Firefox: 56.0 (64-bit) Vue.js devtools: 3.1.6 No React-related add-on installed.

I also had the problem in Chrome(62), and the same trick solved it.

gima commented 6 years ago

The trick works (disable,enable the extension & re-open devtools).

Not sure if this is relevant, but web page's console shows this after enabling the extension:

image

Edit: Vue.js devtools 3.1.6, Firefox 57.0-2 (64-bit), Arch Linux

cedricium commented 6 years ago

I too am seeing the same error @gima showed. Following the above four steps that has been suggested to get the Vue.js devtools working does not work on my machine.

mikaelhadler commented 6 years ago

Hello guys, i seeing the same error @gima.

I tried the above steps without success.

error-firefox-57 0 3

Vue.js devtools 3.1.7, Firefox 57.0.3 (64-bit), Windows.

I trying to downgrade Firefox version for Firefox 57.0.2 (64-bit), Windows, after this downgrade the Vue.js devtools 3.1.7 works fine now. 👍

lomelisan commented 6 years ago

I had the same problem in Xubuntu 64bit Firefox 58.0.1. Tried everything you said here but it didn't help me. I finally solved using the dist cdn "https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js" instead of the regular cdn "https://cdn.jsdelivr.net/npm/vue"...

fonfon commented 6 years ago

Same issue here: Firefox ESR 52.3.0 (64-bit) on Debian jessie; Disabling/enabling doesn't work for me.

dnuob commented 6 years ago

same issue, ff 58.02, adds-on, 4.1.3

jonathanmusto commented 6 years ago

same, ff quantum 58.0.2, osx 10.13.3, addon 4.1.3

morcegon commented 6 years ago

Same here: ff quantum 60.0b5, osx 10.13.3, addon 4.1.4

kkdoo commented 6 years ago

same problem: chrome 65.0.3325.181 (64 bit), osx 10.13.3, addon 4.1.4

wireless_headsets_for_office_and_mobile_phone_-_sennheiser_ _frontend_ _-bash_ _157x47

PS: Also disabled all other addons - doesn't work too.

lomelisan commented 6 years ago

I have posted the solution for my case here. Hope it works for yours too. https://stackoverflow.com/questions/49640076/no-vuejs-tab-in-firefox-developer-tools

stefl0n commented 6 years ago

Another extension seems to get in conflict with the vuejs extension: The jQuery Debugger https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi After deactivating it the vue panel shows up as expected.

SedemQuame commented 6 years ago

was having the same problem, solved it by restarting the developer console. closing and currents tabs using the inspector or console

MiguelAtTweddle commented 6 years ago

I have resolved the issue (at least for myself).

The tab appears after removing React Devtools extension. It seems they are in a conflict.

Instead of removing you can disable React DevTools.

SedemQuame commented 6 years ago

okay thanks for the info will try it out

On Tue, Sep 25, 2018 at 3:50 AM MiguelAtTweddle notifications@github.com wrote:

I have resolved the issue (at least for myself).

The tab appears after removing React Devtools extension. It seems they are in a conflict.

Instead of removing you can disable React DevTools.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-devtools/issues/366#issuecomment-424198620, or mute the thread https://github.com/notifications/unsubscribe-auth/Acq2VF1O7AH9icPhtVGOtuOycNjZues0ks5ueagRgaJpZM4OPbUd .

AliN11 commented 5 years ago

My problem solved by using non-minified version.

aneurysmjs commented 5 years ago

Confirming that this solves the problem:

  1. Close devtools
  2. Disable Vue.js devtools add-on
  3. Enable it again
  4. Open devtools

OS: GNU/Linux (ArchLinux) Firefox: 55.0.3 (64-bit) Vue.js devtools: 3.1.6 No React-related add-on installed.

yeah, it solved for me

problemmaths commented 5 years ago

I am having the same issue. Vue is recognised but does not appear in the devtools as a tab. None of the above solutions have worked for me.

markpesantes commented 5 years ago

@problemmaths What worked for me is going to dev tools settings (top right corner 3 dots icon), find the section Developer tools installed by add-ons, and toggle the Vue.js devtools checkbox on & off while on the page

jclopmel commented 5 years ago

Happens the same here but, after a navigator restart and opening a Vue.js project, it perfectly worked. Try it!

JapaneseMayonnaise commented 5 years ago

If you are using firefox and having this problem, disable Firefox DevTools ADB Extension. The tab finally shoed up for me by doing so

Inffinite commented 4 years ago

OS: Ubuntu 17.04 zesty Firefox Version: 54.0 (64 bit) VueJS dev tools version: 3.1.5 (official one)

After using the VueJS dev tools for a while, it happend to me that the Vue tab doesn't pop up in the developer tools anymore. It doesn't work on any site which uses Vue (in dev mode). In Google Chrome, the tools work as before. Other Dev Tools (like React) do work too.

image

Just close all tabs in the browser and launch it again. Problem solved.

Bac3Phi commented 4 years ago

disable React Developer Tools, it worked for me <3

femaimi9527 commented 4 years ago

OS: Ubuntu 17.04 zesty Firefox Version: 54.0 (64 bit) VueJS dev tools version: 3.1.5 (official one)

After using the VueJS dev tools for a while, it happend to me that the Vue tab doesn't pop up in the developer tools anymore. It doesn't work on any site which uses Vue (in dev mode). In Google Chrome, the tools work as before. Other Dev Tools (like React) do work too.

image

Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Akryum commented 4 years ago

@femaimi9527 Spamming closed issues won't get you help 😕

Kyrluckechuck commented 4 years ago

Has anyone been able to locate a workaround or would it make more sense at this point to create a new issue for tracking this incompatibility?

jerrychong25 commented 4 years ago

For me, I managed to make it working by:

  1. Close all Vue.js websites
  2. Close DevTools
  3. Disable Vue.js DevTools add-on
  4. Enable DevTools again
  5. Open DevTools
ahmy1996404 commented 4 years ago

open devtool or right click then inspect element then press 'F1' then mark on Vue.js dev tools under the Developer tools installed by add-ons

mitestainer commented 3 years ago

open devtool or right click then inspect element then press 'F1' then mark on Vue.js dev tools under the Developer tools installed by add-ons

This worked for me, thanks!

uros-5 commented 3 years ago

try this:

vue_disabled_firefox