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

- visibility ۸ mode_comment

همونطور که خاطرتون هست، در جلسه قبل در مورد 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 نمایش داده میشن. بصورت زیر:

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

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

موفق باشید

یا علی

comment دیدگاه کاربران
طراحی بنر

سلام عالی بود ممنونم ازتون مهندس عزیز

محمد اسفندیاری

خواهش میکنم دوست عزیز موفق باشید

Mamico Manam

با سلام
مثل همیشه فوق العاده بودید
درود به شما بخاطر مطالب دست اول و داغ
سایت پر محتوا و زیبایی دارید
به ما هم سر بزنید
رسانه آگهی90
با سپاسی بیکران

محمد اسفندیاری

موفق باشید دوست عزیز

پویان اکبری

با سلام خدمت شما و ممنون از مقاله خوبتون
میخواستم بدونم چطور میشه پوشه دایرکتوری مربوط به پروژه رو تو کامپیوتر پیدا کرد؟

محمد اسفندیاری

سلام
منظورتون رو نمیفهمم دوست عزیز….دایرکتوری پروژه رو خودتون به وجود آوردید! نمی دونید جای اون کجا هست؟

پویان اکبری

منظورم اینه که دایرکتوری تو هاسته تو کامپیوتر که نیست بتونم آپلودش کنم!!!
یه چیز دیگه حالا اگه من بخوام همین مسیرو تو هاست پیدا کنم و از اونجا تغییر بدم باید چکار کنم البته منظورم مسیر دقیقشه کجاست تو پوشه css باید برم؟

محمد اسفندیاری

نمیشه از این مورد برای پروژه های آنلاین استفاده کنید و فقط برای لوکال قابل استفاده است

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.