تحدد Event Listeners كل عنصر يحتوي على event listener ، ملونًا حسب النوع - النقر، والتحويم، والتمرير، واللمس، ولوحة المفاتيح، والنموذج - ويوضح مصدر كل معالج، ويضيء العناصر مع تغير DOM.
عادةً ما يبدأ اكتشاف سبب تفاعل شيء ما - أو عدم تفاعله - بسؤال لن تجيب عليه الصفحة: هل يوجد معالج نقرات على هذا العنصر على الإطلاق؟ ما العنصر الذي يمتلك بالفعل سلوك التحويم؟ ما الذي يستمع إلى التمرير ويجعل الصفحة تلعثم؟ يمكن لـ Browser 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 أداة للمطورين لمتصفحك.
