Vue-devtools: Can you please provide a similar extension for firefox ?

[neeravp]

Kudos!! The extension is a must while learning Vue atleast. I would like to request you to provide a similar extension for Firefox.

Please! can i expect it?

Update: (17-March-2017)

It is now possible to use (chrome's) vue dev-tools in Firefox.

1. Install Firefox Developer Edition
2. Install Chrome Store Foxified extension
3. Now go to Chrome Web store and search for vue- devtools, you will now see an Add to Firefox option
4. Once you click on Add to Firefox you will get a pop up with different options, choose Save Signed Addon option and save the file to your disk.
5. Now navigate to about:addons in Firefox and click on the gear icon in the top right corner (just before the search field), you will see an option Install Addon from File in the dropdown menu.
6. Click Install Addon from file and choose the file which you downloaded and saved in Step 4.
7. The vue-devtools will get installed in Firefox, restart Firefox and start using vue-devtools in Firefox.

[yyx990803]

It's definitely planned in the future, however probably not until a few months out...

[neeravp]

Thanks. Eagerly awaiting.
On 28 Nov 2015 11:52, "Evan You" [email protected] wrote:

It's definitely planned in the future, however probably not until a few
months out...

—
Reply to this email directly or view it on GitHub
https://github.com/vuejs/vue-devtools/issues/57#issuecomment-160252649.

[skyronic]

I've started work on a firefox version of the same. You can check out my branch hope to finish this in 2-4 weeks.

Progress so far:

[yyx990803]

@skyronic very cool! Excited to have someone working on this. Let me know if you have any questions :)

[neeravp]

Awesome @skyronic , I will check out your branch.

On Mon, 30 Nov 2015 20:19 Evan You [email protected] wrote:

@skyronic https://github.com/skyronic very cool! Excited to have
someone working on this. Let me know if you have any questions :)

—
Reply to this email directly or view it on GitHub
https://github.com/vuejs/vue-devtools/issues/57#issuecomment-160651321.

[nacr]

@yyx990803 any news on this?

[PascalAOMS]

Almost half a year later. :) Any news?

[neeravp]

@yyx990803 , @skyronic - any progress? still awaiting devtools for firefox

[ptibbetts]

throwing in my vote as a firefox developer edition user

[j3j5]

Is there any news on this? I'd love to be able to use FF dev edition for Vue just as I do with everything else. @skyronic? Any plans on finishing this or at least releasing some basic instructions to install what you already had?

Thanks!

[Jonas-buriti]

Hey guys, are you still working in the FF version of dev tools? It would be a great enhancement... Tks!

[Drive4ik]

Yes! I am still working on FF devtools, and I'll be happy with Vue plugin!! :)

[thewhitetulip]

Hey folks, can we install a chrome plugin inside firefox? I remember reading this some time back. It was a blog post by Firefox team saying that we can easily install a chrome plugin inside firefox.

[adriaanzon]

Yes, it's called WebExtensions. But I don't think it works with developer tools.

see http://arewewebextensionsyet.com/#devtools.panels

[thewhitetulip]

That's bad news.

[suncoastkid]

Still no FF extension?

[ivansieder-xx]

@yyx990803 You got any update on this topic?

[gluons]

I've 🔔 subscribed this issue for Firefox addon.
Firefox user's life isn't easy with Vue as Chrome. 😭
Still looking forward to using Firefox addon. 😳

// I ❤️ Firefox. Don't tell me to use Chrome.

[imuller]

My christmas wish this year: that there will be a Firefox version of vue-devtools 🎄

[Draluy]

I'm interested in this too.

[thewhitetulip]

Anyone here wishes to build a firefox addon for Vue? I am open to collaborating, we can build our own version by checking the source code of the chrome version, do let me know if anyone is willing to participate.

[Draluy]

Skyronic has started working on it it would seem, maybe try to get in touch?
As for me, my plate is full atm unfortunately.

