⁦DevTools⁩ ایکسٹینشن

⁦Text.js DevTools⁩ ایکسٹینشن کونسول کے ساتھ Text.js پینل شامل کرتی ہے۔ یہ کونسول میں رینڈر ہونے والی ایپ کا معائنہ کرتی ہے۔

• کمپوننٹس: ہر کونسول روٹ کا React ٹری، جس میں پراپس، ہکس، کیز اور ان کے پیچھے موجود tx-box / tx-text سین نوڈز سیلز میں ترتیب دیے گئے ہیں۔
• فریم: موجودہ فریم ایک سیل گرڈ کی صورت میں۔ کسی سیل پر ہوور کریں تاکہ دیکھ سکیں کہ اسے کس کمپوننٹ نے پینٹ کیا۔ نوڈ منتخب کرنے کے لیے کلک کریں۔ یہ لائیو کونسول میں نمایاں ہوتا ہے۔
• ٹائم لائن: ہر فریم کے React، لے آؤٹ، پینٹ اور انکوڈ کے اوقات، چھوڑے گئے اور آؤٹ پٹ کیے گئے فریم، فریم کی رفتار اور %c spans۔
• کنٹرولز: آؤٹ پٹ روکنا اور دوبارہ جاری کرنا، لے آؤٹ وائر فریم آن یا آف کرنا، گرڈ کا سائز مقرر کرنا یا فٹ کرنا، فریم کو متن کے طور پر کاپی کرنا۔

#انسٹالیشن

ایکسٹینشن 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 Web Store⁩ کے لیے تیار ہوتی ہے۔

#کمپوننٹس

کسی کمپوننٹ کو منتخب کریں تاکہ اس کے پراپس، کال کی ترتیب میں ہکس (State، Ref، Memo، Effect وغیرہ، موجودہ ویلیوز کے ساتھ) اور اس کا رینڈر کیا ہوا سین نوڈ دیکھ سکیں، جس کی پوزیشن، سائز اور باکس اِن سیٹس سیلز میں ہیں۔ کسی قطار پر ہوور کرنے سے نوڈ کونسول میں نمایاں ہوتا ہے۔ ہوسٹ نوڈز کمپوننٹس کے درمیان موجود tx-box اور tx-text ایلیمنٹس دکھاتا یا چھپاتا ہے۔

پینل کھلا ہو تو کمیٹس کے بعد ٹری ریفریش ہوتا ہے۔ ویلیوز ڈسپلے کے لیے خلاصے ہیں، لائیو آبجیکٹس نہیں۔

#فریم

فریم انسپیکٹر رینڈرر کا سیل بفر بناتا ہے: ہر گلف، پیش منظر، پس منظر اور ایٹریبیوٹ۔ کسی سیل پر ہوور کرنے سے اس کا کریکٹر اور رنگ، پینٹ کی ترتیب میں اس کے اوپر موجود سین نوڈ (overflow، اسکرول آف سیٹس اور zIndex کو ملحوظ رکھتے ہوئے)، اور اس نوڈ کو رینڈر کرنے والے کمپوننٹس دکھائی دیتے ہیں۔ کلک کرنے سے کمپوننٹس میں نوڈ منتخب ہوتا ہے اور رینڈرر کے اپنے ہائی لائٹ اوورلے سے لائیو کونسول میں نمایاں ہوتا ہے۔

#ٹائم لائن

ہر بار رینڈرر کا ایک فریم ہے:

چھوڑے گئے فریم مدھم دکھائی دیتے ہیں: کچھ بدلا نہیں، اس لیے کچھ لاگ نہیں ہوا۔ رفتار کا چارٹ آؤٹ پٹ کیے گئے فریموں کے درمیان وقفے کو 66 ms کے کم از کم وقفے کے مقابل دکھاتا ہے۔

وقت کی پیمائش console.log() پر رک جاتی ہے۔ پیغام کی فارمیٹنگ اور پینٹنگ DevTools کے اندر ہوتی ہیں اور صفحے سے ان کا مشاہدہ ممکن نہیں، اس لیے ٹائم لائن انہیں نہیں دکھاتی۔ فریموں کے درمیان کمٹ ہونے والے کنکرنٹ رینڈرز کمیٹس میں شمار ہوتے ہیں، ان کا وقت نہیں ناپا جاتا۔

#کام کرنے کا طریقہ

⁦React DevTools⁩ کی طرح، ایکسٹینشن صفحہ چلنے سے پہلے ایک گلوبل ہک انسٹال کرتی ہے:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

ہر کونسول روٹ بنتے وقت اس کے ساتھ رجسٹر ہوتا ہے۔ ایکسٹینشن کے بغیر ہک موجود نہیں ہوتا، اور روٹ اسے صرف ایک بار چیک کرتا ہے اور ہر فریم پر کوئی کام نہیں کرتا۔ ایکسٹینشن انسٹال ہو مگر پینل بند ہو تو ہر فریم پر ایک پراپرٹی پڑھی جاتی ہے۔ ٹریز اور فریموں کا حساب صرف تب ہوتا ہے جب پینل انہیں طلب کرتا ہے۔

پیغامات صفحہ → کانٹینٹ اسکرپٹ → سروس ورکر → پینل کی ترتیب میں جاتے ہیں۔ کانٹینٹ اسکرپٹس ہر صفحے پر چلتی ہیں تاکہ آپ کی ایپ شروع ہونے سے پہلے ہک موجود ہو۔ ایکسٹینشن صرف اسی رسائی کی درخواست کرتی ہے۔ یہ کوئی ریموٹ کوڈ لوڈ نہیں کرتی اور مشین سے باہر کچھ نہیں بھیجتی۔

#رازداری

ایکسٹینشن کوئی ڈیٹا جمع نہیں کرتی۔ یہ کوئی نیٹ ورک درخواست نہیں کرتی، کچھ محفوظ نہیں کرتی، اور اس میں اینالیٹکس نہیں ہیں۔ کمپوننٹ ٹریز، فریم اور اوقات صرف اسی براؤزر میں صفحے اور DevTools پینل کے درمیان منتقل ہوتے ہیں، اور DevTools بند کرنے پر حذف ہو جاتے ہیں۔ فریم کاپی کریں پر کلک کرنے سے فریم کا متن آپ کے کلپ بورڈ پر لکھا جاتا ہے۔

#حدود

• ⁦Chrome⁩ اور Chromium پر مبنی براؤزرز، ورژن 111 یا بعد کا۔
• ایکسٹینشن انسٹال ہونے سے پہلے شروع ہونے والی ایپس کو دوبارہ لوڈ کرنا ضروری ہے۔
• ٹیب کے صرف سب سے اوپر والے فریم کا معائنہ ہوتا ہے۔
• اوقات performance.now() سے آتے ہیں، جس کی پیمائش کی باریکی براؤزر تقریباً 0.1 ms تک محدود کرتے ہیں۔