ব্যাজ রেফারেন্স

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub

Toggle various overlays and speed up DOM tree navigation with this comprehensive reference of badges in the Elements panel.

ব্যাজগুলি দেখান বা লুকান

নির্দিষ্ট ব্যাজগুলি দেখাতে বা লুকাতে:

  1. Open DevTools .
  2. Right-click an element in the DOM tree and check one or several badges in the Badge settings sub-menu.

The 'Badge settings' menu.

The Elements panel shows the selected badges next to the appropriate elements in the DOM tree. The next sections explain every badge.

উৎস দেখুন

The view-source badge is next to the <html> tag at the root of the HTML page. Click it to view the source of your page in the Sources panel.

The 'view source' badge.

This badge provides an alternative workflow to the View Page Source option in Chrome's page context (right-click) menu:

  1. In Chrome, right-click > Inspect a page.
  2. In the Elements panel, click the view-source badge next to the <html> tag.
  3. Inspect the page source in the Sources panel.

গ্রিড

An HTML element is a grid container if its display CSS property is set to grid or inline-grid . Such elements have grid badges next to them that toggle the corresponding overlays.

Toggle the overlay on the following preview:

  1. Inspect the element in the preview.
  2. In the DOM tree, click the grid badge next to the element and observe the overlay.

Grid overlay.

The overlay shows columns, rows, their numbers, and gaps.

To learn how to debug grid layout, see Inspect CSS grid .

Subgrid

