https://github.com/cymen/show-me-the-react

A Google Chrome extension that highlights React components on the page.
https://github.com/cymen/show-me-the-react

react

Last synced: 3 months ago
JSON representation

A Google Chrome extension that highlights React components on the page.

• Host: GitHub
• URL: https://github.com/cymen/show-me-the-react
• Owner: cymen
• License: mit
• Created: 2015-07-22T08:47:19.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-12-20T01:39:06.000Z (almost 6 years ago)
• Last Synced: 2024-06-29T03:34:55.570Z (5 months ago)
• Topics: react
• Language: JavaScript
• Homepage:
• Size: 1.88 MB
• Stars: 569
• Watchers: 12
• Forks: 26
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
Note that the technique this extension used no longer works. You can get a very similar effect by installing the React developer tools and enabling "Highlight Updates" in the preferences. It is unlikely that the effort will be put into trying to make this extension work again however PRs are welcomed.

# Show me the React!

Available as:

* [Google Chrome extension](https://chrome.google.com/webstore/detail/show-me-the-react/iaebolhfcmodobkanmaahdhnlplncbnd?hl=en-US&gl=US)

* [Firefox extension](https://github.com/insin/show-me-the-react)

## Chrome extension details 

It is a page action so the icon (![Icon displayed in URL bar](./images/react-19.png "Icon displayed in URL bar")) only shows up in the URL

bar when the page contains React-managed DOM. It is off by default -- you have to click the icon to highlight the elements rendered/managed by React (and you can click the icon again to toggle the highlight off). You can install this from the [Chrome Web Store](https://chrome.google.com/webstore/detail/show-me-the-react/iaebolhfcmodobkanmaahdhnlplncbnd?hl=en-US&gl=US).

Credit for the original idea goes to someone on Twitter who tweeted a one liner. I can't remember who it was or find it so if someone knows, please let me know.

![Screenshot of the plugin in action!](./screenshots/show-me-the-react-1280x800.png "Screenshot of the plugin in action!")