Event Listeners

بررسی اینکه چرا چیزی واکنش نشان می دهد - یا نمی کند - معمولاً با سؤالی شروع می شود که صفحه به آن پاسخ نمی دهد: آیا اصلاً کنترل کننده کلیک روی این عنصر وجود دارد؟ کدام عنصر در واقع مالک رفتار شناور است؟ گوش دادن به اسکرول و ایجاد لکنت صفحه چیست؟ مرورگر DevTools می‌تواند listeners یک عنصر را در یک زمان فهرست کند، اگر از قبل می‌دانید کدام عنصر را انتخاب کنید.

این ابزار به سؤال کل صفحه به یکباره پاسخ می دهد. هر عنصری که listener دارد یک طرح کلی به رنگ نوع خود دریافت می کند - کلیک، نشانگر، اسکرول، لمس و کشیدن، صفحه کلید، یا فرم و فوکوس - و با نگه داشتن نشانگر روی یکی، رویدادهای دقیق و از کجا آمده است: یک ویژگی درون خطی، یک ویژگی درونی، یک کنترل کننده React یا Vue ، jQuery یا addEventListener نشان می دهد. کاشی‌های دسته‌بندی، هر نوع را روشن و خاموش می‌کنند، و فهرست زیر نام هر عنصر را می‌دهد، بنابراین با یک کلیک شما را به آن می‌برد.

چارچوب ها به درستی مدیریت می شوند. React listeners خود را به root متصل می کند و رویدادها را به صورت داخلی ارسال می کند، که باعث می شود کل برنامه قابل کلیک به نظر برسد. این ابزار آن ثبت‌های ریشه را کنار می‌گذارد و کنترل‌کننده‌های React را روی عناصری که آنها را اعلام می‌کنند نشان می‌دهد. اسکن سریع نیازی به بارگذاری مجدد ندارد و هندلرهای درون خطی، React ، Vue و jQuery را پوشش می دهد. Listeners اضافه شده با addEventListener ساده قبل از باز شدن ابزار فقط از ابتدای بارگیری صفحه قابل مشاهده هستند، بنابراین Reload & record صفحه را یک بار با ضبط مجدد بارگیری می کند - سپس ابزار به تنهایی با هر listener شامل، شنوندگان سطح صفحه در window و document نیز باز می شود.

تب دوم خود DOM را تماشا می کند. هر گره اضافه یا حذف شده، تغییر ویژگی و تغییر متن در صفحه چشمک می‌زند، شمارنده‌ها جهش‌ها را در ثانیه نشان می‌دهند، و فهرستی عناصری را که بیشترین تغییر را دارند، با ویژگی‌های درگیر رتبه‌بندی می‌کند. یک جریان ثابت در حالی که هیچ کس صفحه را لمس نمی کند معمولاً به معنای یک تایمر، یک انیمیشن مبتنی بر جاوا اسکریپت یا یک فریمورک است که بیش از آنچه باید رندر می شود - دقیقاً چیزهایی که باتری ها را تخلیه می کند و باعث می شود صفحات دچار لکنت شوند.