مرجع نشان‌ها

با این مرجع جامع نشان‌ها در پانل عناصر، هم‌پوشانی‌های مختلف را روشن/خاموش کنید و پیمایش درخت DOM را سرعت ببخشید.

نمایش دادن یا پنهان کردن نشان‌ها

برای نمایش یا پنهان کردن نشان‌های خاص:

1. DevTools را باز کنید.
2. روی عنصری در درخت DOM کلیک راست کنید و یک یا چند نشان را در زیرمنو تنظیمات نشان بررسی کنید.

پانل عناصر نشان‌های انتخاب‌شده را در کنار عناصر مناسب در درخت DOM نشان می‌دهد. در بخش‌های بعدی، هر نشان توضیح داده شده است.

مشاهده منبع

نشان view-source در کنار برچسب <html> در ریشه صفحه HTML قرار دارد. روی آن کلیک کنید تا منبع صفحه‌تان را در پانل منابع مشاهده کنید.

این نشان گردش کار جایگزینی برای گزینه مشاهده منبع صفحه در منوی زمینه صفحه (کلیک راست) Chrome ارائه می‌دهد:

1. در Chrome، روی صفحه‌ای کلیک راست کنید > بازرسی را انتخاب کنید.
2. در پانل عناصر، روی نشان view-source در کنار برچسب <html> کلیک کنید.
3. منبع صفحه را در پانل منابع بازرسی کنید.

شناسه عرضه جهانی (GRid)

عنصر HTML یک ظرف شبکه‌ای است اگر ویژگی CSS display آن روی grid یا inline-grid تنظیم شده باشد. این عناصر grid نشان در کنار خود دارند که رونهادهای مربوطه را روشن/خاموش می‌کنند.

رونهاد را در پیش‌نمایش زیر روشن/خاموش کنید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، روی نشان grid در کنار عنصر کلیک کنید و رونهاد را مشاهده کنید.

پوشش ستون‌ها، ردیف‌ها، شماره‌های آن‌ها، و فاصله‌ها را نشان می‌دهد.

برای آشنایی با نحوه اشکال‌زدایی چیدمان جدولی، بازرسی جدول CSS را ببینید.

جدول فرعی

زیرشبکه یک شبکه تودرتو است که از همان قطعه‌های شبکه والد خود استفاده می‌کند. اگر یکی یا هر دو ویژگی grid-template-columns، grid-template-rows روی subgrid تنظیم شده باشد، عنصر محتوی زیرشبکه است. این عناصر دارای نشان‌های subgrid در کنار خود هستند که هم‌پوشانی‌های مربوطه را تغییر می‌دهند.

رونهاد را در پیش‌نمایش زیر روشن/خاموش کنید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، روی نشان subgrid در کنار عنصر کلیک کنید و هم‌پوشانی را مشاهده کنید.

این هم‌پوشانی ستون‌ها، ردیف‌ها، شماره‌های آن‌ها، و فاصله‌های زیرشبکه را نشان می‌دهد.

به‌رخ کشیدن

عنصر HTML زمانی محفظه flex است که ویژگی CSS display آن روی flex یا inline-flex تنظیم شده باشد. این عناصر دارای نشان‌های flex در کنار خود هستند که هم‌پوشانی‌های مربوطه را تغییر می‌دهند.

رونهاد را در پیش‌نمایش زیر روشن/خاموش کنید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، روی نشان flex در کنار عنصر کلیک کنید و هم‌پوشانی را مشاهده کنید.

رونهاد موقعیت‌های عنصر فرزند را نشان می‌دهد.

برای آشنایی با نحوه اشکال‌زدایی چیدمان‌های flex، به بازرسی و اشکال‌زدایی CSS flexbox مراجعه کنید.

آگهی

DevTools می‌تواند برخی‌از قاب‌های آگهی را شناسایی و آن‌ها را برچسب‌گذاری کند. این قاب‌ها ad نشان در کنارشان دارند.

