اشکال زدایی مسائل مربوط به اسکرول با نشان اسکرول جدید DevTools آسان تر شد! این پست توضیح می‌دهد که عناصر قابل پیمایش چیست، چرا یافتن آنها دشوار است، و چگونه این ویژگی جدید به شما کمک می‌کند تا آنها را سریع پیدا کنید. همچنین شما را به پشت صحنه می بریم تا ببینیم چگونه نشان اسکرول را توسعه داده ایم.
عنصر قابل پیمایش چیست؟
اگر می‌توانید محتوای داخل یک عنصر را اسکرول کنید، یک عنصر قابل پیمایش (یا ظرف پیمایش ) است. مهم نیست که نوارهای اسکرول داشته باشد یا نه.
چرا یافتن عنصر قابل پیمایش سخت است؟
اشکال زدایی مشکلات اسکرول سخت است. بدون ابزاری برای نمایش واضح عنصر قابل پیمایش، گم شدن آسان است، به خصوص در صفحات پیچیده که هیچ نوار پیمایشی وجود ندارد.
یافتن دستی عنصری که در حال پیمایش است می‌تواند یک فرآیند خسته‌کننده آزمون و خطا باشد:
- شما یک عنصر را انتخاب می کنید و سبک های آن را تغییر می دهید.
- آیا نوار اسکرول ناپدید شد؟ اگر نه، این روند را تکرار کنید.
معرفی نشان اسکرول
در Chrome 130، می‌توانید از نشان اسکرول جدید در پنل عناصر برای تعیین مکان عناصر قابل پیمایش استفاده کنید!
به عنوان مثال، سعی کنید با استفاده از نشان اسکرول جدید، پیدا کنید کدام عنصر باعث می شود که نوارهای پیمایش در مثال زیر ظاهر شوند.
اجرای فنی نشان اسکرول جدید
در پشت صحنه، اجرا به دو بخش تقسیم می شود:
- شناسایی عناصر قابل پیمایش از سیگنال های
Blink's(موتور رندر کروم) برای شناسایی عناصری که قابل پیمایش هستند یا به دلیل تغییر در صفحه قابل پیمایش شده اند استفاده کنید. - نمایش نشان اسکرول . پس از دریافت سیگنال‌ها، یک نشان جدید (مشابه با نشان‌های شبکه موجود) در کنار عناصر قابل پیمایش در پانل عناصر اضافه می‌کنیم.
شناسایی عناصر قابل پیمایش
برای شناسایی عناصر قابل پیمایش، از روش IsUserScrollable در Blink استفاده کردیم. این روش با بررسی اینکه آیا گره در امتداد محور X یا Y سرریز شده است یا خیر، تعیین می کند که آیا یک گره قابل پیمایش است یا خیر، که نشان می دهد محتوا از ابعاد ظرف بیشتر است و می توان آن را پیمایش کرد. ما این روش را هر بار که یک عنصر جدید در DevTools بارگذاری می شود برای شناسایی کانتینرهای قابل پیمایش فراخوانی می کنیم.
برای به‌روزرسانی پویا وضعیت اسکرول‌پذیری عناصری که قبلاً بارگذاری شده‌اند، باید به عمق پایگاه کد موتور رندر Blink شیرجه می‌زدیم تا جایی که ناحیه قابل پیمایش برای یک گره اضافه یا حذف شده است.
سرریز مدیریت منطق اصلی توسط مؤلفه PaintLayerScrollableArea مدیریت می شود. به طور خاص، روش UpdateScrollableAreaSet مسئول تشخیص زمانی است که سرریز رخ داده یا برطرف شده است.
این اطلاعات با ارسال مرجع گره ای که ScrollableArea آن را تغییر داده است به پشتیبان DevTools منتقل می شود.
سپس باطن گره را با استفاده از روش IsUserScrollable مجددا بررسی می کند تا وضعیت جدید آن را بدست آورد. پس از تأیید قابلیت پیمایش، سیگنالی با استفاده از Chrome DevTools Protocol به قسمت جلویی ارسال می‌شود و اطمینان حاصل می‌کند که رابط کاربری تغییرات محتوای قابل پیمایش را به‌طور دقیق منعکس می‌کند.
نمایش نشان اسکرول
برای افزودن نشان جدید در DevTools frontend، یک متد handler در ElementsTreeOutline ایجاد کردیم که nodeId عنصری را دریافت کرد که وضعیت اسکرول پذیری آن را توسط یک رویداد تغییر داد. در آن هندلر، شی ElementsTreeElement را با استفاده از nodeId بازیابی می کنیم و به آن دستور می دهیم که نشان اسکرول خود را به روز کند.
به روز رسانی نشان اسکرول شامل بررسی اینکه آیا عنصر قابل پیمایش است و آیا از قبل دارای نشان اسکرول است یا خیر. بر اساس این شرایط اقدامات زیر انجام می شود:
- اگر عنصر قابل پیمایش است و هنوز نشان اسکرول ندارد، یکی اضافه می شود.
- اگر عنصر قابل پیمایش نباشد اما دارای نشان اسکرول باشد، نشان موجود حذف می‌شود.
منطق ویژه برای مدیریت سند سطح بالای قابل پیمایش
وقتی سند سطح بالا قابل پیمایش است، یک مورد خاص داریم زیرا عنصر #document را برای سند اصلی نمایش نمی‌دهیم — فقط برای iframe. در نتیجه، نمی‌توانیم نشان را مستقیماً روی عناصر #document نشان دهیم
تصمیم گرفتیم به جای آن نشان اسکرول را در عنصر </html> نشان دهیم، از جمله مواردی در Quirks mode که در آن document.scrollingElement() <body> یا null را برمی گرداند. این تصمیم از سردرگمی بین اسناد قابل پیمایش و عناصر بدنه قابل پیمایش جلوگیری می کند، به ویژه در صفحاتی که می توان بدنه را به طور مستقل پیمایش کرد.
ما دریافتیم که این واضح ترین راه برای نشان دادن به توسعه دهندگان است که کدام عناصر را می توان پیمایش کرد.
پروتکل Chrome DevTools (CDP) تغییر می کند
برای ادغام نشان اسکرول جدید، تغییراتی در Chrome DevTools Protocol (CDP) لازم بود. CDP به عنوان یک پروتکل ارتباطی بین DevTools و Chrome عمل می کند.
ما مجبور شدیم پروتکل را برای پوشش دو مورد تغییر دهیم:
- آیا این گره زمانی که در DevTools بارگذاری می شود، قابل پیمایش است؟
- آیا این گره حالت پیمایشی خود را به روز کرده است؟
آیا این گره زمانی که در DevTools بارگذاری می شود، قابل پیمایش است؟
ما یک ویژگی جدید به نام isScrollable را به نوع داده DOM.Node اضافه کردیم که هر بار که یک گره جدید در DevTools frontend بارگذاری می شود ارسال می شود.
ما تصمیم گرفتیم که این ویژگی را فقط زمانی که درست است پر کنیم تا از بارگیری داده های غیر ضروری جلوگیری کنیم. بنابراین، هنگامی که ویژگی ارسال نمی شود، فرض می کنیم که عنصر قابل اسکرول نیست.
آیا این گره حالت پیمایشی خود را به روز کرده است؟
برای تشخیص اینکه آیا یک گره وضعیت قابل پیمایش خود را به روز کرده است یا خیر، ما یک رویداد جدید scrollableFlagUpdated در CDP را معرفی کردیم که هر زمان که یک عنصر یک ناحیه قابل پیمایش را بدست آورد یا از دست داد، راه اندازی می شود. این رویداد دارای ساختار زیر است:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
نکته حرفه ای: تغییرات جدید CDP را در مرورگر خود بررسی کنید
اگر کنجکاو هستید که Chrome چگونه با DevTools ارتباط برقرار می کند، یک راه ساده برای کشف آن وجود دارد.
پانل مانیتور پروتکل به شما امکان می‌دهد رویدادهای بی‌درنگ رد و بدل شده بین Chrome و DevTools، از جمله رویداد جدید اضافه شده برای نشان اسکرول را مشاهده کنید. به عنوان مثال، هنگامی که سبک یک عنصر را تغییر می‌دهید که بر قابلیت اسکرول آن تأثیر می‌گذارد، می‌توانید بلافاصله رویدادهای CDP مرتبط را هنگام وقوع مشاهده کنید.
برای راهنمای دقیق‌تر، به Protocol monitor: View and send CDP requests .
Beyond Scrolling: معرفی نشان سرریز
حتی بهتر از آن، ما در حال کار بر روی یک نشان سرریز جدید هستیم تا علت آن پیمایش را مشخص کنیم. این نشان در کنار عناصری ظاهر می‌شود که محفظه‌شان سرریز می‌شود و به شما کمک می‌کند مشکلات طرح‌بندی را سریع تشخیص دهید.
در اینجا نحوه عملکرد آن آمده است:
- اشکال زدایی تعاملی روی نشان اسکرول کلیک کنید تا یک دستور DevTools Protocol فعال شود که عناصر فرزند سرریز را شناسایی می کند.
- تجسم سرریز . ما مرزهای عنصر را در ظرف قابل پیمایش ترسیم می کنیم تا سرریز را تشخیص دهیم.
- برجسته کردن مقصر . نشان سرریز این عناصر سرریز را پرچم‌گذاری می‌کند و با کلیک کردن روی آن، آنها را مستقیماً در DOM برجسته می‌کند.
این به توسعه دهندگان یک ابزار قدرتمند جدید برای درک و رفع مشکلات چیدمان ناشی از محتوای سرریز می دهد. ما معتقدیم که این سطح عمیق‌تر از تجزیه و تحلیل، گردش کار اشکال‌زدایی شما را به طور قابل توجهی ساده می‌کند.