[skyronic]

Hey I had gotten some work done on this a long time ago by re-using ideas from the react-devtools project. I stopped using firefox due to some other reason so I didn't continue work on this.

A lot of the structure for vue-devtools is inspired by https://github.com/facebook/react-devtools

so you'd want to create a folder in 'shells' similar to this one - https://github.com/facebook/react-devtools/tree/master/shells/firefox

[thewhitetulip]

The maybe I can start working on your version itself. I've never written a extension, so it will take a little time!

[ramsayleung]

look forward to the firefox version

[wamoyo]

So, which features are prevent this from just being ported over?

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities

[wamoyo]

I can confirm that this doesn't work for our case: https://addons.mozilla.org/en-US/firefox/addon/chrome-store-foxified/

[xxzefgh]

@wamoyo devtools.panels API is needed http://arewewebextensionsyet.com/#devtools.panels
Some progress has been made recently, so hopefully we will be able to port easily soon

[lautaroramos]

This is a so-needed tool 👎 I don't want to use chrome for this matter either

[stefanpolzer]

Why is there still no plugin for Firefox? Would really appreciate it!

[posva]

Because Vue + core libs is more prioritised than this

[miladjef]

My year wish this develop this add-ons for firefox .

[dobromir-hristov]

Just to let you know, firefox Developer edition now has the panel displayed. It doesnt work atm, doesnt recognize the Vue app, but its showing up! We are almost there 😆
--- Edit ---
Ok so it actually works, I was using the hot reloaded feature of my app and devtools says "Proxy injection failed.", but if I start it from normal server, everything works for now.

[thewhitetulip]

@dobromir-hristov How do I install this for Firefox Dev edition?

[gluons]

@thewhitetulip Go to about:debugging#addons and click button and browse to add-on file (manifest.json).

[dobromir-hristov]

There is a plugin in firefox plugins to install Chrome Extensions directly from the Chrome Extensions website.

[thewhitetulip]

@gluons @dobromir-hristov I'll try this today and let you know, thanks!

[gluons]

We should wait until Mozilla finish dev tool API.

[wamoyo]

@gluons That's probably only a few months out then, no?

[xxzefgh]

it does work already on Aurora channel (don't know about other versions) with Chrome Store Foxified extension

[thewhitetulip]

@brunjick Thanks for the update! I have the Aurora channel installed, will try and confirm back!

[Zetaphor]

Also confirmed working with the latest release of dev edition and vue devtools. :tada: This works well enough for now.

• Firefox Dev Edition aurora 54.0a2 (2017-03-15) (64-bit)
• Chrome Store Foxified 2.4
• Vue.js devtools 3.1.2

[thewhitetulip]

@neeravp Can you please update the content of this issue to state that the extension now works with Firefox?

[neeravp]

@thewhitetulip I have updated the issue content .

[thewhitetulip]

@neeravp Thank you!

[Jonas-buriti]

@brunjick tks! Here is working too at Firefox Dev Edition with Chrome Store Foxified.
Look it @mauricionr

[Hendriksie]

Tested it on the latest release of Firefox (52.01 (64-bit)), although I get the icon next to the address-bar, no Vue pane can be found.

[xxzefgh]

@Hendriksie Latest release is 54.0a2 (2017-03-19) (64-bit)

[Hendriksie]

@brunjick forgot to mention that I use the normal release version, no dev edition / aurora edition

[dobromir-hristov]

@Hendriksie Yes, we are using the dev edition :)

[thewhitetulip]

Anyone here would like to write a guide about how to install this addon? I wasn't able to install it!

[gluons]

@thewhitetulip They use Chrome Store Foxified.

[thewhitetulip]

@gluons I did use that addon, it asked me to sign in using Firefox dev account, I did that, but I didn't get an option to install the addon, I could just download the .crx version or temporarily install it, I'll take a look at it today and let you know.

[neeravp]

