תוסף DevTools

התוסף ⁦Text.js DevTools⁩ מוסיף חלונית Text.js לצד "מסוף". הוא בודק את האפליקציה שמרונדרת במסוף.

• רכיבים: עץ ה-React של כל שורש מסוף, עם props, הוקים, מפתחות וצומתי הסצנה tx-box / tx-text שמאחוריהם, מסודרים בתאים.
• פריים: הפריים הנוכחי כרשת תאים. יש לרחף מעל תא כדי לראות איזה רכיב צייר אותו. יש ללחוץ כדי לבחור את הצומת. הוא מודגש במסוף הפעיל.
• ציר זמן: זמני React, layout, ציור וקידוד לכל פריים, פריימים שדולגו לעומת פריימים שנפלטו, קצב הפריימים ו-span של %c.
• פקדים: השהיית הפלט וחידושו, הצגה והסתרה של שלד ה-layout, קיבוע או התאמה של גודל הרשת, העתקת הפריים כטקסט.

#התקנה

התוסף נבנה מתוך 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 שבין הרכיבים.

העץ מתרענן אחרי commits כל עוד החלונית פתוחה. הערכים הם תקצירים לתצוגה, ולא אובייקטים חיים.

#פריים

בודק הפריימים מצייר את חוצץ התאים של המרנדר: כל גליף, צבע קדמה, רקע ומאפיין. ריחוף מעל תא מציג את התו והצבעים שלו, את צומת הסצנה שמעליו בסדר הציור (תוך התחשבות ב-overflow, בהיסטי גלילה וב-zIndex), ואת הרכיבים שרינדרו את הצומת הזה. לחיצה בוחרת את הצומת ב-רכיבים ומדגישה אותו במסוף הפעיל באמצעות שכבת ההדגשה של המרנדר עצמו.

#ציר זמן

כל עמודה היא פריים אחד של המרנדר:

פריימים שדולגו מוצגים בעמעום: דבר לא השתנה, ולכן דבר לא נרשם ביומן. תרשים הקצב מציג את המרווח בין פריימים שנפלטו ביחס למרווח המינימלי של 66 ms.

מדידת הזמנים נעצרת ב-console.log(). עיצוב ההודעה וציורה מתרחשים בתוך DevTools ואי אפשר לצפות בהם מהדף, ולכן ציר הזמן אינו מציג אותם. רינדורים מקביליים שמבצעים commit בין פריימים נספרים כ-commits, אך זמנם אינו נמדד.

#אופן הפעולה

בדומה ל-⁦React DevTools⁩, התוסף מתקין הוק גלובלי לפני שהדף רץ:

globalThis.__TEXTJS_DEVTOOLS_HOOK__

כל שורש מסוף נרשם בו בעת יצירתו. ללא התוסף ההוק אינו קיים, והשורש בודק את קיומו פעם אחת בלבד ואינו מבצע עבודה בכל פריים. כשהתוסף מותקן אך החלונית סגורה, עלות כל פריים היא קריאת מאפיין אחת. עצים ופריימים מחושבים רק כשהחלונית מבקשת אותם.

הודעות זורמות מדף → סקריפט תוכן → ⁦service worker⁩ → חלונית. סקריפטי התוכן רצים בכל דף כדי שההוק יהיה קיים לפני שהאפליקציה מתחילה לפעול. זו הגישה היחידה שהתוסף מבקש. הוא אינו טוען קוד מרוחק ואינו שולח דבר אל מחוץ למחשב.

#פרטיות

התוסף אינו אוסף נתונים. הוא אינו שולח בקשות רשת, אינו שומר דבר ואינו כולל כלי ניתוח שימוש. עצי רכיבים, פריימים וזמני ביצוע עוברים רק בין הדף לחלונית DevTools באותו דפדפן, ונמחקים עם סגירת DevTools. לחיצה על העתקת פריים כותבת את טקסט הפריים ללוח.

#מגבלות

• ⁦Chrome⁩ ודפדפנים מבוססי Chromium, מגרסה 111 ואילך.
• אפליקציות שהופעלו לפני התקנת התוסף דורשות טעינה מחדש.
• רק המסגרת העליונה של לשונית נבדקת.
• הזמנים מגיעים מ-performance.now(), שהדפדפנים מפחיתים את דיוקו לכ-0.1 ms.