স্তর প্যানেল আপনাকে আপনার ওয়েবসাইটের রচনা এবং ব্রাউজার কীভাবে সামগ্রী রেন্ডার করে তা বুঝতে সাহায্য করে৷ রেন্ডারিং সমস্যা সনাক্ত করতে, স্ক্রলিং বাগগুলি ঠিক করতে এবং অ্যানিমেশনগুলি অপ্টিমাইজ করতে আপনার ওয়েবসাইটের একটি 3D চিত্র বিশ্লেষণ করুন৷
ওভারভিউ
নিম্নলিখিত কাজ করতে স্তর প্যানেল ব্যবহার করুন:
- নথি স্তর দেখুন.
- নথি স্তর পরিদর্শন.
- DOM পরিবর্তন ব্রেকপয়েন্ট সেট করুন।
- পেইন্ট প্রোফাইলার তথ্য দেখুন।
- ধীর স্ক্রোলিং উপাদান সনাক্ত করুন.
লেয়ার প্যানেল খুলুন
স্তর প্যানেল খুলতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- DevTools খুলুন ।
- টিপে কমান্ড মেনু খুলুন:
- macOS: কমান্ড + শিফট + পি
- উইন্ডোজ, লিনাক্স, ক্রোমওএস: কন্ট্রোল + শিফট + পি
-
Layersটাইপ করা শুরু করুন, শো লেয়ার প্যানেল নির্বাচন করুন এবং এন্টার টিপুন।
বিকল্পভাবে, উপরের ডানদিকে, more_vert আরও বিকল্প > আরও সরঞ্জাম > স্তর প্যানেল নির্বাচন করুন।
অতিরিক্তভাবে, পারফরম্যান্স প্যানেল আপনাকে একটি লেয়ার ট্যাবে একটি রেকর্ডিংয়ের প্রতিটি ফ্রেমের স্তরগুলি দেখতে দেয়। আরও জানতে, দেখুন স্তরের তথ্য দেখুন ।
নথি স্তর দেখুন
লেয়ার প্যানেলের বাম-সবচেয়ে অংশটি একটি প্রসারণযোগ্য ট্রিতে নথির সমস্ত রেন্ডার করা স্তর তালিকাভুক্ত করে। আপনি পৃষ্ঠা নেভিগেট করার সাথে সাথে এই গাছটি আপডেট হয়। স্তরগুলিকে তাদের CSS নির্বাচক দ্বারা বা একটি সংখ্যা দিয়ে চিহ্নিত করা হয়, তারপরে পিক্সেলে স্তরের মাত্রাগুলি অনুসরণ করা হয়।
ওয়েব পৃষ্ঠায় এবং ডায়াগ্রামে হাইলাইট করতে একটি স্তরের উপর হভার করুন। নিম্নলিখিত তথ্য সহ একটি টুলটিপ পৃষ্ঠায় উপস্থিত হবে:
- স্তর নির্বাচকরা।
- স্তরের মাত্রা, পিক্সেলে।
- CSS গ্রিড বা ফ্লেক্স প্রতিনিধিত্বকারী একটি আইকন, যেখানে প্রাসঙ্গিক।
নথি স্তর পরিদর্শন
বিস্তারিত ফলকে আরও তথ্য দেখতে একটি স্তরে ক্লিক করুন।
স্তরের উপর নির্ভর করে, নিম্নলিখিত তথ্য প্রদর্শিত হবে:
- আকার
- সংমিশ্রণ কারণ
- মেমরি অনুমান
- পেইন্ট গণনা
- ধীর স্ক্রল অঞ্চল
- স্টিকি অবস্থানের সীমাবদ্ধতা
চিত্রটি দেখায় যে কীভাবে স্তরগুলি এই পৃষ্ঠার জন্য স্ট্যাক করা হয় এবং সাজানো হয়, ভিউপোর্টের বাইরে থাকা উপাদানগুলি সহ।
চিত্রটি সরাতে:
- ডায়াগ্রাম সরাতে WASD ব্যবহার করুন। প্যান আপ করতে W , বামে প্যান করতে A , নিচে প্যান করতে S এবং ডানদিকে প্যান করতে D টিপুন।
- প্যান মোড ড্র্যাগ_প্যান ক্লিক করুন বা X টিপুন এবং X এবং Y অক্ষ বরাবর যেতে টেনে আনুন।
- Rotate Mode 360 এ ক্লিক করুন অথবা V টিপুন এবং Z অক্ষ বরাবর ঘোরাতে টেনে আনুন।
- ট্রান্সফর্ম zoom_in_map রিসেট ক্লিক করুন বা ডায়াগ্রামটিকে তার আসল অবস্থানে রিসেট করতে 0 টিপুন।
- শিফট + + বা মাউসহুইল আপ টিপে জুম ইন করুন।
- শিফট + - বা মাউসহুইল ডাউন টিপে জুম আউট করুন।
এলিমেন্টস প্যানেলে একটি লেয়ারের সংশ্লিষ্ট DOM এলিমেন্ট দেখতে, ডায়াগ্রামে বা লেয়ার ট্রিতে একটি লেয়ারে ডান-ক্লিক করুন এবং এলিমেন্টস প্যানেলে Reveal এ ক্লিক করুন।
অতিরিক্তভাবে, লেয়ার প্যানেল কিছু লেয়ার লুকিয়ে রাখে যেগুলি হোস্ট বা কন্টেন্ট আঁকে না। এই স্তরগুলি দেখাতে, লেয়ার ট্রিতে ডান-ক্লিক করুন এবং অভ্যন্তরীণ স্তরগুলি দেখান নির্বাচন করুন।
DOM পরিবর্তন ব্রেকপয়েন্ট সেট করুন
লেয়ার প্যানেল আপনাকে DOM পরিবর্তন ব্রেকপয়েন্ট সেট করতে দেয়।
একটি DOM পরিবর্তন ব্রেকপয়েন্ট সেট করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- লেয়ার ট্রিতে একটি লেয়ারে ডান ক্লিক করুন।
- ব্রেক অনের উপর হোভার করুন তারপর সাবট্রি পরিবর্তন , অ্যাট্রিবিউট পরিবর্তন বা নোড অপসারণ নির্বাচন করুন।
DOM পরিবর্তন ব্রেকপয়েন্টগুলির একটি তালিকা এখানে খুঁজুন:
- উপাদান > DOM ব্রেকপয়েন্ট ট্যাব।
- সোর্স > DOM ব্রেকপয়েন্ট কলাপসেবল বিভাগ।
ব্রেকপয়েন্টের প্রকার সম্পর্কে আরও জানতে, DOM পরিবর্তনের ব্রেকপয়েন্টের প্রকারগুলি দেখুন।
পেইন্ট প্রোফাইলার তথ্য দেখুন
স্তর প্যানেল আপনাকে একটি স্তর সম্পর্কে বিস্তারিত পেইন্ট তথ্য দেখতে দেয় এবং ওয়েবপৃষ্ঠার বিষয়বস্তু 3D ডায়াগ্রামে রেন্ডার করতে দেয়।
পেইন্ট প্রোফাইলার সক্রিয় করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- অ্যাকশন বারে check_box Paints চেকবক্স চেক করুন।
- লেয়ার ট্রি থেকে একটি লেয়ার সিলেক্ট করুন।
- বিস্তারিত ফলকের নীচে পেইন্ট প্রোফাইলারে ক্লিক করুন। মনে রাখবেন যে সমস্ত স্তরে এই বিকল্পটি থাকবে না।
প্রোফাইলার ট্যাবটি পেইন্ট রেকর্ড এবং একটি হিস্টোগ্রাম সহ খুলবে যা পেইন্ট খরচ বন্টন প্রতিনিধিত্ব করে।
পেইন্টস সক্রিয় করা ওয়েবপৃষ্ঠার বেশিরভাগ বিষয়বস্তু ডায়াগ্রামে রেন্ডার করবে।
ধীর স্ক্রোলিং উপাদান সনাক্ত করুন
কিছু ওয়েবসাইট জাভাস্ক্রিপ্ট ব্যবহার করে স্ক্রোল সনাক্ত করতে বা উপাদানগুলিতে ইভেন্ট স্পর্শ করতে এমনভাবে যা নেতিবাচকভাবে স্ক্রলিং গতিকে প্রভাবিত করতে পারে। কর্মক্ষমতা বাধাগ্রস্ত করতে পারে এমন স্ক্রোলিং সম্পর্কিত ইভেন্ট শ্রোতাদের রয়েছে এমন স্তরগুলি সনাক্ত করতে, চেক_বক্স স্লো স্ক্রোল রেক্টস চেকবক্সে ক্লিক করুন।
যে স্তরগুলি ধীরে ধীরে স্ক্রোলিং করতে পারে সেগুলি গোলাপী রঙে হাইলাইট করা হয়েছে৷