Comments (84)
throwing in my vote as a firefox developer edition user
from devtools.
My christmas wish this year: that there will be a Firefox version of vue-devtools ๐
from devtools.
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!
from devtools.
@yyx990803 any news on this?
from devtools.
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:
from devtools.
Something appeared in AMO ๐ป
from devtools.
Firefox workaround doc was removed in c8b9b1e and README was updated in 182fe68
I think we're all done here!
Thanks to everyone who helped and especially @yyx990803
from devtools.
Yes! I am still working on FF devtools, and I'll be happy with Vue plugin!! :)
from devtools.
Hey guys, are you still working in the FF version of dev tools? It would be a great enhancement... Tks!
from devtools.
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.
from devtools.
It's definitely planned in the future, however probably not until a few months out...
from devtools.
My year wish this develop this add-ons for firefox .
from devtools.
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.
from devtools.
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.
- #339 : update the manifest.json permissions
- #340 : Investigate custom fonts that aren't working in Firefox
- #341 : Turn on support for Firefox
- Change enabled popup text to say "Open DevTools"
- Add
<meta charset="utf-8">
to the popups and the devtools-background.html - Need to review the webpack options for target browser and dev mode I think we could likely just add
{ firefox: 55 }
- Update manifest description to mention Firefox as well as Chrome
- Submit WebExtension to AMO
- Update README to refer to new Firefox extension and workaround for versions older than Firefox 55
- Remove Firefox workaround doc in a follow up PR when Firefox ships WebExtension API to release (Fx 55)
from devtools.
@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.
from devtools.
@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
from devtools.
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.
from devtools.
We should wait until Mozilla finish dev tool API.
from devtools.
it does work already on Aurora channel (don't know about other versions) with Chrome Store Foxified extension
from devtools.
Also confirmed working with the latest release of dev edition and vue devtools. ๐ 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
from devtools.
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
from devtools.
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!
from devtools.
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.
from devtools.
I'm interested in this too.
from devtools.
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
from devtools.
look forward to the firefox version
from devtools.
@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.
from devtools.
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.
from devtools.
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.
from devtools.
I am using Waterfox. I installed vuejs devtool, and restarted browser. However I couldn't find Vue tab in inspect window.
from devtools.
@skyronic very cool! Excited to have someone working on this. Let me know if you have any questions :)
from devtools.
I can confirm that this doesn't work for our case: https://addons.mozilla.org/en-US/firefox/addon/chrome-store-foxified/
from devtools.
This is a so-needed tool ๐ I don't want to use chrome for this matter either
from devtools.
@brunjick tks! Here is working too at Firefox Dev Edition with Chrome Store Foxified.
Look it @mauricionr
from devtools.
@Hendriksie Yes, we are using the dev edition :)
from devtools.
@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.
from devtools.
@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.
from devtools.
@lionel-bijaoui Firefox Nightly is 56 now. So close. Let's try it when 57 come. ๐
from devtools.
@andreicristianpetcu THANK YOU! It work perfectly (except for the scroll)
from devtools.
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.
from devtools.
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
#57 (comment).
from devtools.
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
#57 (comment).
from devtools.
Almost half a year later. :) Any news?
from devtools.
@yyx990803 , @skyronic - any progress? still awaiting devtools for firefox
from devtools.
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.
from devtools.
Yes, it's called WebExtensions. But I don't think it works with developer tools.
see http://arewewebextensionsyet.com/#devtools.panels
from devtools.
That's bad news.
from devtools.
Still no FF extension?
from devtools.
@yyx990803 You got any update on this topic?
from devtools.
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.
from devtools.
Skyronic has started working on it it would seem, maybe try to get in touch?
As for me, my plate is full atm unfortunately.
from devtools.
The maybe I can start working on your version itself. I've never written a extension, so it will take a little time!
from devtools.
So, which features are prevent this from just being ported over?
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities
from devtools.
Why is there still no plugin for Firefox? Would really appreciate it!
from devtools.
Because Vue + core libs is more prioritised than this
from devtools.
@dobromir-hristov How do I install this for Firefox Dev edition?
from devtools.
@thewhitetulip Go to about:debugging#addons
and click button and browse to add-on file (manifest.json
).
from devtools.
There is a plugin in firefox plugins to install Chrome Extensions directly from the Chrome Extensions website.
from devtools.
@gluons @dobromir-hristov I'll try this today and let you know, thanks!
from devtools.
@gluons That's probably only a few months out then, no?
from devtools.
@brunjick Thanks for the update! I have the Aurora channel installed, will try and confirm back!
from devtools.
@neeravp Can you please update the content of this issue to state that the extension now works with Firefox?
from devtools.
@thewhitetulip I have updated the issue content .
from devtools.
@neeravp Thank you!
from devtools.
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.
from devtools.
@Hendriksie Latest release is 54.0a2 (2017-03-19) (64-bit)
from devtools.
@brunjick forgot to mention that I use the normal release version, no dev edition / aurora edition
from devtools.
Anyone here would like to write a guide about how to install this addon? I wasn't able to install it!
from devtools.
@thewhitetulip They use Chrome Store Foxified.
from devtools.
@neeravp This is awesome, thank you! I was able to install the addon and it looks cool. Thank you very much.
from devtools.
@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.
from devtools.
@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.
from devtools.
@yyx990803 Should I close the issue Evan? Or should it be open till a native Firefox addon/extension is available? Please suggest.
from devtools.
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.
from devtools.
@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?
from devtools.
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.
from devtools.
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 Dogfalo/materialize#4493 and fixed here Dogfalo/materialize@5f8b46c I'll have a look at updating the font files.
from devtools.
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
from devtools.
Great! Hope this plan come true soon
from devtools.
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.
from devtools.
@gluons Oh... I read it to fast it seem... I will wait then... ๐
from devtools.
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.
from devtools.
@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.
from devtools.
@yyx990803 Can you add Vue logo on AMO page? Maybe easier to recognize.
from devtools.
Related Issues (20)
- Pinia doesn't show up in devtools (Nuxt 3 app) HOT 2
- Suddenly Pinia doesn't show up anymore HOT 1
- Vue devtools crashes chrome HOT 3
- Jumping to top of Apps list HOT 1
- ไฝฟ็จElement-plus็uploadๆถ๏ผๅผๅ่ ๅทฅๅ ท็ไธๅฐ็ปๅฎๅจupload็ๅผไธ็response
- devtool does not appear HOT 71
- Loads of Vue warns with 6.6.0 HOT 1
- Cannot update Pinia values
- Add UI scale
- component selection tool not working HOT 11
- Freezing Microsoft Edge
- The extension conflicts with walutomat.pl (the site is broken when the extension is enabled) HOT 1
- state, render, currentRoute errors in console HOT 3
- Component graph doesn't show custom renderer components
- Vue Devtools' detector-exec.js in combination with Cookiebot prevents DOMContentLoaded event?
- Performance tab: Wrong timing shown on group
- Devtools Gets "Stuck", Doesn't Refresh on Browser Refresh HOT 9
- Unable to view event details in timeline
- Some component does not show the props panel. HOT 1
- Component State Not Updating HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from devtools.