Mhmm, all it does is to highlight every DOM element that has a reactid. So it does not only highlight the components but every DOM element that was created by react, so for me this is not very helpful.

Well, I tried it on my React application (https://partsbox.io/ demo) and the highlights do not correspond to React components. As an example, table rows are components, which is not visible.

Perhaps this will be improved in the future, but for now it isn't that useful.

It's highlighting elements that have the data-reactid attribute. Do the rows not have that attribute? I am also working on a table-based view and all of my rows show up blue.

I don't know — everything shows up as blue, some components have a rectangular frame, and some do not. Perhaps the rows are simply not distinguishable from each other because of all the blue around. In any case, it isn't very helpful.

I wrote the Chrome extension -- it's just a nicer package on a one line hack someone (Pete Hunt? not sure) tweeted. The one liner modified the current DOM nodes while the extension inserts a stylesheet so it will highlight both current and future nodes.

It doesn't highlight at the component level yet. The React dev tools are good at hooking up to components (but I don't know if they rely on dev builds). It would be fun to try to get it to the component level.

For Firefox users (like me), you can copy paste the content of this file [1] in the debugger, it also works.

[1] https://raw.githubusercontent.com/cymen/show-me-the-react/ma...

Now someone just has to make this into an extension – firefox extensions are just as easy to make as chrome extensions, so it shouldn’t be an issue.

Just tried this out of curiosity and you're right: https://github.com/insin/show-me-the-react

  npm install -g jpm
  git clone [email protected]:insin/show-me-the-react.git
  cd show-me-the-react
  jpm run

Nice! I wrote the Chrome version -- I'll link the README to your extension for Firefox.

Showing/hiding the button or changing its state for the current tab seems so comparatively painful to do with a Firefox addon (versus Chrome's declarativeContent API) that the fork is no better than using the bookmarklet which does this, at the moment.

Ah! I was wondering how you did that (and what Firefox supported).

The Chrome page actions are a little buggy in UX -- when you click the icon, sometimes the URL autocomplete comes down. Maybe it is supposed to and you can put something there programmatically but I don't like it when it drops down. So a fixed icon might not be so bad.

Nice idea. Would be cool if an element's background-color changes for a second whenever it has been rerendered.

I also thought about making it have the elements background-color or some other attribute animate from teal to gray over time so new nodes would be brighter. I haven't had a chance to try it but it would be really cool to see visually how many DOM nodes are getting completely rerendered (in other words, how well one is using React).

How does this differ from the standard react developer plugin from Facebook?

- it shows a page action icon if the page contains elements rendered by React (have data-reactid attribute), the dev plugin does not do that

- for better or worse, it highlights all of the elements with data-reactid attribute so it is a different view than the developer plugin

Wow. Facebook sure uses a lot of react.

What's the definition of "too much react"? Isn't that similar to saying "too much Erb" or "too much HTML"?

I mean the whole web page was in blue color by the plugin. So you can say most of the components are based on react.

If you're going to use React, you may as well use it for the entire interface. I would imagine that the only reason you get sites which use React for only part of the page, is because they're transitioning towards using it for everything.

Not at all. I've just started a new Rails project and widgets that would normally be written with a smattering of JavaScript are now self-contained React components. I can't imagine this app ever transitioning to a single-page JS thing.

I didn't particularly mean a single-page JS app. I meant, that everything on any particular page would be constructed using React components. Rather than a combination of HTML and React components.

Isn't this a good thing? It seems encouraging that Facebook use it for pretty much everything - if they keep open sourcing their work on it we'll keep having a really well proven library. Plus it forces them to make thoughtful decisions on things like backward compatibility.

Really? For me, only some parts of the page are teal/blue. On Instagram, everything is (when logged in). On Facebook, only comments on posts and other UI items related to other people (chat list and some bar on the left).