🚀 I Just published React Source Lens v1.0.6 - A helpful tool for React developers working on large or unfamiliar codebases! 🔗 npm: https://lnkd.in/d7-sM3aS What it does: React Source Lens lets you inspect React component source code directly in the browser by simply hovering over components and pressing Cmd+Shift+O (Mac) or Ctrl+Shift+O (Windows/Linux). Real-world use cases: Onboarding to new projects - Instantly jump from UI elements to their source code Large codebases - No more hunting through folders to find component definitions Code reviews - Quickly verify which components are rendering what Debugging - Trace UI issues back to their source components Refactoring - Understand component relationships and dependencies visually Key differences from React DevTools: Unlike React DevTools (which shows component hierarchy and props), React Source Lens gives you instant source code navigation. While DevTools helps you understand the component tree, Source Lens helps you find and edit the actual source files. The inspiration: This tool was born out of frustration working on a massive new codebase with unclear architecture. Finding component definitions was taking forever - this tool eliminates that pain point entirely. How it works: Visual overlay highlights components as you hover Keyboard shortcut (Cmd+Shift+O) to inspect source Modal popup with file path and line number One-click VS Code integration - opens the exact line in your editor Copy path functionality for sharing The tool works best with the optional Babel plugin for enhanced source detection, but also falls back to React's debug information when available. Try it out and tell me what you think, PRs are also welcome. #React #JavaScript #ReactJS #WebDevelopment #DevTools #Productivity #OpenSource
Curious...what was the hardest part of building the VS Code integration?
I just added simpler NextJS integration and updated the docs, Check it out if you are a Next dev