‏react-trace: ابزار دیباگ کامپوننت‌های ری‌اکت

react-trace یه اینسپکتور (inspector) برای محیط توسعه‌ست که کنار اپ ری‌اکتت می‌شینه و بهت اجازه می‌ده هر کامپوننت رو روی صفحه شناسایی کنی و بفهمی دقیقاً کجای کدبیس تعریف شده. به‌جای اینکه توی فایل‌ها دنبال کامپوننت بگردی، کافیه روش کلیک کنی.

وقتی یه کامپوننت رو انتخاب می‌کنی، چند تا کار می‌تونی انجام بدی: فایل رو مستقیم روی همون خطی که کامپوننت تعریف شده توی ادیتورت باز کنی، سورس‌کد رو توی مرورگر پیش‌نمایش بگیری و ویرایش کنی، کامنت اضافه کنی و کپی کنی برای AI agentها، یا مستقیم به OpenCode بفرستیش.

ساده‌ترین روش استفاده، نصب پکیج @react-trace/kitه که همه پلاگین‌های رسمی رو از قبل داره. کافیه کامپوننت Trace رو کنار اپت قرار بدی:

import Trace from '@react-trace/kit'
import App from './App'

export function Root() {
  return (
    <>
      <App />
      <Trace root={import.meta.env.VITE_ROOT} />
    </>
  )
}

این ابزار از یه سیستم پلاگین استفاده می‌کنه. پلاگین‌های رسمی شامل plugin-preview برای پیش‌نمایش و ویرایش کد با Monaco، plugin-open-editor برای باز کردن فایل توی ادیتور محلی، plugin-copy-to-clipboard برای کپی مسیر فایل به‌همراه شماره خط، و plugin-comments برای افزودن کامنت و ارسال به OpenCode می‌شن.

اگه می‌خوای پلاگین خودت رو بنویسی، ابزار scaffold هست که با pnpm create react-trace-plugin یه پکیج کامل برات می‌سازه. پلاگین‌ها از هوک‌های عمومی مثل useSelectedContext() و useSelectedSource() برای دسترسی به کامپوننت انتخاب‌شده استفاده می‌کنن.

نکات کلیدی:

• فقط در محیط dev فعاله و هزینه‌ای برای build تولید نداره
• نیاز به React 18 یا بالاتر داره
• معماری پلاگین‌محور — می‌تونی فقط پلاگین‌هایی که نیاز داری رو نصب کنی
• با Vite و متغیر محیطی VITE_ROOT کار می‌کنه
• پشتیبانی از ارسال مستقیم کد به AI agentها از طریق OpenCode