[Feature] Gutter DevTools (Chrome Extension / Built-in Overlay)

[HaHiepThanh]

📋 Context & Problem Description

As Gutter applications grow in complexity, debugging the widget hierarchy, tracking performance bottlenecks (e.g. which widgets are re-rendering too frequently), and inspecting state values becomes difficult. Standard browser inspector tools only show the final DOM nodes, obscuring Gutter's custom Widget/State structure and dependency bindings.

💡 Proposed Solution & Implementation Plan

Implement a dedicated developer tool module:

1. Embedded Inspect Overlay (Built-in Developer Mode):
   • Integrate an inspector overlay inside Gutter core when built in dev mode (already partially supported by Inspect).
   • Add a visual hover element picker to select a DOM node and trace it back to its Gutter Element or Widget definition.
2. Rebuild Tracking:
   • Maintain a rebuild counter on every statefulElement and statelessElement.
   • Highlight elements in the UI (e.g. green/red flash) when they re-render.
3. Chrome Extension API Bridge:
   • Expose a standard JSON API over a window-level bridge (window.__GUTTER_DEVTOOLS_GLOBAL_HOOK__) so a future Chrome Developer Tool panel can inspect the tree, state values, and Provider dependencies.

🎯 Impact & Benefits

• Frictionless Debugging: Developers can easily verify why a state did not update or see what widgets are rendering unnecessarily.
• Professional tooling: Puts Gutter on par with standard modern web framework development environments.

🏷️ Suggested Labels

feature, dx, devtools