সাবগ্রিড হলো একটি নেস্টেড গ্রিড যা তার প্যারেন্ট গ্রিডের মতোই একই ট্র্যাক ব্যবহার করে। কোনো এলিমেন্টকে সাবগ্রিড কন্টেইনার বলা হয় যদি তার grid-template-columns এবং grid-template-rows প্রপার্টিগুলোর একটি বা উভয়টি ` subgrid হিসেবে সেট করা থাকে। এই ধরনের এলিমেন্টগুলোর পাশে subgrid ব্যাজ থাকে যা সংশ্লিষ্ট ওভারলেগুলোকে টগল করে।

Toggle the overlay on the following preview:

  1. Inspect the element in the preview.
  2. In the DOM tree, click the subgrid badge next to the element and observe the overlay.

Subgrid overlay.

The overlay shows columns, rows, their numbers, and gaps of a subgrid.

ফ্লেক্স

An HTML element is a flex container if its display CSS property is set to flex or inline-flex . Such elements have flex badges next to them that toggle the corresponding overlays.

Toggle the overlay on the following preview:

  1. Inspect the element in the preview.
  2. In the DOM tree, click the flex badge next to the element and observe the overlay.

Flex overlay.

The overlay shows child element positions.

To learn how to debug flex layouts, see Inspect and debug CSS flexbox .

DevTools can detect some ad frames and tag them . Such frames have ad badges next to them.

Discover an ad in the following preview:

  1. প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
  2. In the DOM tree, find an element with the ad badge next to it.

বিজ্ঞাপনের ব্যাজ।

The ad badge is not clickable but if you hover over it, you will see a tooltip that provides context on why the element was identified as an ad, such as:

Ad badge's tooltip.

  • Script ancestry : Which scripts were involved in creating the element.
  • Filter list rules : The specific rule from a filter list (for example, EasyList ) that matched the element or the resource it loaded.

You can also use the Rendering tab to highlight ad frames in red.

Scroll

An HTML element is a scroll container if its overflow CSS property is set to scroll , or auto when there's enough content to cause overflow. Such elements have scroll badges next to them.

DOM ট্রি নোডে স্ক্রোল ব্যাজ।

Scroll-snap

Scroll containers can have CSS properties that configure snap points . Such elements have scroll-snap badges next to them that toggle the corresponding overlays.

Toggle the overlay on the following preview:

  1. Inspect the element in the preview.
  2. In the DOM tree, click the scroll-snap badge next to the element.
  3. Try scrolling the element to the right and observe the overlay.

Scroll-snap overlay.

The overlay shows element positions and snap points.

কন্টেইনার

An HTML element is a container if it has the container-type CSS property. Such elements have container badges next to them that toggle the corresponding overlays.

নিম্নলিখিত প্রিভিউতে ওভারলেটি টগল করুন:

  1. প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
  2. In the DOM tree, click the container badge next to the element.
  3. Try resizing the element by dragging its bottom-right corner and observe the layout change and overlay.

কন্টেইনার ওভারলে।

ওভারলেটি চাইল্ড এলিমেন্টগুলোর অবস্থান দেখায়।

To learn how to debug container queries, see Inspect and debug CSS container queries .

স্লট

<slot> HTML এলিমেন্টটি একটি প্লেসহোল্ডার যা আপনি আপনার নিজস্ব কন্টেন্ট দিয়ে পূরণ করতে পারেন। <template> এলিমেন্টের সাথে একত্রে, <slot> আপনাকে আলাদা DOM ট্রি তৈরি করতে এবং সেগুলোকে একসাথে উপস্থাপন করতে দেয়। স্লট কন্টেন্ট এলিমেন্টগুলোর পাশে slot ব্যাজ থাকে যা সংশ্লিষ্ট স্লটগুলোর লিঙ্ক হিসেবে কাজ করে।

Discover the slot badge in the following preview:

  1. প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
  2. In the DOM tree, click the slot badge next to the element to locate the corresponding slot. ব্যাজগুলো বসান এবং উন্মোচন করুন।
  3. Get back to the slot's content by clicking the reveal badge.

উপরের স্তর

এই ব্যাজটি আপনাকে টপ লেয়ারের ধারণা বুঝতে এবং তা কল্পনা করতে সাহায্য করে। টপ লেয়ার z-index নির্বিশেষে অন্য সব লেয়ারের উপরে কন্টেন্ট রেন্ডার করে। যখন আপনি .showModal() মেথড ব্যবহার করে একটি <dialog> এলিমেন্ট খোলেন, তখন ব্রাউজার এটিকে টপ লেয়ারে রাখে।

To help you visualize top layer elements, the Elements panel adds a #top-layer container to the DOM tree after the closing </html> tag.

Top layer elements have top-layer (N) badges next to them, where N is the element's index number. The badges are links to the corresponding elements in the #top-layer container.

Discover the top-layer (N) badge in the following preview:

  1. প্রিভিউতে, 'ওপেন ডায়ালগ'-এ ক্লিক করুন।
  2. ডায়ালগটি পরীক্ষা করুন ।
  3. DOM ট্রি-তে, <dialog> এলিমেন্টের পাশে থাকা top-layer (1) ব্যাজটিতে ক্লিক করুন। এলিমেন্টস প্যানেলটি আপনাকে ক্লোজিং </html> ট্যাগের পরে #top-layer কন্টেইনারের সংশ্লিষ্ট এলিমেন্টে নিয়ে যাবে। শীর্ষ স্তরের ধারক এবং ব্যাজ।
  4. Get back to the <dialog> element by clicking the reveal badge next to the element or its ::backdrop .

মিডিয়া

The media badge is turned off by default. When turned on , it appears next to <audio> and <video> elements. Click this badge to open the Media panel and debug your media.

The media badge turned on in badge settings and displayed next to the video element.

For more information, see Debug media players with the Media panel .

পপওভার

পপওভার হলো এমন যেকোনো এলিমেন্ট যার একটি popover অ্যাট্রিবিউট থাকে, এবং এটি টুলটিপ, অ্যালার্ট, টোস্টসহ আরও বিভিন্ন ধরনের ইন্টারেক্টিভ প্যাটার্নের জন্য উপযোগী। এই ধরনের এলিমেন্টগুলোর পাশে popover ব্যাজ থাকে।

This badge toggles a top-layer badge next to it that links to the corresponding elements in the #top-layer container.

Discover the popover badge in the following preview:

  1. প্রিভিউতে, টগল পপওভার-এ ক্লিক করুন।
  2. প্রদর্শিত পপওভারটি পরীক্ষা করুন ।

  3. In the DOM tree, click the popover badge next to the <div popover> element. The Elements panel shows you top-layer badge.

    The popover badge next to the element with a popover attribute.

  4. `টপ লেয়ার` বিভাগে দেওয়া ধাপগুলো অনুসরণ করুন।

To learn more, see also https://web.dev/learn/css/popover-and-dialog .

শুরুর-শৈলী

@starting-style রুলটি পেজে রেন্ডার হওয়ার আগে কোনো এলিমেন্টের প্রাথমিক স্টাইল নির্ধারণ করে। যেসব এলিমেন্ট display: none থেকে অ্যানিমেট হয়ে আসে , তাদের জন্য এটি আবশ্যক, কারণ অ্যানিমেট হওয়ার জন্য তাদের একটি স্টেট প্রয়োজন। এই ধরনের এলিমেন্টগুলোর পাশে starting-style ব্যাজ থাকে।

This badge toggles the styles in the @starting-style rule, so you can see the animation in action.

Discover the starting-style badge in the following preview:

  1. প্রিভিউতে, ওপেন পপওভার-এ ক্লিক করুন।
  2. প্রদর্শিত পপওভারটি পরীক্ষা করুন ।

  3. In the DOM tree, toggle the starting-style badge next to the <div popover> element.

    The starting-style badge next to the element with the @starting-style rule.

  4. Observe the animation in action and the styles being applied in the Elements > Styles tab.

আরও জানতে, পপওভার অ্যানিমেট করাও দেখুন।