<h2>Overview</h2>
<p>React Sight is a tool that provides a live view of the component hierarchy tree of React applications, complete with support for React Router and Redux. It offers a visual representation of the structure of the app to help developers understand how components are organized without modifying any existing code. The tool is available as a Chrome extension and now also supports Firefox.</p>
<h2>Features</h2>
<ul>
<li><strong>Live Component Hierarchy</strong>: Visual representation of the component hierarchy tree.</li>
<li><strong>Support for React Router and Redux</strong>: Includes support for React Router and Redux components.</li>
<li><strong>Interactive Node Information</strong>: Hover over nodes to view their state and props in a side panel.</li>
<li><strong>Built-In Filters</strong>: Hide DOM elements, Redux components, and Router components for better focus.</li>
<li><strong>Zoom Functionality</strong>: Zoom in by double-clicking, zoom out by Shift + double-clicking.</li>
<li><strong>Easy Installation</strong>: Simple setup process requiring only the installation of a Chrome extension.</li>
</ul>
<h3>Chrome Extension</h3>
<ol>
<li>Add React Dev Tools to Chrome.</li>
<li>Install React Sight from the Chrome Web Store.</li>
<li>Ensure "Allow access to file URLs" is enabled in the extension settings for React Dev Tools and React Sight.</li>
<li>Open Chrome Developer Tools (cmd+opt+j) and access the React Sight panel.</li>
</ol>
<h3>Firefox Add-on</h3>
<ol>
<li>Add React Dev Tools to Firefox.</li>
</ol>
