‏react-trace: از روی صفحه مستقیم برو سراغ کد کامپوننت

react-trace یه inspector برای React هست که فقط موقع توسعه کار می‌کنه. کارش ساده‌ست: موس رو روی هر المانی تو صفحه می‌بری و بهت نشون می‌ده کدوم کامپوننت اونو رندر کرده، چه propهایی گرفته و کل مسیرش تو درخت کامپوننت‌ها چیه. بعد با کمک source map (یعنی فایلی که کد بیلدشده رو به کد اصلی وصل می‌کنه) مستقیم می‌رسی به فایل و شمارهٔ خط تعریف اون کامپوننت.

بعد از پیدا کردن کامپوننت، چند تا کار می‌تونی بکنی. می‌شه فایل رو تو VS Code، Cursor، Windsurf، Zed، WebStorm یا IntelliJ روی همون خط باز کرد. می‌شه کد رو داخل مرورگر با یه پیش‌نمایش مبتنی بر Monaco دید و همون‌جا ویرایشش کرد. یه قابلیت جالبش هم کامنت‌گذاشتن روی کامپوننت‌هاست، که بعد می‌تونی کامنت‌ها رو کپی کنی و به agentهای هوش مصنوعی بدی، یا مستقیم بفرستیشون به سشن OpenCode برای بازبینی.

همهٔ این قابلیت‌ها به شکل پلاگین ساخته شدن و چهار تا پلاگین رسمی (preview، comments، copy-to-clipboard و open-editor) به‌طور پیش‌فرض تو پکیج @react-trace/kit هستن. یعنی اگه بخوای، می‌تونی پلاگین خودت رو هم بنویسی و inspector رو گسترش بدی.

نکتهٔ مهمش اینه که روی محصول نهایی هیچ اثری نداره. هر پکیج یه نسخهٔ خالی (stub) برای production داره و conditional exports تو بیلد نهایی همه‌چیز رو به تابع‌هایی تبدیل می‌کنه که کاری نمی‌کنن. راه‌اندازیش هم سه قدمه: نصب پکیج به‌عنوان dev dependency، فرستادن مسیر ریشهٔ پروژه با متغیر VITE_ROOT به Vite، و گذاشتن کامپوننت Trace کنار App:

<>
  <App />
  <Trace root={import.meta.env.VITE_ROOT} />
</>

نکات کلیدی:

• نصب با pnpm add -D @react-trace/kit
• پیدا کردن فایل و خط دقیق هر کامپوننت با source map
• باز کردن کد تو VS Code، Cursor، Windsurf، Zed، WebStorm و IntelliJ
• ویرایش کد داخل مرورگر با پیش‌نمایش Monaco
• کامنت‌گذاری و فرستادن به agentهای AI یا OpenCode
• صفر هزینه تو production به لطف stub و conditional exports