Media
1 item
Description
Inspect Angular component selectors on the current webpage using a side panel developer tool. Short Description Inspect Angular components using custom selector prefixes with real-time highlighting and exportable reports. 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-. You can also add your own custom prefixes to detect project-specific components. 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 • Detect Angular component selectors using default prefixes (app-, lib-, ui-, feature-) • Add custom prefixes to support project-specific component naming • Remove prefixes easily from the list • Real-time scanning with automatic updates on DOM changes • Hover over a selector to highlight the element in the webpage • Works with dynamically loaded Angular components • Export component lists as TXT or styled HTML reports • Includes a Refresh button to manually rescan the current page • Clean and simple side panel UI • Lightweight and developer friendly • Runs directly from the Chrome Side Panel ✨ New in this version • Custom prefix support for flexible component detection • Ability to add and remove prefixes dynamically • Improved UI for prefix management • Enhanced HTML export with styled layout • Better performance and stability 🎯 Use Cases • Debug Angular UI quickly • Explore unknown Angular codebases • Identify reusable components • Improve frontend development workflow 🛠 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 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 – Use Custom Prefixes (NEW) You can add your own prefixes to detect custom components. Example: kendo dashboard- This allows the extension to work with any Angular project naming style. Step 8 – Refresh the Component List If 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 9 – Export Component List You can save the detected components: • Click Save as TXT to download a text file • Click Save as HTML to download a styled HTML report The exported file will include the page URL and detected components. ⚠️ Troubleshooting If the extension does not detect components or the list appears empty: • Make sure the webpage is an Angular application • Add the correct prefix used in the project • Click the Refresh button to rescan • Refresh the webpage and reopen the side panel if needed • Ensure the extension is enabled and pinned in Chrome 🔒 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.