Event Listeners מתארים כל רכיב שיש לו event listener, בצבע לפי סוג - לחיצה, רחף, גלילה, מגע, מקלדת וטופס - מראה מהיכן הגיע כל מטפל, ומהבהב אלמנטים כאשר ה-DOM משתנה.
להבין מדוע משהו מגיב - או לא - מתחיל בדרך כלל בשאלה שהדף לא יענה עליה: האם יש בכלל מטפל בקליק ברכיב הזה? לאיזה אלמנט יש למעשה את התנהגות הריחוף? מה זה להאזין לגלילה ולגמגם את הדף? דפדפן DevTools יכול לרשום את listeners של אלמנט אחד בכל פעם, אם אתה כבר יודע איזה אלמנט לבחור.
כלי זה עונה על השאלה עבור כל העמוד בבת אחת. כל אלמנט עם listener מקבל קו מתאר בצבע מסוגו - לחיצה, רחף, גלילה, נגיעה וגרירה, מקלדת או צורה ומיקוד - וריחוף אחד מציג את האירועים המדויקים ומאיפה כל אחד מהם הגיע: תכונה מוטבעת, מאפיין, מטפל ב- React או Vue, jQuery, או addEventListener. אריחי קטגוריה מדליקים ומכבים כל סוג, והרשימה שמתחת נותנת שמות לכל רכיב, כך שלחיצה אחת גוללת אותך אליו.
מסגרות מטופלות כראוי. React מצמידה את listeners לשורש ומשגרת אירועים באופן פנימי, מה שיגרום לכל האפליקציה להיראות ניתנת ללחיצה; הכלי מניח את רישומי השורש הללו בצד ומציג את המטפלים React על האלמנטים שמצהירים עליהם. הסריקה המהירה אינה זקוקה לטעינה מחדש והיא מכסה מטפלים מוטבעים, React, Vue ו- jQuery. Listeners שנוספו עם addEventListener רגיל לפני פתיחת הכלי ניתנים לראות רק מתחילת טעינת העמוד, אז Reload & record טוען מחדש את הדף פעם אחת כשההקלטה פועלת - הכלי נפתח מחדש מעצמו עם כל listener כלול, גם אלו ברמת העמוד window document.
הכרטיסייה השנייה צופה ב-DOM עצמו. כל צומת שנוסף או הוסר, שינוי תכונות ושינוי טקסט מהבהבים בעמוד, המונים מציגים מוטציות לשנייה, ורשימה מדרגת את האלמנטים המשתנים ביותר, עם התכונות המעורבות. זרם קבוע בזמן שאף אחד לא נוגע בדף פירושו בדרך כלל טיימר, אנימציה מונעת JavaScript או מסגרת שמעבדת מחדש יותר ממה שצריך - בדיוק הדברים שמרוקנים סוללות וגורמים לדפים לגמגם.
אלמנטים עם מאזיני לחיצה, ריחוף, גלילה, מגע, מקלדת listeners מתוארים בצבע משלהם, עם אריחים להצגה או הסתרה של כל סוג.
תכונות מוטבעות, מאפיינים, מטפלי React ו- Vue, אירועי jQuery וקריאות addEventListener, המסומנים על כל רכיב.
listeners ברמת השורש של React מונחים בצד, והמטפלים שלו מוצגים באלמנטים שמצהירים עליהם ולא באפליקציה כולה.
Reload & record תופסת כל קריאת addEventListener מתחילת טעינת העמוד, כולל listeners window document, עבור טעינה אחת בלבד.
צמתים נוספו והוסרו, שינויים בתכונות ושינויי טקסט מהבהבים בעמוד, עם מונה מוטציות לשנייה.
רשימה מדורגת של האלמנטים המשתנים הכי הרבה, עם התכונות המעורבות, מצביעה היישר על עיבוד חוזר בורח.
ראה במבט חטוף אם לכפתור אכן יש listener, או אם המטפל יושב על אלמנט מעטפת במקום זאת.
מצא כל אלמנט שמאזין לגלילה, גלגל או מגע, כולל listeners window document.
בדוק אילו פקדים מגיבים לאירועי מקלדת ואילו מגיבים רק לעכבר.
צפה במונה המוטציות כשהדף לא פעיל; אלמנטים המשתנים מצביעים על טיימר או מסגרת שעושה עבודה נוספת.
רחף סביב אתר לא מוכר כדי לראות אילו חלקים הם אינטראקטיביים ואיזו מסגרת חיברה אותם.
לחץ על סמל Event Listeners ברציף DevSuite Pro. סריקה מהירה פועלת מיד ומתארת כל אלמנט שהיא מוצאת.
העבר את העכבר על כל רכיב מתואר כדי לראות את האירועים שלו ואת המקורות שלהם. השתמש באריחי הקטגוריה כדי להציג רק listeners קליקים, ריחוף או גלילה.
לחץ על Reload & record כדי לטעון מחדש את הדף פעם אחת כשההקלטה פועלת. הכלי נפתח מחדש מעצמו וכולל כעת כל קריאת addEventListener.
לחץ על שורה ברשימה כדי לגלול את הדף לרכיב זה ולהבהב אותו. Copy report נותן לך את הרשימה המלאה כטקסט.
פתח את הכרטיסייה DOM mutations והשתמש בדף. אלמנטים משתנים מהבהבים, והעמוסים שבהם עולים לראש הרשימה.
התקן את DevSuite Pro בחינם ופתח 74+ כלי פיתוח לדפדפן שלך.
