قبل از بررسی این پنل اجازه دهید نگاهی به تعریف DOM بیندازیم.
DOM چیست؟
مدل شیءگرای سند یا دام (DOM - Document Object Model) عنوان یکی از دو ساختوارۀ (architecture) اصلی است (در کنار اساِیاکس) که بر اساس آن سندهای اکسامال را به اشیایی که در بردارندهٔ آن است، تجزیه نموده، و آنها را بهصورت یک ساختار درختی دادهها در فضای حافظه اصلی پهن میکند. ساختوارۀ دام، نه به زبان برنامهنویسی خاصّی وابستگی دارد و نه به سکّوی برنامهنویسی ویژهای، بلکه، به منظور اجراء و پیادهسازی آن باید از یک زبان برنامهنویسی بلندتراز همچون جاوا، سیشارپ، جاوااسکریپت یا مشابه آنها سود بجوییم. آنسوی رابط کاربر سند با مدلی شیءگرا نمایانده میشود.
Options Menu
این منو با راست کلیک کردن بروی نام پنل یا کلیک کردن بروی مثلثی که روی پنل قرار دارد، نمایش داده میشود.
- Show User-defined Properties
در صورت فعال بودن، پراپرتی هایی که توسط کاربر به صفحه اضافه شده اند را نمایش میدهد. - Show User-defined Functions
در صورت فعال بودن، توابعی که توسط کاربر به صفحه اضافه شده اند را نمایش میدهد.
- Show DOM Properties
در صورت فعال بودن، پراپرتی هایی که بصورت پیشفرض در DOM وجود دارند را نمایش میدهد. - Show DOM Functions
در صورت فعال بودن، توابعی که بصورت پیشفرض در DOM وجود دارند را نمایش میدهد. - Show DOM Constants
در صورت فعال بودن، const هایی که بصورت پیشفرض در DOM وجود دارند را نمایش میدهد. - Show Inline Event Handlers
در صورت فعال بودن، رویدادهایی که بصورت خطی در تگها تعریف شده اند را نمایش میدهد. - Show Closures
در صورت فعال بودن، Closureها را نمایش میدهد. - Show Own Properties Only
در صورت فعال بودن، فقط پراپرتی هایی که بروی خود شئ تعریف شده اند را نمایش میدهد. - Show Enumerable Properties Only
در صورت فعال بودن، فقط پراپرتیهای شمارشی را نمایش میدهد. - Refresh
محتویات پنل را بروزرسانی میکند.
Property Path
این قسمت در بالاترین بخش پنل قرار دارد و وظیفهی آن نمایش مسیر شئ از خود شئ تا window است.
همچنین با راست کلیک کردن بروی این قسمت دو گزینه نمایش داده میشود. Refresh برای بروزسازی آدرس نمایش داده شده و Use in Command Line هم برای استفاده از شئ در خط فرمان است. پس از راست کلیک کردن بروی یک شئ و انتخاب گزینهی Use in Command Line فایرباگ تمرکز برنامه را به خط فرمان منتقل میکند و شئ را تحت متغییری به نام $p در خط فرمان کپی میکند.
رنگ ها
برای مشخص کردن نوع متغییرهای این پنل، فایرباگ برای هر نوع متغییر از یک رنگ استفاده میکند.
اشیاء ، اشیاء DOM ، توابع Getter ، توابع تعریفی کاربر ، توابع DOM ، توابع Constructor ، پراپرتیهای Read-only
Auto-Completion
مشابه پنلهای Console, CSS, HTML در این پنل هم امکان اعمال تغییرات همراه با قابلیت تکمیل خودکار وجود دارد.
localStorage
در HTML5 سیستمی برای ذخیره مقادیر در سمت کاربر، به نام localStorage معرفی شد. در این پنل میتوانید محتویات آن را بررسی/ویرایش کنید. برای کار با توابع آن هم میتوانید از پنل Console استفاده کنید. ( همچنین میتوانید از پنل Console بصورت Popup در این پنل و پنلهای دیگر هم استفاده کنید. به تصویر زیر توجه فرمایید. )
توجه کنید که برای مشاهدهی این شئ، باید گزینهی Show DOM Properties فعال باشد و همیچنین در Property Path، شئ window فعال باشد.
Breakpoint Column
شما میتوانید با کلیک بروی ستون سمت چپ پراپرتی ها، آن پراپرتی را تحت نظر گرفته و در صورت تغییر یافتن مقدار آن پراپرتی، کنترل روند اجرای برنامه از همان نقطه را بدست بگیرید. به این صورت که زمانی که کدی پراپرتی موردنظر را تغییر دهد، پنل Script روند اجرای کد را در همان قسمت متوقف میکند.
( ممکن است فایرباگ بصورت خودکار به پنل Script سوئیچ نکند و بعد از متوقف شدن برنامه هم اگر به پنل Script سوئیچ کنید نتیجه را نبینید. پس بهتر است قبل از تغییر یافتن پراپرتی مورد نظر و بعد از قرار دادن Breakpoint به پنل Script بروید. )
Context Menu
با راست کلیک کردن در قسمتهای مختلف پنل، منوهای متفاوتی را خواهید دید. همچنین با راست کلیک کردن بروی مقادیر پراپرتی ها، منوی متناسب با آن مقدار را خواهید دید. مثلا اگر بروی یک تگ HTML در این پنل راست کلیک کنید، منویی که خواهید دید همان منویی است که در پنل HTML مشاهده میکردید.
گزینه | Context | توضیحات |
Copy Name | Property List | نام پراپرتی را در حافظه کپی میکند. |
Copy Path | Property List | آدرس پراپرتی را در حافظه کپی میکند. |
Copy Value | String and Number values | محتوای پراپرتی را در حافظه کپی میکند. |
Edit Property... | Property List ( پراپرتی و توابع کاربر ) | پراپرتی را به حالت ویرایش میآورد. |
Delete Property | Property List ( پراپرتی و توابع کاربر ) | پراپرتی را حذف میکند. |
Break On Property Change | Property List ( پراپرتی و توابع کاربر ) | مشابه پاراگرف قبلی. |
Refresh | Property List, Property Path | محتویات پنل را بروزرسانی میکند. |
برای توابع هم دو منوی اضافی وجود دارد:
- Log Calls to "<function name>"
فراخوانیهای تابع مورد نظر را Log میکند. ( برای توضیحات بیشتر دستور monitor که از توابع خط فرمان است را ملاحظه بفرمایید. ) - Copy Function
نام و بندهی تابع را در حافظه کپی میکند.