Skip to content

README.md

Latest commit

 

History

History
19 lines (13 loc) · 1.23 KB

README.md

File metadata and controls

19 lines (13 loc) · 1.23 KB

Show React Chrome Extension

Add borders to any React component with the attribute data-ui-component. Toggle between borders vs outlines, which don't affect the layout as much.

Install:

  1. Download & unzip show_react-master
  2. Open Chrome Extensions (chrome://extensions/) and Load unpacked extension using the folder above (you may need to enable Developer Mode on this page first!)
  3. Visit OUI React tabs or app.optimizely.com

Demo:

  • OUI components have a hotpink solid border
  • App components have a mediumpurple dotted border

Note: This doesn't work on other React sites because React .15 made a change to remove automatically generated data-reactid attributes, and we had to add our own data-oui-component and data-ui-component to enable this highlighting.