Comments (38)
+1 Firefox support is necessary. No more of this "webkit monopoly"
from react-devtools.
As a daily Firefox Developer Edition, I'd love to see this
from react-devtools.
I'm surprised we didn't have an issue open for this already. We would definitely like to have this but haven't found the time.
from react-devtools.
I was thinking this issue is related, or it isn't?
from react-devtools.
me at first too, but read what @zpao said in that bug:
This bug as filed was fixed a while ago and really had nothing to do with React devtools.
that bug was about sourcemaps. weβre talking about a react-devtools addon being available for firefox here
from react-devtools.
I know a π doesn't help, but π for this π !
from react-devtools.
Just adding another vote here for Firefox :)
from react-devtools.
π I understand Chrome first, and most devs in my office are using Chrome, but there's quite a few of us who still use Firefox, especially since the Dev Edition came out!
from react-devtools.
I, too, would love to see the devtools on firefox. I've been using firefox over chrome for quite some time now.
from react-devtools.
Is there any pointers to where any forking would need to take place in the codebase or resources for what it would take to start working in this direction?
from react-devtools.
I work on the Firefox devtools team. We don't have great docs for extending the devtools, partially because we hope to improve a few things first. Still, it's not too hard. The hard part is pulling out all Chrome-specific code in the tool.
Ember Inspector did a great job with this. They have an "app" folder here: https://github.com/emberjs/ember-inspector/tree/master/app and it doesn't contain any browser-specific code (it might do browser checks for some things, I don't know). Then they have a folder for the specific browser; here's firefox: https://github.com/emberjs/ember-inspector/tree/master/dist_firefox/lib
That folder contains all the firefox-specific code to install the tool and other things.
Looking through this cool, it looks like it uses Chrome-specific APIs a lot throughout the entire code, which is unfortunate. I don't know how much work it would be to abstract it out.
from react-devtools.
Can we start a port of these tools for firefox? Is it feasible and viable
to do so?
On Mon, Mar 30, 2015 at 9:59 AM, James Long [email protected]
wrote:
I work on the Firefox devtools team. We don't have great docs for
extending the devtools, partially because we hope to improve a few things
first. Still, it's not too hard. The hard part is pulling out all
Chrome-specific code in the tool.Ember Inspector did a great job with this. They have an "app" folder here:
https://github.com/emberjs/ember-inspector/tree/master/app and it doesn't
contain any browser-specific code (it might do browser checks for some
things, I don't know). Then they have a folder for the specific browser;
here's firefox:
https://github.com/emberjs/ember-inspector/tree/master/dist_firefox/libThat folder contains all the firefox-specific code to install the tool and
other things.Looking through this cool, it looks like it uses Chrome-specific APIs a
lot throughout the entire code, which is unfortunate. I don't know how much
work it would be to abstract it out.β
Reply to this email directly or view it on GitHub
#56 (comment)
.
from react-devtools.
Facebook already has React Developer Tools, an excellent Chrome extension that could easily be ported to Firefox:
I was thinking that if we detect react on a page that we show a React tab after the markup tab... as to whether this should be baked in with our current toolkit or not, that is another question... that is my preference but @canuckistani would have the final say.
from react-devtools.
@ashneo76 it should be possible to do, other tools have been ported including ember inspector and batarang.
@MikeRatcliffe generally speaking my preference is to not ship framework-related tools in Firefox but instead support them as extensions. If react gets as popular as jquery is it would be more compelling.
from react-devtools.
It should be possible. Nobody has had the time to do it. I started looking into it a long time ago but got a bit busy. I really only got as far as writing a few lines of XUL to get the UI started.
The code we have here should be pretty generalizable. I haven't spent much time with it but it's really just extracting info via React on the page and displaying it. I'm sure it's pretty coupled right now so the big initial task might be to decouple it and ship another Chrome version before working on the Firefox one.
I'm with @canuckistani here - I don't think it's a great idea to bake these into Firefox directly. Let's get them written before we even entertain that idea :) @MikeRatcliffe you're in the repo for that :P
from react-devtools.
so the initial task would be to decouple this and then have different browser specific changes in the same source?
And then the next step would be to actually implement for firefox, right?
from react-devtools.
@ashneo76 I suspect so.
- Move Chrome specific implementation out of files into a
dist_chrome
folder - Implement
dist_firefox
bindings - Get MS on board for Project Spartan dev extensions.
from react-devtools.
Is there still progress being made on this, or is it on the backburner for now?
from react-devtools.
@CADBOT I don't think much progress was made on this at all. However, we know what needs to be achieved to get this done. You're free to begin work on it and/or submit a pull request. If I find some time, I might try to do this.
from react-devtools.
cc @jaredly who is considering looking into this.
from react-devtools.
These should help :
https://github.com/victorporof/Restartless-Template
https://github.com/firebug/devtools-extension-examples
from react-devtools.
@nt1m awesome thanks!
from react-devtools.
+1. I like my Firefox Dev Tools.
from react-devtools.
Another +1 here, looking forward to use it on Firefox.
from react-devtools.
This will be supported in devtools-next. https://github.com/facebook/react-devtools/tree/devtools-next
Keep in mind it is a WIP, but you can play with it today. https://github.com/facebook/react-devtools/tree/devtools-next/shells/firefox
from react-devtools.
Fixed in the new devtools: http://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html.
from react-devtools.
from react-devtools.
Tried it out, my experience is great so far. Thanks !
There are a few quirks though :
- closing then reopening the devtool
x
times on the same page showsx
times the same instance of the root component - I see this injects markup into the page. You can instead inject invisible anonymous content using this API : https://wiki.mozilla.org/DevTools/Highlighter
- I also see this injects a script on every page, you can instead use an actor or a frame script to interact with the page without injecting a script into the page's markup. Using a frame script is less hassle, but an actor allows you to get Chrome OS or Safari iOS support via valence, this allows you to get Firefox OS support as well.
Extension examples registering new actors : https://github.com/firebug/devtools-extension-examples
Extension using a frame script : https://github.com/captainbrosset/domprofiler
Documentation about frame scripts : https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Communicating_with_frame_scripts#Synchronous_messaging - Also, minor, but this doesn't integrate with DevTools dark theme
Details :
- Tried it 4 days ago, so the bug may not appear in the latest version
- testcase : http://nt1m.github.io/react-jsfiddle-app/
from react-devtools.
@nt1m do either the actor or the frame script give you direct/unfettered access to the javascript runtime, objects, etc?
from react-devtools.
@jaredly Both of them provide a unlimited access to the JS runtime, with privileged permissions too. The frame script is pretty straightforward to work with, just put your code in it, and you can use content.document.defaultView
to get DOM Window. The actor stuff requires more work (setting up the connection and stuff), and is less convenient, but it also provides you straightforward access to the DOM window : https://github.com/firebug/devtools-extension-examples/blob/master/TitleManager/lib/titleActor.js#L93
Once you have access to the DOM Window, you should get easy access to the globals and other objects stored there.
Frame scripts shouldn't get in your way with sharing cross-browser code, but it's more complicated with actors, although, you get the trade-off to support the Remote Debugging Protocol (which means you can support Firefox OS or Firefox for android)
from react-devtools.
This is great, but no longer works with Firefox due to version difference.
from react-devtools.
@raelmiu Can you elaborate?
from react-devtools.
I'm using the new beta devtools in Firefox 40.0.3 and I'm running a project that worked perfectly in Chrome but it says No react found on page... . Do I have to do more then just install the plugin?
from react-devtools.
Are you using Firefox Developer Edition? Works for me in Firefox 42.0a2.
from react-devtools.
@fjaguero I did not know I had to use the Firefox Developer Edition and thought I could just use it in my normal browser.
from react-devtools.
@MinThaMie I've been testing it with the normal firefox.
Can you verify that it works on https://facebook.github.io/react?
from react-devtools.
Yes that works. So what could be the problem?
from react-devtools.
@MinThaMie Can you file an issue with a link to the page that doesn't work in Firefox?
from react-devtools.
Related Issues (20)
- Can't install in Firefox HOT 1
- Expand all elements using default browser hot keys HOT 1
- Security issues with React.Provider HOT 5
- Search input text colour HOT 4
- Is it unmaintainable? HOT 1
- React App not Functioning with Extension Enabled HOT 1
- Having the devtools extension enabled breaks Kibana HOT 3
- New devtools is not compatible with React 0.14 HOT 5
- New Devtools: Where is Highlight Updates? HOT 5
- New Devtools Broken on Firefox 68.0.2, Windows 10 HOT 1
- React Devtools - Component selection bug v4 HOT 1
- Remove emoji from browser devtools tabs HOT 2
- New Devtools: Update props does not rerender component HOT 2
- Inspector: clicking on element with style object value causes crash HOT 1
- Firefox Private Browser Support HOT 1
- Show component file path HOT 1
- Long interaction names cannot be seen HOT 1
- Getting maximum call stack exceeded on backend.js when rendering many elements. HOT 2
- Using react-devtools to inspect component that only appears on hover HOT 1
- React devtools 4.0.4 (8/18/2019) Expected to find root ID. HOT 3
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 react-devtools.