10 ms·

Chrome React extension that highlights components on the page

81 points by obilgic 11y ago

arianvanp 11y ago
Wow. Facebook sure uses a lot of react.
- deleted 11y ago
  [deleted]
  - jon-wood 11y ago
    What's the definition of "too much react"? Isn't that similar to saying "too much Erb" or "too much HTML"?
    - techaddict009 11y ago
      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.
      - mike-cardwell 11y ago
        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.
        colinramsay 11y ago
        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.
        mike-cardwell 11y ago
        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.
      - mcintyre1994 11y ago
        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.
      - Cymen 11y ago
        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).
eskimobloood 11y ago
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.
- chrshawkes 11y ago
  if that is true, what a waste of time.
realusername 11y ago
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/master/js/highlight.js https://raw.githubusercontent.com/cymen/show-me-the-react/ma...
- kuschku 11y ago
  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 11y ago
    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 11y ago
      Nice! I wrote the Chrome version -- I'll link the README to your extension for Firefox.
      - insin 11y ago
        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 11y ago
        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.
deleted 11y ago
[deleted]
mtschopp 11y ago
Nice idea. Would be cool if an element's background-color changes for a second whenever it has been rerendered.
- Cymen 11y ago
  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).
jwr 11y ago
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 11y ago
  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 11y ago
    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.
bluejekyll 11y ago
How does this differ from the standard react developer plugin from Facebook?
- Cymen 11y ago
  - 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
Cymen 11y ago
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.

81 points by obilgic 11y ago

arianvanp 11y ago

Wow. Facebook sure uses a lot of react.

deleted 11y ago
[deleted]
- jon-wood 11y ago
  What's the definition of "too much react"? Isn't that similar to saying "too much Erb" or "too much HTML"?
  - techaddict009 11y ago
    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.
    - mike-cardwell 11y ago
      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.
      - colinramsay 11y ago
        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.
        mike-cardwell 11y ago
        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.
    - mcintyre1994 11y ago
      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.
    - Cymen 11y ago
      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).

eskimobloood 11y ago

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.

chrshawkes 11y ago
if that is true, what a waste of time.

realusername 11y ago

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

kuschku 11y ago
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 11y ago
  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 11y ago
    Nice! I wrote the Chrome version -- I'll link the README to your extension for Firefox.
    - insin 11y ago
      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 11y ago
        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.

deleted 11y ago

[deleted]

mtschopp 11y ago

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

Cymen 11y ago
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).

jwr 11y ago

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 11y ago
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 11y ago
  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.

bluejekyll 11y ago

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

Cymen 11y ago
- 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

Cymen 11y ago

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.