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