تب Script در FireBug مخصوص دیباگ کردن کدهای JavaScript است. امکاناتی که در این قسمت گنجانده شده بسیار کاربردی بوده و همچنین در بیشتر قسمتها با ابزارهای خطایابی دیگر مشابه است. برای مثال اگر با Visual Studio کار کرده باشید، با نحوهی ایجاد Break Point ، قسمتهای Watch,Stack و ... آشنا خواهید بود.
این پنل هم مشابه پنلهای دیگر فایرباگ دارای یک بخش با عنوان Options Menu هست که با راست کلیک کردن بروی عناون یا کلیک بروی مثلث کنار عنوان پنل قابل دسترسی است. تنظیماتی که در اینجا قابل تعیین است عبارتند از:
Panel Toolbar
نواری است که ابزارهای پنل بروی آن قرار دارند و به ترتیب عبارنتد از:
Context Menu
تنها قابلیت جدیدی که در این منو وجود دارد، Run To This Line است. هنگامی که پنل در حالت دیباگ است، با راست کلیک کردن بروی خط مورد نظر و انتخاب گزینهی Run to This Line میتوانید خطوط میانی را رد کرده و به خط مورد نظر بروید. البته خطوطی که رد میشوند ، اجرا میشوند.
این کار معادل این است که درخط مورد نظر یک Break Point اضافه کنید و دکمهی F8 را بزنید.
Breakpoints
توسط Break Pointها میتوانید خطوطی از برنامه را برای خطایابی مشخص کنید. زمانی که دیباگر به نقطهی مورد نظر برسد متوقف شده و میتوانید به بررسی برنامه بپردازید. میتوانید با بردن موس بروی متغییرها مقدار آن هارا بررسی کنید یا با کمک قسمتهای Watch و Stack در پنل جانبی اطلاعات بیشتری در مورد اجرای برنامه در نقطهی جاری بدست آورید.(در مورد پنلهای جانبی در قسمت بعدی توضیح خواهم داد.) همچنین با کمک دکمه هایی که در جدول فوق توضیح داده شده اند روند اجرای برنامه را خط به خط ادامه دهید.
برای ایجاد یک Break Point، بروی شمارهی خط مورد نظر کلیک کنید. نقطه ای قرمز رنگ نمایش داده خواهد شد. البته دقت کنید که همهی خطوط برنامه اجرا نمیشوند و نمیتوانید در آن خطوط از این امکان بهره ببرید. شمارهی خطوط فعال با رنگ سبز مشخص شده اند.
امکان مفید دیگری که همراه با این قابلیت ارائه شده است (که در محیطهای دیگر هم وجود دارد)، عبارت شرطی است. به این صورت که ضمن قرار دادن Break Point در یک نقطه از برنامه، میتوانید یک شرط هم برای توقف برنامه تعیین کنید.
فرض کنید یک حلقه دارید که 300 بار تکرار میشود و مثلا در اجرای 250ام آن مشکلی وجود دارد. در این حالت میتوانید از این قابلیت استفاده کنید و شرط توقف را i == 250 قرار بدهید.
برای تعیین یک شرط برای یک Break Point، بروی خط مورد نظر راست کلیک کنید و شرط را در قسمت مشخص شده وارد کنید.
امکان مفید دیگری که وجود دارد، Break Point خودکار است. اگر از مقالات قبلی دکمهی Break On All Errors در پنل Console و Break On Mutate در پنل HTML را بخاطر داشته باشید میدانید که در هر یک هنگام اجرای یک رخداد مورد نظر، دیباگر در خطی که موجب آن رخداد شده است متوقف شده و میتوانید کنترل برنامه را بدست بگیرید. در این حالت نیازی به ایجاد Break Point نیست و FireBug بصورت خودکار این کار را انجام میدهد.
Search
این بخش در همه پنلها وجود دارد با این تفاوت که در پنل Script و CSS دو گزینهی Multiple Files و Use Regular Expression وجود دارد که به ترتیب امکان جستجو در فایلهای js و css اضافه شده به صفحه هستند. قابلیت دیگری هم که فقط در پنل Script وجود دارد، پرش به یک خط در برنامه است به این صورت که با وارد کردن # و یک عدد به عنوان شمارهی خط، همان خط نمایش داده میشود.
در قسمت بعدی پنل جانبی که شامل سه بخش Watch، Stack و Breakpoints است را بررسی خواهیم کرد.
این پنل هم مشابه پنلهای دیگر فایرباگ دارای یک بخش با عنوان Options Menu هست که با راست کلیک کردن بروی عناون یا کلیک بروی مثلث کنار عنوان پنل قابل دسترسی است. تنظیماتی که در اینجا قابل تعیین است عبارتند از:
- Enabled/Disabled : برای فعال/غیرفعال کردن پنل است. فعال بودن این قسمت ممکن است موجب کاهش سرعت بارگزاری صفحات شود.
- Track Throw/Catch : در صورت فعال بودن این گزینه، در صورت رویدادن خطا در بلاک try/catch ، دیباگر در آن نقطه از برنامه متوقف شده و کنترل برنامه به شما داده میشود. (البته بنده موفق بررسی کامل این قابلیت نشدم. ظاهرا ورژنهای آخری باگ دارند. مثل غیرفعال شدن کامل همین پنل، "Debugger not activated"! اگر کسی موفقیتی در کار با این مورد داشت، سپاسگذار میشوم اطلاع بدهد.)
- Show Break Notifications : در صورت فعال بودن این گزینه، هنگام توقف کدی در صفحه، اطلاعاتی در مورد علت توقف آن در بالای پنل ارائه خواهد شد.
Panel Toolbar
نواری است که ابزارهای پنل بروی آن قرار دارند و به ترتیب عبارنتد از:
- Break On Next : این دکمه که مشابه آن در اکثر پنلها وجود دارد، هنگام اجرای یک دستور JavaScript آن را متوقف کرده و شما میتوانید به بررسی آن بپردازید.
- Script Type Menu : با انتخاب یکی از چهار گزینه موجود میتوانید نتیجه اسکریپتهای اضافه شده به صفحه که در قسمت Script Location Menu نمایش داده شده اند را فیلتر کنید. (متاسفانه این گزینه هم مشابه گزینه Track Throw/Catch برای بنده، ورژن 1.11.4 نتیجه ای نداشته است.)
- Script Location Menu : در این قسمت اسکریپت هایی که در صفحه وجود دارند نمایش داده میشوند. مشابه پنل HTML میتوانید هنگام بازبودن این لیست، با تایپ کردن نتایج را فیلتر کنید.
همچنین با راست کلیک کردن بروی این قسمت میتوانید آیتم یا فایل انتخاب شده را در ادیتور مورد نظر باز کنید، در پنل DOM بررسی کنید، فایل را در یک تب جدید باز کنید، آدرس فایل را در حافظه موقت کپی کنید. - Execution Control Buttons : این دکمهها زمانی که دیباگر به یک Break Point برسد یا به دلیل فعال بودن دکمههای Break On ... متوقف شود، فعال میشوند و با کمک آنها میتوانید عملیات خطایابی را ادامه دهید.
در جدول زیر این دکمهها و توضیحات تکمیلی هریک را مشاهده میکنید:نوع دکمه Shortcut توضیحات اجرای مجدد Shift + F18 Stack فعلی را مجدد اجرا میکند.
(Stack: لیستی از توابع به ترتیبی که با فراخوانی آنها تابع جاری فراخونی شده است. در مقاله بعدی توضیحات بیشتری ارائه خواهد شد.)ادامه F8 اجرای برنامه را (تا Break Point بعدی) ادامه میدهد. وارد شدن F11 در صورت رسیدن به یک تابع، با زدن این دکمه دیباگر وارد بندهی آن تابع میشود. رد شدن F10 اجرای برنامه را در سطح (Scope) فعلی ادامه میدهد.
مشابه قبلی وارد تابع نمیشود.خارج شدن Shift + F11 کنترل به تابعی که تابع جاری را فراخوانی کرده است بازمیگردد.
روشی سودمند زمانی که هنگام خطایابی وارد کدهای jQuery یا مثل آن میشوید :)
Context Menu
تنها قابلیت جدیدی که در این منو وجود دارد، Run To This Line است. هنگامی که پنل در حالت دیباگ است، با راست کلیک کردن بروی خط مورد نظر و انتخاب گزینهی Run to This Line میتوانید خطوط میانی را رد کرده و به خط مورد نظر بروید. البته خطوطی که رد میشوند ، اجرا میشوند.
این کار معادل این است که درخط مورد نظر یک Break Point اضافه کنید و دکمهی F8 را بزنید.
Breakpoints
توسط Break Pointها میتوانید خطوطی از برنامه را برای خطایابی مشخص کنید. زمانی که دیباگر به نقطهی مورد نظر برسد متوقف شده و میتوانید به بررسی برنامه بپردازید. میتوانید با بردن موس بروی متغییرها مقدار آن هارا بررسی کنید یا با کمک قسمتهای Watch و Stack در پنل جانبی اطلاعات بیشتری در مورد اجرای برنامه در نقطهی جاری بدست آورید.(در مورد پنلهای جانبی در قسمت بعدی توضیح خواهم داد.) همچنین با کمک دکمه هایی که در جدول فوق توضیح داده شده اند روند اجرای برنامه را خط به خط ادامه دهید.
برای ایجاد یک Break Point، بروی شمارهی خط مورد نظر کلیک کنید. نقطه ای قرمز رنگ نمایش داده خواهد شد. البته دقت کنید که همهی خطوط برنامه اجرا نمیشوند و نمیتوانید در آن خطوط از این امکان بهره ببرید. شمارهی خطوط فعال با رنگ سبز مشخص شده اند.
امکان مفید دیگری که همراه با این قابلیت ارائه شده است (که در محیطهای دیگر هم وجود دارد)، عبارت شرطی است. به این صورت که ضمن قرار دادن Break Point در یک نقطه از برنامه، میتوانید یک شرط هم برای توقف برنامه تعیین کنید.
فرض کنید یک حلقه دارید که 300 بار تکرار میشود و مثلا در اجرای 250ام آن مشکلی وجود دارد. در این حالت میتوانید از این قابلیت استفاده کنید و شرط توقف را i == 250 قرار بدهید.
برای تعیین یک شرط برای یک Break Point، بروی خط مورد نظر راست کلیک کنید و شرط را در قسمت مشخص شده وارد کنید.
امکان مفید دیگری که وجود دارد، Break Point خودکار است. اگر از مقالات قبلی دکمهی Break On All Errors در پنل Console و Break On Mutate در پنل HTML را بخاطر داشته باشید میدانید که در هر یک هنگام اجرای یک رخداد مورد نظر، دیباگر در خطی که موجب آن رخداد شده است متوقف شده و میتوانید کنترل برنامه را بدست بگیرید. در این حالت نیازی به ایجاد Break Point نیست و FireBug بصورت خودکار این کار را انجام میدهد.
Search
این بخش در همه پنلها وجود دارد با این تفاوت که در پنل Script و CSS دو گزینهی Multiple Files و Use Regular Expression وجود دارد که به ترتیب امکان جستجو در فایلهای js و css اضافه شده به صفحه هستند. قابلیت دیگری هم که فقط در پنل Script وجود دارد، پرش به یک خط در برنامه است به این صورت که با وارد کردن # و یک عدد به عنوان شمارهی خط، همان خط نمایش داده میشود.
در قسمت بعدی پنل جانبی که شامل سه بخش Watch، Stack و Breakpoints است را بررسی خواهیم کرد.