افزونهٔ DevTools

افزونهٔ DevTools در Text.js پنل Text.js را کنار «کنسول» اضافه می‌کند. این افزونه برنامه‌ای را که در کنسول رندر می‌شود بررسی می‌کند.

• کامپوننت‌ها: درخت React هر ریشهٔ کنسول، همراه با props، هوک‌ها، کلیدها و گره‌های صحنهٔ tx-box / tx-text پشت آن‌ها، با چیدمان سلولی.
• فریم: فریم کنونی به‌شکل شبکه‌ای از سلول‌ها. نشانگر را روی یک سلول ببرید تا ببینید کدام کامپوننت آن را ترسیم کرده است. برای انتخاب گره کلیک کنید. گره در کنسول زنده برجسته می‌شود.
• خط زمانی: زمان‌های React، چیدمان، ترسیم و کدگذاری برای هر فریم، فریم‌های ردشده در برابر فریم‌های خروجی، آهنگ فریم‌ها و spanهای %c.
• کنترل‌ها: توقف و ازسرگیری خروجی، نمایش یا پنهان کردن طرح سیمی چیدمان، ثابت کردن یا تطبیق اندازهٔ شبکه، کپی کردن فریم به‌صورت متن.

#نصب

افزونه از packages/devtools-extension ساخته و به‌صورت بسته‌بندی‌نشده بارگذاری می‌شود:

bun run --cwd packages/devtools-extension build

1. نشانی chrome://extensions را باز کنید و «حالت برنامه‌نویس» را روشن کنید.
2. روی «بارگیری بسته‌بندی‌نشده» کلیک کنید و packages/devtools-extension/dist را انتخاب کنید.
3. برنامهٔ خود را دوباره بارگیری کنید و DevTools را باز کنید. پنل Text.js پس از ایجاد یک ریشهٔ کنسول در صفحه ظاهر می‌شود.

فرایند ساخت، فایل release/textjs-devtools-<version>.zip را نیز آماده برای فروشگاه وب Chrome ایجاد می‌کند.

#کامپوننت‌ها

یک کامپوننت را انتخاب کنید تا props، هوک‌های آن به‌ترتیب فراخوانی (State، Ref، Memo، Effect و غیره، با مقادیر کنونی) و گرهٔ صحنه‌ای را که رندر می‌کند، همراه با موقعیت، اندازه و فاصله‌های داخلی کادر برحسب سلول ببینید. بردن نشانگر روی یک ردیف، گره را در کنسول برجسته می‌کند. گره‌های میزبان عناصر tx-box و tx-text بین کامپوننت‌ها را نمایش می‌دهد یا پنهان می‌کند.

تا زمانی که پنل باز است، درخت پس از commitها تازه می‌شود. مقادیر، خلاصه‌هایی برای نمایش هستند و شیء زنده نیستند.

#فریم

بازرس فریم بافر سلولی رندرکننده را ترسیم می‌کند: هر گلیف، رنگ پیش‌زمینه، رنگ پس‌زمینه و ویژگی. با نگه داشتن نشانگر روی یک سلول، نویسه و رنگ‌های آن، گره صحنه‌ای که در ترتیب ترسیم روی آن قرار دارد (با رعایت overflow، فاصله‌های پیمایش و zIndex) و کامپوننت‌هایی که آن گره را رندر کرده‌اند نمایش داده می‌شوند. با کلیک، گره در کامپوننت‌ها انتخاب می‌شود و با لایهٔ برجسته‌سازی خود رندرکننده در کنسول زنده برجسته می‌شود.

#خط زمانی

هر میله یک فریم رندرکننده است:

فریم‌های ردشده کم‌رنگ ترسیم می‌شوند: چیزی تغییر نکرده، پس چیزی ثبت نشده است. نمودار آهنگ فریم‌ها فاصلهٔ بین فریم‌های خروجی را در مقایسه با حداقل فاصلهٔ 66 ms نشان می‌دهد.

اندازه‌گیری زمان در console.log() متوقف می‌شود. قالب‌بندی و ترسیم پیام داخل DevTools انجام می‌شود و از صفحه قابل مشاهده نیست، بنابراین خط زمانی آن‌ها را نشان نمی‌دهد. رندرهای هم‌روندی که بین فریم‌ها commit می‌شوند، به‌عنوان commit شمرده می‌شوند و زمانشان اندازه‌گیری نمی‌شود.

#نحوهٔ کار

این افزونه مانند ⁦React DevTools⁩، پیش از اجرای صفحه یک هوک سراسری نصب می‌کند:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

هر ریشهٔ کنسول هنگام ایجاد، خود را در آن ثبت می‌کند. بدون افزونه، هوک وجود ندارد و ریشه فقط یک بار وجود آن را بررسی می‌کند و هیچ کاری به‌ازای هر فریم انجام نمی‌دهد. وقتی افزونه نصب است اما پنل بسته است، هزینهٔ هر فریم خواندن یک ویژگی است. درخت‌ها و فریم‌ها فقط زمانی محاسبه می‌شوند که پنل آن‌ها را درخواست کند.

پیام‌ها در مسیر صفحه → اسکریپت محتوا → سرویس‌ورکر → پنل جریان می‌یابند. اسکریپت‌های محتوا در هر صفحه اجرا می‌شوند تا هوک پیش از راه‌اندازی برنامهٔ شما وجود داشته باشد. این تنها دسترسی‌ای است که افزونه درخواست می‌کند. افزونه هیچ کد راه‌دوری بارگذاری نمی‌کند و چیزی به بیرون از دستگاه نمی‌فرستد.

#حریم خصوصی

افزونه هیچ داده‌ای جمع‌آوری نمی‌کند. هیچ درخواست شبکه‌ای نمی‌فرستد، چیزی ذخیره نمی‌کند و ابزار تحلیل ندارد. درخت‌های کامپوننت، فریم‌ها و زمان‌سنجی‌ها فقط بین صفحه و پنل DevTools در همان مرورگر جابه‌جا می‌شوند و با بستن DevTools دور ریخته می‌شوند. کپی فریم با کلیک شما، متن فریم را در کلیپ‌بورد می‌نویسد.

#محدودیت‌ها

• ⁦Chrome⁩ و مرورگرهای مبتنی بر Chromium، نسخهٔ 111 یا جدیدتر.
• برنامه‌هایی که پیش از نصب افزونه شروع به کار کرده‌اند به بارگیری مجدد نیاز دارند.
• فقط فریم بالایی هر برگه بررسی می‌شود.
• زمان‌ها از performance.now() گرفته می‌شوند که مرورگرها دقت آن را به حدود 0.1 ms کاهش می‌دهند.