آگهی را در پیش‌نمایش زیر پیدا کنید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، عنصری را که نشان ad در کنار آن است پیدا کنید.

نشان ad قابل‌کلیک نیست اما اگر نشانگر را روی آن نگه دارید، نکته‌ابزاری خواهید دید که بافتی درباره دلیل شناسایی عنصر به‌عنوان آگهی ارائه می‌دهد، مثلاً:

• منشأ متن: کدام متن‌ها در ایجاد عنصر نقش داشته‌اند.
• قوانین فهرست فیلتر: قانون خاصی از فهرست فیلتر (برای مثال، EasyList) که با عنصر یا منبعی که بار کرده است مطابقت دارد.

همچنین می‌توانید از برگه پرداز برای برجسته کردن قاب‌های آگهی به رنگ قرمز استفاده کنید.

پیمایش

عنصر HTML یک محفظه پیمایش است اگر ویژگی CSS overflow آن روی scroll یا auto تنظیم شده باشد، زمانی که محتوای کافی برای ایجاد سرریز وجود دارد. این عناصر scroll نشان در کنارشان دارند.

میزان کردن پیمایش

محفظه‌های پیمایش می‌توانند ویژگی‌های CSS داشته باشند که نقاط چسبیدن را پیکربندی می‌کنند. این عناصر scroll-snap نشان در کنار خود دارند که رونهادهای مربوطه را روشن/خاموش می‌کنند.

رونهاد را در پیش‌نمایش زیر روشن/خاموش کنید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، روی نشان scroll-snap در کنار عنصر کلیک کنید.
3. عنصر را به‌سمت چپ پیمایش کنید و هم‌پوشانی را مشاهده کنید.

رونهاد موقعیت عناصر و نقاط چسبنده را نشان می‌دهد.

ظرف

عنصر HTML درصورتی محتوا است که دارایی CSS container-type را داشته باشد. این عناصر دارای نشان‌های container در کنار خود هستند که هم‌پوشانی‌های مربوطه را تغییر می‌دهند.

رونهاد را در پیش‌نمایش زیر روشن/خاموش کنید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، روی نشان container در کنار عنصر کلیک کنید.
3. با کشیدن گوشه پایین سمت راست عنصر، اندازه آن را تغییر دهید و تغییر چیدمان و هم‌پوشانی را مشاهده کنید.

رونهاد موقعیت‌های عنصر فرزند را نشان می‌دهد.

برای آشنایی با نحوه اشکال‌زدایی پُرسمان‌های محفظه، به بازرسی و اشکال‌زدایی پُرسمان‌های محفظه CSS مراجعه کنید.

جایگاه

عنصر <slot> HTML جای‌گذاری است که می‌توانید آن را با محتوای خودتان پر کنید. <slot> همراه با عنصر <template> به شما امکان می‌دهد درخت‌های DOM جداگانه ایجاد کنید و آن‌ها را باهم ارائه دهید. عناصر محتوای جایگاه دارای نشان‌های ink_selectionslot در کنار خود هستند که به‌عنوان پیوند به جایگاه‌های مربوطه عمل می‌کنند.

نشان ink_selectionslot را در پیش‌نمایش زیر ببینید:

1. عنصر را در پیش‌نمایش بازرسی کنید.
2. در درخت DOM، روی نشان ink_selectionslot در کنار عنصر کلیک کنید تا جایگاه مربوطه را پیدا کنید.
3. با کلیک کردن روی نشان ink_selectionreveal به محتوای جای آگهی برگردید.

لایه بالایی

این نشان به شما کمک می‌کند مفهوم لایه بالایی را درک کنید و آن را تجسم کنید. لایه بالایی محتوا را روی همه لایه‌های دیگر، صرف‌نظر از z-index، ارائه می‌کند. وقتی عنصر <dialog> را بااستفاده از روش .showModal() باز می‌کنید، مرورگر آن را در لایه بالا قرار می‌دهد.

