ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 22) : تبدیل Inspector به ویرایشگر قدرتمند

همونطور که خاطرتون هست، در جلسه قبل در مورد Code coverage اطلاعاتی رو در اختیارتون قرار دادیم و با مثالها و تصاویری که قرار دادیم، شما رو بصورت کامل با اون و ویژگی هاش آشنا کردیم. در این جلسه میخوایم نحوه اضافه کردن پروژه های مورد نظرمون به Workspace رو توضیح بدیم و با این ویژگی میتونیم Inspector یا DevTools رو به یک ویرایشگر قدرتمند تبدیل کنیم. فرض کنید که شما روی یک پروژه کار میکنید. همونطور که میدونین ما در ویرایشگر مثل Sublime text یا PhpStorm و ... کدهامون رو تغییر میدیم و ذخیره میکنیم و بعد از اون وارد مرورگر میشیم و بر روی آیکون Refresh کلیک میکنیم. حالت دیگه ای که به وجود میاد اینه که سایت شما یک مشکلی رو داره و با استفاده از امکانات Inspector اون رو اصلاح میکنید و حالا کدهای جدید رو کپی میکنید و درون ویرایشگر خودتون قرار میدین. با استفاده از روشی که امروز یاد میگیریم، دیگه نیازی به ویرایشگرهای دیگه نخواهید داشت و با استفاده از خود Inspector میتونین کدهاتون رو ویرایش کرده و همونجا هم ذخیره کنید و تغییرات رو در مرورگر ببینید.

همونطور که میدونین بصورت پیش فرض زمانی که با استفاده از Inspector تغییری رو در کدها به وجود میاریم، با رفرش کردن از بین می روند. مگر اینکه کدهای تغییر داده رو در ویرایشگر قرار بدیم و اون رو ذخیره کنیم. Workspace به شما این امکان رو میده که بدون خارج شدن از DevTools، کدهاتون رو ویرایش و ذخیره کنید. خب برای اینکه فایلهای مربوط به پروژه خودمون رو به Workspace اضافه کنیم، باید مراحل زیر رو طی کنیم. Inspector رو باز میکنیم و وارد تب Sources میشیم و در سایت بار سمت چپ کلیک راست میکنیم و بر روی گزینه Add Folder to Workspace کلیک میکنیم:

با اینکار یک پنجره باز میشه که با استفاده از اون میتونین دایرکتوری مربوط به پروژه خودتون رو انتخاب کنید و به Workspace اضافه کنیم. روش ساده تری که وجود داره اینه که پوشه پروژه مورد نظرمون رو درگ کرده و درون تب Sources بندازیم یا Drop کنیم. بصورت زیر:

با استفاده از هر کدام از روشهای بالا، مرورگر بصورت اتوماتیک از شما یک سوال میپرسه و ازتون میخواد که بهش اجازه بدین به پوشه مورد نظر دسترسی کامل داشته باشه و بتونه هر کاری رو با اون انجام بده. بصورت زیر:

با کلیک بر روی گزینه Allow مرورگر اجازه دسترسی کامل به پوشه مورد نظر رو خواهد داشت و پروژه به Workspace اضافه میشه:

همونطور که میبینید پروژه مورد نظر با فایلهایی که درونش قرار داره اضافه شده اند. اون پوشه بالایی که رنگشون آبی هست، فایلها و پوشه هایی هستند که index.html اونا رو درخواست کرده و مرورگر اونا رو درون صفحه مورد استفاده قرار داده است. برای اینکه بتونیم رابطه ای بین فایلهای پروژه اضافه شده به Workspace و فایلهای لود شده در صفحه در بیاریم، باید بر روی index.html کلیک راست کرده و گزینه Map to file system resource رو انتخاب کنید:

با اینکار یک منو باز میشه و ازتون میپرسه که میخواید index.html رو به کجا Map کنید. ما میخوایم اون رو به همون پوشه ای که به Workspace اضافه کردیم، Map کنیم.

میبینید که index.html درون پوشه src (همون پوشه ای که به Workspace اضافه کردیم) نمایش داده شده و با انتخاب اون کار مورد نظر انجام میشه. با اینکار دیگه پوشه های آبی مخفی میشن و فقط پوشه های مربوط به Workspace نمایش داده میشن. بصورت زیر:

به همین راحتی. حالا میتونین هر فایلی که بخواید رو باز کنید و تغییرات مورد نظرتون رو ایجاد کنید و اونا رو ذخیره کنید. با اینکار میتونین تغییرات رو همونجا در مرورگر ببینید و دیگه از بین نمی روند. برای مطالعه بیشتر در مورد این زمینه و کار کردن با قابلیتهای بیشتر، میتونین این لینک رو مطالعه بفرمایید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی