از پنل Elements برای بررسی و ویرایش عناصر DOM استفاده کنید.
نمای کلی
پنل Elements یک رابط کاربری قوی برای بررسی و دستکاری DOM ارائه میدهد. میتوانید از درخت DOM که شبیه یک سند HTML است، برای انتخاب گرههای خاص DOM و تغییر آنها با ابزارهای دیگر استفاده کنید.
پنل عناصر همچنین دارای زبانههای زیر است که شامل ابزارهای مرتبط هستند:
سبکها :
- مشاهده و اشکالزدایی قوانین CSS اعمال شده بر روی یک عنصر از تمام شیوهنامهها.
- هرگونه CSS نامعتبر، بازنویسیشده، غیرفعال یا موارد دیگری که طبق انتظار کار نمیکنند را پیدا کنید.
- عناصر را با اضافه کردن یک تعریف ، اعمال یک کلاس و با تعامل با مدل Box ویرایش کنید.
- با استفاده از نشانهای موجود در درخت DOM، به گزینههای ویرایش کانتینر دسترسی پیدا کنید.
محاسبهشده : ویژگیهای حلشدهای که هنگام رندر شدن توسط کروم روی یک عنصر اعمال میشوند را فهرست میکند .
طرحبندی : شامل گزینههایی برای تغییر پوششهای شبکهای و فلکسباکس است.
شنوندگان رویداد : فهرستی از تمام شنوندگان رویداد و ویژگیهای آنها را ارائه میدهد. به شما امکان میدهد منبع شنوندگان رویداد را پیدا کنید و شنوندگان غیرفعال یا مسدودکننده را فیلتر کنید .
نقاط شکست DOM : نقاط شکست تغییر DOM اضافه شده از پنل Elements را فهرست میکند و به شما امکان میدهد آنها را فعال، غیرفعال، حذف یا آشکار کنید.
ویژگیها : یک گره DOM را برای بررسی و مرتبسازی ویژگیهای خود شیء و ویژگیهای ارثبریشده انتخاب کنید.
دسترسیپذیری : عناصری را که دارای برچسبهای ARIA و ویژگیهای آنها هستند، فهرست میکند. به شما امکان میدهد یک درخت دسترسیپذیری را تغییر دهید و بررسی کنید (آزمایشی).
پنل عناصر را باز کنید
به طور پیشفرض، وقتی DevTools را باز میکنید، پنل Elements باز میشود. همچنین میتوانید یک گره را در هر کجای صفحه بررسی کنید تا پنل Elements به طور خودکار باز شود.
برای باز کردن دستی پنل عناصر :
- ابزار توسعه (DevTools) را باز کنید .
- منوی Command را با فشار دادن موارد زیر باز کنید:
- macOS: فرمان + شیفت + P
- ویندوز، لینوکس، کروم او اس: کنترل + شیفت + پی
- شروع به تایپ کردن
Elementsکنید، Show Elements را انتخاب کنید و Enter را فشار دهید. DevTools پنل Elements را در کشوی پایین پنجره DevTools شما نمایش میدهد.