@thewhitetulip If you have downloaded the addon, then you can go to the addon management interface in firefox by navigating to about:addons.

Once on the about:addons interface, you can click the gear icon in the top right before the search field and you will get an option Install Add-on from file, it will allow you to install the downloaded addon.

Hope this helps.

[thewhitetulip]

@neeravp This is awesome, thank you! I was able to install the addon and it looks cool. Thank you very much.

[Zetaphor]

@thewhitetulip @neeravp It should be mentioned for any future Googlers, you first want to choose the "Save Signed Addon" option. This will generate a signed XPI file you can then install from the about:addons page.

[thewhitetulip]

@neeravp @Zetaphor is right, it would be amazing if you could just copy paste the message which you sent me, the exact steps to install the addon at the top of the issue in the description, so new people finding this page via google won't face any issues.

[neeravp]

@yyx990803 Should I close the issue Evan? Or should it be open till a native Firefox addon/extension is available? Please suggest.

[gluons]

I think it should be opened til devtools API released.

This issue is for Firefox add-on. Not for installing Chrome extension in Firefox.

It hasn't been resolved.

[thewhitetulip]

@gluons Yes, until this is available in normal Firefox we should wait, when it is however, we do not need a new addon in firefox thus, we can close this, what do you think?

[yyx990803]

Well, that is good news, but I think I will keep this open until the required features land in Firefox stable. In the meanwhile, I'd be happy to take a PR updating the README to point out how to use this extension in Firefox dev build.

[neeravp]

I was thinking about a PR, but there are two things holding me back. First I have never contributed to any open source project by means of PR so am not sure about how to do it properly. I can prepare a gist and send it across you @yyx990803 .

But even before that using Chrome Store Foxified requires to sign the extension/addon, for which I had to create an account at AMO. What I am wondering is that for anyone who wants to use vue-devtools in Firefox will need to open an account at AMO just for the purpose of signing the extension.

Wouldn't it be better if we (anyone) can create an accont at AMO and sign the extension and then download the signed extension, which can then be included in this repo as a workaround for Firefox.

Then any subsequent users can just download the signed extension from here and use Install Addon from file to get vue-devtools working in firefox.

I am trying to figure out if such a signed extension can be reused.

[thewhitetulip]

@neeravp There is no rocket science in submitting a PR, you just fork the project, edit the README.md file and submit it as a PR, based on the time @yyx990803 or other collaborators have, they'll merge it.

I agree with you and I was going to say this earlier, we can just upload a signed version of the addon rather than have everyone create a firefox account as it is a waste of time and resources, if you are willing, I'd send my addon to you, just try to install it on your firefox dev, and if that's fine, we can upload it directly on github itself.

[andreicristianpetcu]

If you are fine with an unofficial build and want to run VueJS DevTools without the hassle of singing and converting the addon, I made one here.

I posted a lot of info related to Firefox addons on this issue in case you need the info.

[soapdog]

I just picked the built version in shells/chrome, duplicated that into shells/firefox and used the web-ext tool and packed it. It is working for me. It would be trivial to ship that to AMO. It would be cool if the original author did it.

[dobromir-hristov]

Do you guys have problems with the Vue devtools panel not being scrollable? Because I have to close all the tree branches to be able to see anything that is in the lower part of the panels, for example in the Vuex Store panel. This is in Firefox ofc.

[zironycho]

I am using Waterfox. I installed vuejs devtool, and restarted browser. However I couldn't find Vue tab in inspect window.

[clarkbw]

We're still waiting on Firefox to complete bug 1300590 such that $0 and inspect bindings will work in the devtools.inspectedWindow.eval API. Once that lands this is the list of things I believe need to be done for this issue to be closed out.

