React-devtools: Support Firefox

[flying-sheep]

Due to Chrome’s bugginess I prefer developing in Firefox and creating workarounds for Chrome later.

Creating a version of this for Firefox’ dev tools would help me maintaining this workflow.

[zpao]

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.

[g13n]

I was thinking this issue is related, or it isn't?

[flying-sheep]

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

[ashneo76]

+1 Firefox support is necessary. No more of this "webkit monopoly"

[vipulnsward]

I know a :+1: doesn't help, but :+1: for this :smiley: !

[caseyyee]

Just adding another vote here for Firefox :)

[JohnMaguire]

:+1: 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!

[VinSpee]

As a daily Firefox Developer Edition, I'd love to see this

[tushartyagi]

I, too, would love to see the devtools on firefox. I've been using firefox over chrome for quite some time now.

[iamdustan]

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?

[jlongster]

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.

[ashneo76]

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/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.

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-devtools/issues/56#issuecomment-87714143
.

[MikeRatcliffe]

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.

[therealjeffg]

@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.

[zpao]

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

[ashneo76]

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?

[iamdustan]

@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.

[CADBOT]

Is there still progress being made on this, or is it on the backburner for now?

[JohnMaguire]

@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.

[sophiebits]

cc @jaredly who is considering looking into this.

[nt1m]

These should help :
https://github.com/victorporof/Restartless-Template
https://github.com/firebug/devtools-extension-examples

[jaredly]

@nt1m awesome thanks!

[toastal]

+1. I like my Firefox Dev Tools.

[fjaguero]

Another +1 here, looking forward to use it on Firefox.

[iamdustan]

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

[sophiebits]

Fixed in the new devtools: http://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html.

[therealjeffg]

[nt1m]

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 shows x 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/

[jaredly]

@nt1m do either the actor or the frame script give you direct/unfettered access to the javascript runtime, objects, etc?

[nt1m]

@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)

[jesper-bylund]

This is great, but no longer works with Firefox due to version difference.

[sophiebits]

@raelmiu Can you elaborate?

[MinThaMie]

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?

[fjaguero]

Are you using Firefox Developer Edition? Works for me in Firefox 42.0a2.

[MinThaMie]

@fjaguero I did not know I had to use the Firefox Developer Edition and thought I could just use it in my normal browser.

[jaredly]

@MinThaMie I've been testing it with the normal firefox.
Can you verify that it works on https://facebook.github.io/react?

[MinThaMie]

Yes that works. So what could be the problem?

[sophiebits]

@MinThaMie Can you file an issue with a link to the page that doesn't work in Firefox?