Skip to content

Releases: Zortex-Tech-Solutions/Component-Debugger-Client

v1.0.0-alpha

25 Dec 21:25
@SYOP200 SYOP200
release1-beta
043b907
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v1.0.0-alpha Latest
Latest

🎉 Component Debugger v1.0.0 - Initial Release

Release Date: December 25, 2025

We're excited to announce the first official release of Component Debugger - a modern Chrome extension designed to make debugging React and Vue applications easier and more visual!

✨ What's New

Core Features

🌲 Component Tree Visualization

  • Interactive component hierarchy - Navigate your entire app structure with expandable/collapsible nodes
  • Visual parent-child relationships - See how components are nested at a glance
  • Click to inspect - Select any component to view detailed information

🔍 Smart Search & Navigation

  • Instant search - Find components by name with real-time filtering
  • Fast navigation - Jump directly to the component you need
  • Keyboard-friendly interface - Efficient workflow for power users

⚛️ Dual Framework Support

  • React mode - Full support for React components with props and state inspection
  • Vue mode - Complete Vue component debugging with data and props
  • One-click toggle - Switch between frameworks instantly

📊 Performance Monitoring

  • Render tracking - Monitor how many times each component renders
  • Timing metrics - See exact render times for performance optimization
  • Smart warnings - Get alerts when components render excessively (>5 times)
  • Performance indicators - Visual feedback on component health

🔎 Deep Component Inspection

  • Props viewer - See all properties passed to components
  • State explorer - Inspect current state values with nested object support
  • Nested data visualization - Expandable view for complex objects and arrays
  • Syntax highlighting - Color-coded values for better readability

🎨 Modern Dark UI

  • Sleek black design - Easy on the eyes during long debugging sessions
  • Grey highlights - Subtle accents that don't distract
  • Smooth animations - Polished interactions and transitions
  • Responsive layout - Clean split-panel design for efficient workflow

User Experience

  • Zero configuration - Works out of the box
  • Instant scanning - Detect components with one click
  • Clear visual feedback - Know exactly what's happening at all times
  • Intuitive interface - No learning curve, start debugging immediately

🚀 Getting Started

  1. Install the extension from the Chrome Web Store (or load unpacked for development)
  2. Open your React or Vue application
  3. Click the Component Debugger icon in your toolbar
  4. Select your framework (React or Vue)
  5. Click "Scan" to detect components
  6. Start exploring!

📖 Usage Tips

Finding Performance Issues

Look for components with:

  • High render counts (yellow warning icon)
  • Slow render times (>5ms may indicate optimization opportunities)
  • Unnecessary re-renders (check if props/state actually changed)

Inspecting Data

  • Click the expand arrows in nested objects to see all values
  • Use the search bar to quickly find specific components
  • Compare props and state to understand component behavior

Best Practices

  • Run scans after major user interactions to see state changes
  • Monitor render counts during development to catch performance issues early
  • Use the extension alongside your browser's DevTools for complete debugging

🔧 Technical Details

Supported Environments

  • Chrome 88+
  • React 16.8+ (Hooks supported)
  • Vue 2.x and Vue 3.x

Limitations

  • Client-side rendered applications only (SSR support coming soon)
  • Requires unminified code for best component name display
  • Performance metrics are estimates and may vary

🐛 Known Issues

We're tracking these issues for future releases:

  1. Minified code - Component names may not display correctly in production builds
  2. SSR applications - Server-side rendered apps require additional setup
  3. Large component trees - Apps with 100+ components may experience slight lag
  4. Hot reloading - May require manual rescan after hot module replacement

🔮 What's Next

We're already working on v1.1.0 with exciting features:

  • Time-travel debugging to replay state changes
  • Component update history tracking
  • Performance profiling charts
  • Export data to JSON for analysis
  • Next.js and Nuxt.js support
  • Custom color themes

🙏 Acknowledgments

Special thanks to:

  • The React and Vue core teams for building amazing frameworks
  • React DevTools and Vue DevTools for inspiration
  • Our beta testers for valuable feedback
  • The open-source community for support and contributions

💬 Feedback & Support

We'd love to hear from you!

📥 Installation

Chrome Web Store

Visit the Chrome Web Store listing and click "Add to Chrome"

Manual Installation

git clone https://github.com/yourusername/component-debugger.git
cd component-debugger
npm install
npm run build

Then load the build folder as an unpacked extension in Chrome.

📊 Release Stats

  • Lines of Code: ~1,500
  • Bundle Size: 245 KB
  • Components: 12
  • Dependencies: 3 (React, Lucide Icons, Tailwind)

Full Changelog: https://github.com/yourusername/component-debugger/compare/initial...v1.0.0

Download: component-debugger-v1.0.0.zip

Star the repo if you find this useful! ⭐

Made with coffee and love!
Happy debugging! 🐛🔍

Assets 3
Loading