برای کمک به شما در تجسم عناصر لایه بالایی، پانل عناصر یک محفظه #top-layer به درخت DOM پس‌از برچسب پایانی </html> اضافه می‌کند.

عناصر لایه بالایی نشان ink_selectiontop-layer (N) در کنارشان دارند که N شماره نمایه عنصر است. نشان‌ها پیوندهایی به عناصر مربوطه در محتوی #top-layer هستند.

نشان ink_selectiontop-layer (N) را در پیش‌نمایش زیر پیدا کنید:

1. در پیش‌نمایش، روی باز کردن کادر گفتگو کلیک کنید.
2. بازرسی کادر گفتگو.
3. در درخت DOM، روی نشان ink_selectiontop-layer (1) در کنار عنصر <dialog> کلیک کنید. پانل عناصر شما را به عنصر مربوطه در محفظه #top-layer بعداز برچسب پایانی </html> می‌برد.
4. با کلیک کردن روی نشان ink_selectionreveal در کنار عنصر یا ::backdrop آن، به عنصر <dialog> برگردید.

رسانه

نشان media به‌طور پیش‌فرض خاموش است. وقتی روشن باشد، در کنار عناصر <audio> و <video> ظاهر می‌شود. برای باز کردن پانل رسانه و اشکال‌زدایی رسانه‌تان، روی این نشان کلیک کنید.

برای اطلاعات بیشتر، عیب‌یابی پخش‌کننده‌های رسانه با پانل رسانه را ببینید.

سرریزکننده

پاپ‌اور هر عنصری با مشخصه popover است و برای طیف گسترده‌ای از الگوهای تعاملی، ازجمله نکته‌ابزارها، هشدارها، پیام‌های موقت، و غیره مفید است. این عناصر popover نشان در کنارشان دارند.

این نشان، نشان top-layer کنار آن را که به عناصر مربوطه در محتوی #top-layer پیوند می‌دهد روشن/خاموش می‌کند.

نشان popover را در پیش‌نمایش زیر ببینید:

1. در پیش‌نمایش، روی تغییر وضعیت بالاپر کلیک کنید.
2. بازرسی بالاپر که ظاهر می‌شود.

3. در درخت DOM، روی نشان popover در کنار عنصر <div popover> کلیک کنید. پانل عناصر نشان top-layer را به شما نشان می‌دهد.

   

4. مراحل بخش `لایه بالایی را دنبال کنید.

برای کسب اطلاعات بیشتر، به https://web.dev/learn/css/popover-and-dialog نیز مراجعه کنید.

Starting-style

@starting-style قانون سبک‌های اولیه را در عنصر قبل‌از رندر شدن آن در صفحه تعریف می‌کند. این برای عناصری که از display: none پویانمایی می‌شوند لازم است، زیرا آن‌ها به حالتی نیاز دارند که از آن پویانمایی شوند. این عناصر نشان starting-style در کنارشان دارند.

این نشان سبک‌های موجود در قانون @starting-style را روشن/خاموش می‌کند، بنابراین می‌توانید پویانمایی را درحال اجرا ببینید.

نشان starting-style را در پیش‌نمایش زیر کشف کنید:

1. در پیش‌نمایش، روی باز کردن بالاپوش کلیک کنید.
2. بالاپر ظاهرشده را بررسی کنید.

3. در درخت DOM، نشان starting-style کنار عنصر <div popover> را تغییر دهید.

   

4. پویانمایی را در عمل و سبک‌های اعمال‌شده را در برگه عناصر > سبک‌ها مشاهده کنید.

برای کسب اطلاعات بیشتر، پویانمایی بالاپوش‌ها را نیز ببینید.

عنصر سفارشی

عناصر سفارشی HTML که با نام‌های برچسب خط‌دار یا is="..." مشخصه‌های عناصر داخلی سفارشی‌سازی‌شده شناسایی می‌شوند، custom-element نشان در کنارشان در درخت DOM دارند.

روی نشان کلیک کنید تا به کد مربوطه در پانل منابع بروید.