Reactime

Reactime is an open-source Chrome DevTools extension that provides time-travel debugging, performance monitoring, and accessibility auditing for React applications. As a co-author on the v24.0 team, I built the accessibility tab using the Chrome Debugger API, implemented visx/D3 visualizations for component tree rendering, and architected global state management with Redux Toolkit to streamline data flow across the extension.

Highlights

• Built an accessibility tab leveraging the chrome.debugger API to capture and display real-time DOM accessibility snapshots
• Implemented visx and D3 visualizations for component tree rendering and performance metrics
• Enabled time-travel debugging for accessibility snapshots, allowing developers to compare accessibility states across state changes
• Added informational tooltips throughout the extension to improve developer onboarding and usability
• Architected global state management with Redux Toolkit, including a legend for the component tree visualization
• Implemented an enable/disable debugger button to give users control over when the Chrome Debugger API is active
• Fixed the clear button to properly reset snapshots and restore a clean debugging state

Technologies

Links