ckdnkkilcbkocfdpcaohdehnbeaefndo
Zustand Developer Tool for Debugging Zusty is a Zustand Dev Tool designed to facilitate the debugging of state management in your applications. It provides state snapshots, action logs, render time metrics, and a component tree showing which components are using state, enhancing and assisting debugging your Zustand/React applications.
daily.dev | Developer News Done Right, in Every New Tab
Developer news, personalized to your stack, in every new tab. Join 400,000+ developers. Free and open source. Open a new tab and your personalized developer feed is already there. Curated from 2,000+ trusted blogs and publications, including GitHub Blog, Hacker News, Dev.to, freeCodeCamp, and hundreds more. Personalized to your interests and tech stack. The more you read, the smarter it gets, because it learns from you and from what over a million other developers find worth reading. 🏆 Product Hunt, Product of the Year ⭐ 18,000+ GitHub stars, fully open source at github.com/dailydotdev WHAT HAPPENS WHEN YOU INSTALL 1️⃣ Open any new tab. Your personalized reading experience is there. Technical articles, tutorials, and community discussions from 2,000+ sources, matched to your stack. 2️⃣ It gets smarter every day. AI personalizes it, and over a million developers help surface what matters. When they upvote, discuss, and share articles, the best content rises and the noise disappears. 3️⃣ Read, upvote, discuss. Every article has a conversation. You're not reading alone. See what others think, add your take, learn from the discussion. 4️⃣ Build a reading streak. Come back tomorrow and the next day. Track your streak, unlock achievements, climb leaderboards, and build a profile that grows over time. 5️⃣ Find your people. Join a Squad around React, DevOps, AI, cloud, mobile, open source, or whatever you care about. Share links, start discussions, learn together. Public or private. Most tools in this space are glorified RSS readers or algorithm-only experiences. daily.dev is different because the community is built in. Developers upvote articles, which teaches the system what actually matters. Not just what's new, but what's good. Discussions add context you can't get from reading alone. The real insight is often in the comments. Squads create focused curation around every topic and language. And AI personalizes on top of all of this, matching content to your specific stack and interests. Think of it as a feed curated by a senior engineer who shares your exact interests. • Personalized reading from 2,000+ sources, powered by AI + community signals • Multiple views: Popular, Upvoted, Discussed, Following • Custom feeds for different interests and stacks • Squads, communities around any topic • Reading streaks, achievements, and leaderboards • DevCard, a shareable developer identity card • Bookmarks with folders • Search across millions of posts • Dark mode and light mode • Available on Chrome, Edge, web app, iOS, and Android 🎯 WHO IS THIS FOR? • Developers who want to stay current without opening 10 sites every morning • Engineers who learn better when they can see what peers think is worth reading • Anyone who wants a daily reading habit that builds over time • Teams that share and discuss technical articles together in private Squads ⚡ YOUR WORKFLOW STAYS INTACT • Open a blank tab anytime, one click, always available • Browse without signing up. Register when you're ready to upvote, comment, or join Squads • Uninstall in 10 seconds if it's not for you • Your data stays yours. Open source, no data selling, ever 🔒 PERMISSIONS AND TRANSPARENCY This extension only replaces your New Tab page. It does: • DON'T track your browsing on other websites • DON'T read or modify content on other pages • DON'T access your browsing history • DON'T inject scripts into any website We only request what's needed to show your reading experience. Fully open source. Verify the code yourself at github.com/dailydotdev Unlock premium features: • Presidential Briefing: a personal agent scans the landscape daily, analyzes 100+ posts, and delivers a concise briefing • Smart Titles: improves clickbait headlines so you know what you're clicking • Clickbait Shield: detects and replaces misleading titles automatically 🌐 OPEN SOURCE AND PRIVACY daily.dev requests only the permissions it needs and never sells your data. GitHub: github.com/dailydotdev Privacy: daily.dev/privacy
Vue.js devtools (beta)
DevTools browser extension for Vue.js Chrome DevTools extension for debugging Vue.js applications. Thank you for trying the Vue.js devtools Beta! If you have any issue, please report them on the GitHub repository. This is the beta channel with a brand-new re-implementation, built with Vue 3. Note the beta channel may cause conflict with the stable version of Vue devtools. If the Vue icon is lit but the Vue tab doesn't show up in devtools, please temporarily disable the stable version and re-open the page.
TanStack Query DevTools
DevTools extension for debugging TanStack Query applications. Inspect queries, mutations, and cache state in real-time. TanStack Query DevTools — a browser extension for debugging TanStack Query (React Query) applications in real time. Inspect every query and mutation in your app as they happen. See cache state, status transitions, and data payloads — all without adding any devtools dependency to your bundle. • Live query & mutation inspection — watch queries and mutations update in real time • Detailed view — drill into individual queries/mutations to see status, data, and metadata • Interactive data tree — explore query and mutation data as an expandable, collapsible tree • Inline data editing — modify cached query data directly from the devtools • Cache actions — invalidate, refetch, reset, or remove queries; clear the mutation cache • Status badges — at-a-glance indicators: fresh, stale, fetching, paused, inactive, error • Search & sort — filter by query key, sort by key, status, or last updated time • Popup & DevTools panel — use as a standalone popup or as a panel inside browser DevTools Expose your QueryClient on the window: Navigate to your app. The extension icon turns colored when a QueryClient is detected. Click the icon for the popup, or open DevTools → TanStack Query for the full panel. Why use this instead of the built-in TanStack Query DevTools? • Zero bundle impact — nothing ships to production • Works on any TanStack Query app (React, Vue, Solid, Angular, Svelte) as long as you expose the QueryClient • Full DevTools panel integration alongside other browser developer tools • Persistent across page navigations within the same tab
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.