DevTools-এর নতুন স্ক্রল ব্যাজের মাধ্যমে স্ক্রোল-সম্পর্কিত সমস্যাগুলি ডিবাগ করা সহজ হয়েছে! এই পোস্টটি ব্যাখ্যা করে যে স্ক্রোলযোগ্য উপাদানগুলি কী, কেন সেগুলি খুঁজে পাওয়া কঠিন হতে পারে এবং কীভাবে এই নতুন বৈশিষ্ট্যটি আপনাকে দ্রুত তাদের সনাক্ত করতে সহায়তা করে৷ আমরা কীভাবে স্ক্রোল ব্যাজ তৈরি করেছি তা দেখতে আমরা আপনাকে পর্দার পিছনে নিয়ে যাব।
একটি স্ক্রোলযোগ্য উপাদান কি?
আপনি যদি একটি উপাদানের ভিতরে সামগ্রীটি স্ক্রোল করতে পারেন তবে এটি একটি স্ক্রোলযোগ্য উপাদান (বা স্ক্রোল কন্টেইনার )। এটিতে স্ক্রোল বার আছে কিনা তা কোন ব্যাপার না।
কেন স্ক্রোলযোগ্য উপাদান খুঁজে পাওয়া কঠিন?
স্ক্রোল সমস্যা ডিবাগ করা কঠিন। স্ক্রোলযোগ্য উপাদানটি স্পষ্টভাবে দেখানোর জন্য একটি টুল ছাড়া, এটি হারিয়ে যাওয়া সহজ, বিশেষ করে জটিল পৃষ্ঠাগুলিতে যখন কোনও স্ক্রলবার নেই৷
স্ক্রলিং করা উপাদানটিকে ম্যানুয়ালি খুঁজে পাওয়া ট্রায়াল এবং ত্রুটির একটি ক্লান্তিকর প্রক্রিয়া হতে পারে:
- আপনি একটি উপাদান বাছাই এবং তার শৈলী পরিবর্তন.
- স্ক্রলবার কি অদৃশ্য হয়ে গেছে? যদি না হয়, আপনি প্রক্রিয়া পুনরাবৃত্তি করুন.
স্ক্রোল ব্যাজ প্রবর্তন করা হচ্ছে
Chrome 130-এ, আপনি স্ক্রোলযোগ্য উপাদানগুলি সনাক্ত করতে এলিমেন্টস প্যানেলে নতুন স্ক্রোল ব্যাজ ব্যবহার করতে পারেন!
উদাহরণ স্বরূপ, নতুন স্ক্রল ব্যাজ ব্যবহার করে নিচের উদাহরণে কোন উপাদান স্ক্রলবারগুলিকে দেখায় তা খুঁজে বের করার চেষ্টা করুন।
নতুন স্ক্রল ব্যাজের প্রযুক্তিগত বাস্তবায়ন
পর্দার পিছনে, বাস্তবায়ন দুটি ভাগে বিভক্ত:
- স্ক্রোলযোগ্য উপাদান সনাক্তকরণ . স্ক্রোলযোগ্য বা পৃষ্ঠার পরিবর্তনের কারণে স্ক্রোলযোগ্য হয়ে উঠেছে এমন উপাদানগুলি সনাক্ত করতে
Blink's(ক্রোমের রেন্ডার ইঞ্জিন) সংকেতগুলি ব্যবহার করুন৷ - স্ক্রল ব্যাজ প্রদর্শন করা হচ্ছে । সিগন্যাল পাওয়ার পর, আমরা এলিমেন্টস প্যানেলে স্ক্রোলযোগ্য উপাদানগুলির পাশে একটি নতুন ব্যাজ (বিদ্যমান গ্রিড ব্যাজগুলির অনুরূপ) অন্তর্ভুক্ত করি৷
স্ক্রোলযোগ্য উপাদান সনাক্তকরণ
স্ক্রোলযোগ্য উপাদানগুলি সনাক্ত করতে, আমরা ব্লিঙ্কে IsUserScrollable পদ্ধতি ব্যবহার করেছি। এই পদ্ধতিটি নির্ধারণ করে যে নোডটি X বা Y অক্ষ বরাবর ওভারফ্লো হয়েছে কিনা তা পরীক্ষা করে স্ক্রোলযোগ্য কিনা, এটি নির্দেশ করে যে সামগ্রীটি কন্টেইনারের মাত্রা অতিক্রম করেছে এবং স্ক্রোল করা যেতে পারে। স্ক্রোলযোগ্য পাত্র শনাক্ত করার জন্য DevTools-এ প্রতিবার একটি নতুন উপাদান লোড হলে আমরা এই পদ্ধতিটিকে বলি।
ইতিমধ্যে লোড করা উপাদানগুলির স্ক্রোলযোগ্যতা অবস্থাকে গতিশীলভাবে আপডেট করার জন্য, নোডের জন্য স্ক্রোলযোগ্য অঞ্চলটি কোথায় যুক্ত বা সরানো হয়েছে তা ট্র্যাক করতে আমাদের ব্লিঙ্ক রেন্ডারিং ইঞ্জিন কোডবেসের গভীরে ডুব দিতে হয়েছিল।
মূল লজিক হ্যান্ডলিং ওভারফ্লো PaintLayerScrollableArea উপাদান দ্বারা পরিচালিত হয়। বিশেষত, UpdateScrollableAreaSet পদ্ধতিটি কখন ওভারফ্লো হয়েছে বা সমাধান করা হয়েছে তা সনাক্ত করার জন্য দায়ী।
এই তথ্যটি নোডের রেফারেন্স পাঠিয়ে DevTools ব্যাকএন্ডে রিলে করা হয় যা এর ScrollableArea পরিবর্তন করেছে।
ব্যাকএন্ড তার নতুন অবস্থা পেতে IsUserScrollable পদ্ধতি ব্যবহার করে নোডটি পুনরায় পরীক্ষা করে। স্ক্রোলযোগ্যতা যাচাই করার পরে, Chrome DevTools Protocol ব্যবহার করে ফ্রন্টএন্ডে একটি সংকেত পাঠানো হয়, যাতে UI সঠিকভাবে স্ক্রোলযোগ্য বিষয়বস্তুর পরিবর্তনগুলিকে প্রতিফলিত করে।
স্ক্রল ব্যাজ প্রদর্শন করা হচ্ছে
DevTools ফ্রন্টএন্ডে নতুন ব্যাজ যোগ করার জন্য, আমরা ElementsTreeOutline এ একটি হ্যান্ডলার পদ্ধতি তৈরি করেছি যেটি উপাদানটির nodeId পেয়েছিল যা একটি ইভেন্টের মাধ্যমে স্ক্রোলযোগ্যতার অবস্থা পরিবর্তন করে। সেই হ্যান্ডলারে আমরা nodeId ব্যবহার করে ElementsTreeElement অবজেক্টটি পুনরুদ্ধার করি এবং এটির স্ক্রোল ব্যাজ আপডেট করার নির্দেশ দিই।
স্ক্রোল ব্যাজ আপডেট করার সাথে উপাদানটি স্ক্রোলযোগ্য কিনা এবং এটির ইতিমধ্যে একটি স্ক্রোল ব্যাজ আছে কিনা তা পরীক্ষা করা জড়িত৷ এই শর্তগুলির উপর ভিত্তি করে, নিম্নলিখিত পদক্ষেপগুলি নেওয়া হয়:
- যদি উপাদানটি স্ক্রোলযোগ্য হয় এবং এখনও একটি স্ক্রোল ব্যাজ না থাকে তবে একটি যোগ করা হয়।
- যদি উপাদানটি স্ক্রোলযোগ্য না হয় তবে একটি স্ক্রোল ব্যাজ থাকে, বিদ্যমান ব্যাজটি সরানো হয়।
স্ক্রোলযোগ্য শীর্ষ-স্তরের নথি পরিচালনা করার জন্য বিশেষ যুক্তি
যখন শীর্ষ-স্তরের নথিটি স্ক্রোলযোগ্য হয়, তখন আমাদের একটি বিশেষ ক্ষেত্রে থাকে কারণ আমরা প্রধান নথির জন্য #document উপাদানটি প্রদর্শন করি না - শুধুমাত্র আইফ্রেমের জন্য। ফলস্বরূপ, আমরা ব্যাজটি সরাসরি #document এলিমেন্টে দেখাতে পারি না
আমরা পরিবর্তে </html> এলিমেন্টে স্ক্রোল ব্যাজ প্রদর্শন করার সিদ্ধান্ত নিয়েছি, যার মধ্যে Quirks mode রয়েছে যেখানে document.scrollingElement() <body> বা null প্রদান করে। এই সিদ্ধান্তটি স্ক্রোলযোগ্য নথি এবং স্ক্রোলযোগ্য বডি উপাদানগুলির মধ্যে বিভ্রান্তি রোধ করে, বিশেষ করে এমন পৃষ্ঠাগুলিতে যেখানে বডিটি স্বাধীনভাবে স্ক্রোল করা যায়।
কোন উপাদানগুলিকে স্ক্রোল করা যেতে পারে তা ডেভেলপারদের দেখানোর সবচেয়ে পরিষ্কার উপায় হিসেবে আমরা এটি খুঁজে পেয়েছি।
Chrome DevTools প্রোটোকল (CDP) পরিবর্তন
নতুন স্ক্রোল ব্যাজ সংহত করতে, Chrome DevTools Protocol (CDP) এ পরিবর্তন প্রয়োজন ছিল। CDP DevTools এবং Chrome এর মধ্যে একটি যোগাযোগ প্রোটোকল হিসাবে কাজ করে।
দুটি ক্ষেত্রে কভার করার জন্য আমাদের প্রোটোকল পরিবর্তন করতে হয়েছিল:
- যখন এটি DevTools এ লোড করা হয় তখন কি এই নোডটি স্ক্রোল করা যায়?
- এই নোড কি তার স্ক্রোলযোগ্য অবস্থা আপডেট করেছে?
যখন এটি DevTools এ লোড করা হয় তখন কি এই নোডটি স্ক্রোল করা যায়?
আমরা DOM.Node এ isScrollable নামে একটি নতুন প্রপার্টি যোগ করেছি। নোড ডেটা টাইপ যা প্রতিবার DevTools ফ্রন্টএন্ডে একটি নতুন নোড লোড হলে পাঠানো হয়।
অপ্রয়োজনীয় ডেটা লোড করা এড়াতে আমরা এই সম্পত্তিটি শুধুমাত্র তখনই পূরণ করার সিদ্ধান্ত নিয়েছি যখন এটি সত্য হয়। অতএব, যখন সম্পত্তি পাঠানো হয় না, আমরা অনুমান করি যে উপাদানটি স্ক্রোলযোগ্য নয়।
এই নোড কি তার স্ক্রোলযোগ্য অবস্থা আপডেট করেছে?
একটি নোড তার স্ক্রোলযোগ্য অবস্থা আপডেট করেছে কিনা তা সনাক্ত করতে, আমরা CDP-তে একটি নতুন ইভেন্ট scrollableFlagUpdated চালু করেছি, যেটি ট্রিগার হয় যখনই একটি উপাদান স্ক্রোলযোগ্য এলাকা লাভ করে বা হারায়। ইভেন্টের নিম্নলিখিত কাঠামো রয়েছে:
# 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 ।
স্ক্রোলিং এর বাইরে: ওভারফ্লো ব্যাজ প্রবর্তন করা হচ্ছে
আরও ভাল, আমরা একটি নতুন ওভারফ্লো ব্যাজ নিয়ে কাজ করছি সেই স্ক্রলিংয়ের কারণ চিহ্নিত করতে৷ এই ব্যাজটি এমন উপাদানগুলির পাশে প্রদর্শিত হবে যা তাদের কন্টেইনারকে ওভারফ্লো করে, আপনাকে লেআউট সমস্যাগুলি দ্রুত নির্ণয় করতে সহায়তা করে।
এটি কিভাবে কাজ করবে তা এখানে:
- ইন্টারেক্টিভ ডিবাগিং । একটি DevTools প্রোটোকল কমান্ড ট্রিগার করতে স্ক্রোল ব্যাজটিতে ক্লিক করুন যা উপচে পড়া চাইল্ড উপাদানগুলি সনাক্ত করে।
- ভিজ্যুয়ালাইজিং ওভারফ্লো আমরা কোনো ওভারফ্লো সনাক্ত করতে স্ক্রোলযোগ্য পাত্রের মধ্যে উপাদান সীমানা ম্যাপ করব।
- অপরাধীকে হাইলাইট করা । ওভারফ্লো ব্যাজ এই উপচে পড়া উপাদানগুলিকে পতাকাঙ্কিত করবে এবং এটিতে ক্লিক করলে সেগুলি সরাসরি DOM-এ হাইলাইট হবে৷
এটি ডেভেলপারদের উপচে পড়া বিষয়বস্তুর কারণে সৃষ্ট লেআউট সমস্যা বুঝতে ও সমাধান করার জন্য একটি শক্তিশালী নতুন টুল দেবে। আমরা বিশ্বাস করি এই গভীর স্তরের বিশ্লেষণ আপনার ডিবাগিং কর্মপ্রবাহকে উল্লেখযোগ্যভাবে প্রবাহিত করবে।