
Chrome React extension that highlights components on the page - obilgic
https://github.com/cymen/show-me-the-react
======
eskimobloood
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.

------
jwr
Well, I tried it on my React application
([https://partsbox.io/](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.

~~~
Cymen
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.

~~~
jwr
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.

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

------
realusername
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...](https://raw.githubusercontent.com/cymen/show-me-the-
react/master/js/highlight.js)

~~~
kuschku
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.

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

    
    
      npm install -g jpm
      git clone git@github.com:insin/show-me-the-react.git
      cd show-me-the-react
      jpm run

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

~~~
insin
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.

~~~
Cymen
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.

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

~~~
Cymen
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).

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

~~~
Cymen
\- 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

------
arianvanp
Wow. Facebook sure uses a lot of react.