• [x] #339 : update the manifest.json permissions
• [x] #340 : Investigate custom fonts that aren't working in Firefox
• [x] #341 : Turn on support for Firefox
  
  
  
  • [x] Change enabled popup text to say "Open DevTools"
  
  
  • [x] Add <meta charset="utf-8"> to the popups and the devtools-background.html
  
  
  • [x] Need to review the webpack options for target browser and dev mode I think we could likely just add { firefox: 55 }
  
  
  • [x] Update manifest description to mention Firefox as well as Chrome
  
  
• [x] Submit WebExtension to AMO
• [x] Update README to refer to new Firefox extension and workaround for versions older than Firefox 55
• [x] Remove Firefox workaround doc in a follow up PR when Firefox ships WebExtension API to release (Fx 55)

[clarkbw]

Investigate custom fonts that aren't working in Firefox

I'm getting this error:

downloadable font: GSUB: too large substitute

And it looks like this stackoverflow answer might be the path forward: https://stackoverflow.com/a/36803177/897414

Looks like the issue was reported https://github.com/Dogfalo/materialize/issues/4493 and fixed here https://github.com/Dogfalo/materialize/commit/5f8b46c7de5b8ce0b11e929a271495e1806b9eb0 I'll have a look at updating the font files.

[clarkbw]

Need to review the webpack options for target browser and dev mode I think we could likely just add { firefox: 55 }

Getting an error with 55 right now. Chrome is currently shipping 58 and 60 for Canary so I don't think it'll be an issue to use Fx 48 for now.

Here's the error:

Module build failed: Error: Support data exists for the following versions of firefox: 43, 44, 45, 46, 47, 48. Please raise an issue at https://gitlab.com/Rich-Harris/buble/issue

[andreicristianpetcu]

Bug 1300590 - Implement support for $0 and inspect bindings in devtools.inspectedWindow.eval just landed. It will probably be available in the next Nightly update :D

[tun100]

Great! Hope this plan come true soon

[lionel-bijaoui]

This is now official, but how exactly I install it on Firefox ?
Do I still need this workaround ?
I someone working on an official Firefox addon ?
This is very exciting!

[gluons]

@lionel-bijaoui

Firefox continues its rapid implementation of new WebExtension APIs. These APIs are designed to work cross-browser, and will be the only APIs available to add-ons when Firefox 57 launches this November.

It's on Firefox 57? It may not work now. I think we still need it for now.

[lionel-bijaoui]

@gluons Oh... I read it to fast it seem... I will wait then... 😞

[gluons]

@lionel-bijaoui Firefox Nightly is 56 now. So close. Let's try it when 57 come. 😜

[andreicristianpetcu]

@lionel-bijaoui having a workaround is silly when you can have a one click install I really hope the VueJS DevTools devs spent a few minutes to provide an official unlisted addon untill it will be ready to be listed on AMO. It makes no sense to wait for v57 especially since some of us use v56 already.

[Hendriksie]

Installing Vue-devtools via the workaround (https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-firefox.md) works great on Firefox 54 (released just a few days ago).

Only thing I noticed is that I can't scroll inside the devtools window.

[lionel-bijaoui]

@andreicristianpetcu THANK YOU! It work perfectly (except for the scroll)

[andreicristianpetcu]

@Hendriksie what is the advantage of the workaround over the one click install I proposed? The workaround seems complicated and unnecessary but please correct me if I'm wrong. I tend to like thing that just work.

[callahad]

Either is fine. Using Chrome Store Foxified directly just cuts out a middleman :)

Based on @clarkbw's comment above, it looks like all the pieces are in place for this, we just need to get it submitted to AMO and wait for the next release of Firefox to pick up a few fixes on our end.

[gluons]

Something appeared in AMO :ghost:

[clarkbw]

Firefox workaround doc was removed in c8b9b1e5428fe6c834619d21f00e1e7c620deeb4 and README was updated in 182fe6875f2b2d9b2479f6b4bee1a52863b77f37

I think we're all done here!

Thanks to everyone who helped and especially @yyx990803

[gluons]

@yyx990803 Can you add Vue logo on AMO page? Maybe easier to recognize.