Chrome React extension that highlights components on the page | Hacker News Reader

Chrome React extension that highlights components on the page

github.com

81 pointsobilgic23 comments

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 git@github.com: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.

Reply on news.ycombinator.com