gpaalmgebkldppjfieeemafbebmnncjb
A Chrome extension to track React component renders and performance. Track and highlight React component re-renders visually in real time. This extension helps you debug performance issues by hooking into React DevTools and highlighting only the components that re-render—right inside your app. 🔹 No setup required 🔹 Works with any React project using DevTools 🔹 Supports two modes: track a specific component or all components 🔹 Visual highlights appear instantly on re-render 🔹 Clean and lightweight – no performance impact Whether you're chasing unnecessary renders or fine-tuning performance, React Render Tracker gives you instant visual feedback while coding.
React Context DevTool
Devtool for React Context and useReducer React Context DevTool is debugging tool for React Context and useReducer API. You can easily show context values changes in different views like tree, raw and diff view. Now Devtool suppoer useReducer API. easily debug your state changes and dispatch actions from devtool.
React Scan
Scan React apps for performance problems React Scan automatically detects performance issues in your React app Previously, existing tools required lots of code change, lacked simple visual cues, and didn't have a simple, portable API - Requires no code changes – just drop it in - Highlights exactly the components you need to optimize - Available via script tag, npm, CLI, you name it!
Vercel
Use the Vercel Toolbar on production deployments Installing this extension allows you to use the Vercel Toolbar on your production Vercel deployments & unlocks an easy-to-use feature for taking screenshots when commenting on all of your Vercel deployments.
Reactime
A Chrome extension for time travel debugging and performance monitoring in React applications. Reactime was nominated for the Productivity Booster award at React Open Source Awards 2020. Reactime is an open source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency. - Record Snapshots of Application State and Accessibility Tree - Provider/Consumer Panel for useContext Hook - Import and Export Snapshots of State - Time-Travel Debugging - Snapshot Series Comparison - Component Tree Visualization - React Router Compatibility - Component Render Time & Frequency - Support for Gatsby, Next.js and Remix - TypeScript Support - Ability to Reconnect - Web Performance Metrics - Tutorial Walkthrough - Prop Visualization - Intuitive Layout and Modern Design - Dark Mode Reactime 26.0 introduces transformative updates that redefine React debugging. The groundbreaking Providers/Consumers Panel now captures and visualizes state changes from useContext hooks, offering a real-time view of provider-consumer relationships and live context state values. A revamped time travel slider delivers enhanced control over debugging with intuitive navigation and playthrough options. The extension also boasts a modernized UI with dark mode for better usability, improved reliability through critical bug fixes, and the restoration of the accessibility tree tab for addressing potential accessibility issues. With these innovations, Reactime v26 empowers developers to streamline workflows and optimize complex state flows like never before. ❓ Why is Reactime not recording new state changes? Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. ❓ Why isn’t Reactime finding my hooks? Reactime detects and monitors hooks by traversing your application’s unminified React code in development mode. If your build process is minifying or uglifying your code—even for development builds—Reactime may not be able to properly locate and track your hooks. To fix this: Ensure a true development build: Double-check your bundler or build tool configuration (e.g., Webpack, Babel, Vite, etc.) to make sure that your application is not minimized or uglified in development mode. For example, with Webpack, make sure you’re running in mode: 'development', which should disable default minification. In a Create React App project, simply running npm start or yarn start will automatically configure a non-minified development build. Check for overrides: Ensure there are no custom Babel or Webpack plugins that minify your code, especially if you’re using frameworks like Next.js or Gatsby. Sometimes additional plugins or scripts might be running under the hood. Restart & rebuild: After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. ❓ Why is Reactime telling me that no React application is found? Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple of times until you see Reactime running. ❓ Why do I need to have React Dev Tools enabled? Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer ❓ I found a bug in Reactime Reactime is an open-source project, and we'd love to hear from you about improving the user experience. Please read the 👩💻 Developer README, and create a pull request (or issue) to propose and collaborate on changes to Reactime.
