Angular Component Finder

Inspect Angular component selectors on the current webpage using a side panel developer tool.

Short Description Quickly inspect Angular components and selectors on any Angular webpage using a simple Chrome side panel tool. Full Description Angular Component Finder is a lightweight developer tool that helps you quickly inspect Angular components used on any Angular web application. The extension scans the current page and lists Angular component selectors such as app-, lib-, ui-, and feature-. Developers can easily identify the structure of Angular applications and highlight components directly on the page. This tool is useful for Angular developers, UI debugging, component exploration, and understanding large Angular application structures. Features • Automatically detects Angular component selectors • Displays Angular components used on the current page • Hover over a selector to highlight the element in the webpage • Works with dynamically loaded Angular components • Export component lists as TXT or HTML reports • Includes a Refresh button to manually rescan the current page • Lightweight and developer friendly • Runs directly from the Chrome Side Panel Perfect for debugging Angular UI, exploring component architecture, and improving developer productivity. How to Install and Use Step 1 – Install the Extension Open the Chrome Web Store. Search for Angular Component Finder. Click Add to Chrome. Confirm by clicking Add Extension. The extension will now be installed in your browser. Step 2 – Pin the Extension Click the Extensions icon (puzzle icon) in the Chrome toolbar. Find Angular Component Finder in the list. Click the Pin icon next to the extension. The extension icon will now appear in your Chrome toolbar. Step 3 – Open an Angular Website Open any website built using Angular. Examples: http://localhost:4200 or any Angular-based application. Step 4 – Open the Side Panel Click the Angular Component Finder icon in the Chrome toolbar. The side panel will open on the right side of the browser. The extension will automatically scan the page. Step 5 – View Angular Components Inside the side panel you will see a list of Angular components such as: app-root app-home app-topbar lib-slider lib-card These are the Angular component selectors used on the current page. Step 6 – Highlight Components To identify a component on the page: Move your mouse over a selector in the list. The corresponding element will be highlighted in the webpage. This helps quickly locate components in complex layouts. Step 7 – Refresh the Component List If you switch browser tabs or the list does not update automatically: Click the Refresh button in the side panel. This will rescan the current page and update the component list. Step 8 – Export Component List You can save the detected components. At the bottom of the panel: • Click Save as TXT to download a text file • Click Save as HTML to download an HTML report The exported file will include the page URL and the detected component list. Troubleshooting If the extension does not detect components or the list appears empty: • Make sure the webpage is an Angular application • Click the Refresh button in the side panel to rescan the page • Refresh the webpage and reopen the side panel if necessary • Ensure the extension is enabled and pinned in Chrome In most cases, refreshing the page or clicking the Refresh button will resolve the issue. or close and reopen the side panel Privacy Policy This extension does not collect, store, or transmit any personal data. All processing happens locally in the user's browser. The extension only reads the webpage structure to identify Angular component selectors.