این پنل به سه بخش اصلی تقسیم میشود :
- بخش اصلی یا NodeView که محتوای صفحه را بصورت درختی و مرتب و رنگی نمایش میدهد.
- Panel Toolbar که در بالای پنل قرار دارد.
- Side Panels که شامل پنلهای Style , Computed , Layout , DOM میشود.
که به ترتیب برای نمایش و ویرایش استایلها ، مشاهده استایلهای محاسبه شده ، مشاهده Layout یا آرایش و نمایش اطلاعات DOM تگ انتخاب شده در NodeView است.
در این مقاله با دو بخش NodeView و Panel Toolbar ، و در مقالهی بعد با پنلهای سمت راست یعنی Side Panels آشنا میشویم.
ویرایش HTML
برای اضافه کردن یک Attribute جدید به تگ هم بروی تگ مورد نظر راست کلیک میکنید و سپس گزینهی New Attribute را انتخاب میکنید. ابتدا نام ویژگی ، یک Enter ، سپس مقدار را وارد میکنید. با زدن کلیدهای Enter متوالی ، میتوانید به وارد کردن ویژگیها ادامه دهید.
- Break On Mutate
این دکمه امکان توقف کد JavaScript ای که سعی در ویرایش محتوای صفحه را دارد ، میدهد.
زمانی که FireBug تشخیص دهد که کدی سعی در ویرایش محتوا دارد ، شما را به خط مورد نظر از کد ، در پنل Script منتقل میکند.
- Edit
این دکمه برای ویرایش مستقیم محتوای یک تگ بکار میرود
نکتهی جالب در ویرایش محتوا در فایرباگ این است که تغییرات در لحظه اعمال میشوند و نیاز به عمل بروزرسانیِ جداگانه نیست. برای مثال در همین قسمت Edit ، با هر ویرایش محتوا ، تغییرات در لحظه اعمال میشوند.
- Element Path
زمانی که یک تگ را در FireBug انتخاب میکنید ، لیستی از تگها که از تگ جاری شروع و به تگ ریشه ختم میشود ، نمایش داده میشود که با کلیک بروی هرکدام ، همان به عنوان تگ فعلی یا انتخاب شده تعیین میشود.
نتیجهی عملیاتی که بروی این تگهای انجام میدهید (حرکت موس و راست کلیک کردن) معادل همان عملیات بروی تگهای نمایش داده شده در قسمت اصلی (NodeView) است.
Options Menu
- Show Full Text
در صورت فعال بودن ، متون بصورت کامل نمایش داده میشوند ، در غیراینصورت بصورت خلاصه شده نمایش داده میشوند.
- Show White Space
در صورت فعال بودن ، فضاهای خالی ، کرکترهای خط جدید و ... را نمایش میدهد.
- Show Comments
در صورت فعال بودن ، کامنتها را هم نمایش میدهد
- سه گزینه ی Show Entities As Symbols ، Show Entities As Names و Show Entities As Unicode ، نوع نمایش کرکترهای ویژه را تعیین میکنند.
- Highlight Changes
در صورت فعال بودن ، تگ تغییر یافته توسط JavaScript (یا تگ والدی که قابل مشاهده باشد) Highlight میشود
- Expand Changes
در صورت فعال بودن ، زمان تغییر دادن یک تگ توسط JavaScript ، والدهای آن تگ باز (Expand) میشوند
- Scroll Changes Into View
در صورت فعال بودن این گزینه ، هنگام تغییر یک تگ در صفحه توسط JavaScript ، قسمت NodeView به قسمت تغییر بافته حرکت میکند.
(فعال بودن این گزینه هنگام بررسی سایت هایی که اسلایدر یا سیستم هایی مشابه دارند ، باعث میشه که نتوانید بروی قسمتهای سایت تمرکز کنید و مدام اسکرول به قسمت تغییرات منتقل میشود.)
- Shade Box Model
در صورت فعال بودن ، فضای margin , padding و content را به شکلی که در بالا گفته شد نمایش میدهد ، در غیر اینصورت فقط یک خط دور تگ نشان میدهد.
- Show Quick Info Box
در صورت فعال بودن ، یک پاپآپ به همراه اطلاعات مختصری از تگ در صفحه نمایش میدهد.
Context Menu
- Copy HTML
خود تگ و محتوایش را بصورت HTML در حافظه کپی میکند.
- Copy innerHTML
محتوای تگ را در حافظه کپی میکند.
- Copy XPath
آدرس XPath تگ را در حافظه کپی میکند.
- Copy CSS Path
CSS Selector تگ را در حافظه کپی میکند.
- Log Events
رویدادهای تگ را در پنل Console ثبت میکند. (کلیک موس ، فشردن کلید ، ...)
برای لغو لاگ کردن ، مجددا بروی تگ راست کلیک کرده و این گزینه را از حالت انتخاب خارج کنید.
- Scroll Into View
صفحه را به جایی که تگ قابل نمایش است منتقل میکند.
- New Attribute...
یک attribute جدید به تگ اضافه میکند.
برای لغو عملیات ، دکمهی Esc را بزنید.
- Edit Attribute "<attribute name>"...
اگر بروی یک attribute راست کلیک کرده باشید ، این گزینه و گزینهی بعدی را مشاهده خواهید کرد.
معادل کلیک بروی نام attribute است ، نام را به حالت ویرایش درمی آورد.
- Delete Attribute "<attribute name>"
attribute را حذف میکند.
- Edit HTML...
تگ را به حالت ویرایش میبرد.
معادل انتخاب تگ ، زدن کلید Edit است.
- Delete Element
تگ را حذف میکند.
راه دیگر حذف یک تگ ، انتخاب تگ و فشردن کلید Del از کیبورد است.
- Expand/Contract All
تگ و Childهایش را باز/بسته میکند. (بجز تگ های <script> , <style> , <link>)
میتوان با ترکیب کلیدShift + * هم این کار را انجام داد که در این حالت تگهای فوق هم شامل باز/بسته شدن میشوند.
- Break On Attribute Change
مانع اجرای کد JavaScript ای که attribute تگ را تغییر میدهد میشود و فایرباگ به خطی که باعث این عمل شده است در پنل Script منتقل میشود.
به عبارتی دیگر یک Break Point در خط JavaScript ای که باعث ویرایش attribute میشود قرار میدهد.
- Break On Child Addition or Removal
مشابه توضیح قبل ، Break Point را در خطی که باعث اضافه/حذف شدن تگِ Child شده است قرار میدهد.
- Break On Element Removal
مشابه توضیح قبل ، Break Point را در خطی که باعث حذف شدن تگ شده است قرار میدهد.
- Inspect in DOM Tab
تگ فعلی را در پنل DOM ، برای بررسی باز میکند.