فضاهای کاری را راه‌اندازی کنید تا تغییرات در فایل‌های منبع ذخیره شود

Kayce Basques

Sofia Emelianova

با راه‌اندازی فضای کاری، تغییراتی را که در DevTools ایجاد می‌کنید در فایل‌های منبع در رایانه‌تان ذخیره کنید. می‌توانید با ارائه یک فایل پیکربندی، به‌طور خودکار یک پوشه فضای کاری را به DevTools متصل کنید، یا می‌توانید به‌صورت دستی یک مکان فضای کاری را در پانل منابع اضافه کنید.

نمای کلی

اتصال خودکار (یا دستی) به پوشه فضای کاری به شما امکان می‌دهد تغییری را که در DevTools ایجاد می‌کنید در نسخه محلی همان فایل در رایانه‌تان ذخیره کنید. برای مثال، فرض کنید:

• کد منبع سایتتان را در رایانه دارید.
• سرور وب محلی را از فهرست راهنمای کد منبع اجرا می‌کنید، به‌طوری‌که سایت در localhost:PORT قابل‌دسترسی است و همچنین فایل JSON ساده‌ای را با فراداده (که بعداً شرح داده می‌شود) ارائه می‌دهد.
• localhost:PORT را در Google Chrome باز کرده‌اید و از DevTools برای تغییر CSS سایت استفاده می‌کنید.

وقتی پوشه فضای کاری متصل باشد، تغییراتی که در پانل منابع در فایل‌های CSS،‏ HTML، و JavaScript ایجاد می‌کنید در کد منبع رایانه‌تان ذخیره می‌شود. بااین‌حال، DevTools تغییراتی را که در پانل عناصر در DOM ایجاد می‌کنید ذخیره نمی‌کند.

علاوه‌براین، DevTools معمولاً می‌تواند با کمک نقشه‌های منبع، کد بهینه‌شده را به کد منبع اصلی شما نگاشت کند.

تولید فراداده برای اتصال

برای اینکه DevTools بتواند پوشه فضای کاری‌تان را به‌طور خودکار پیدا کند، یک UUID تصادفی نسخه ۴ ایجاد کنید و آن را در فایل JSON زیر قرار دهید:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

سپس فایل JSON را در path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json قرار دهید.

درنهایت، سرور HTTP محلی‌تان را اجرا کنید و مطمئن شوید که فایل JSON را نیز ارائه می‌دهد.

یا می‌توانید از این مرحله رد شوید و اتصال پوشه را به‌صورت دستی راه‌اندازی کنید.

متصل کردن پوشه فضای کاری

توجه: این مرحله و مراحل بعدی از نمونه نمایشی پوشه‌های خودکار Workspace برای نمایش ویژگی استفاده می‌کنند.

برای متصل کردن پوشه:

1. در Chrome، به صفحه میزبانی‌شده محلی خود (در این مثال، در localhost:8000) بروید و DevTools را باز کنید.

2. در منابع > فضای کاری، روی متصل کردن در کنار پوشه خود کلیک کنید.

   

3. وقتی از شما خواسته شد، روی ویرایش فایل‌ها کلیک کنید تا به DevTools اجازه دهید به پوشه‌تان دسترسی داشته باشد.

   

4. پس‌از متصل شدن، می‌توانید پوشه را در برگه فضاهای کاری باز کنید.

   

برگه Workspace نقطه سبزی را در کنار فایل‌های HTML،‏ CSS، و JavaScript نشان می‌دهد. این نقطه‌های سبز به این معنی است که DevTools بین منابع شبکه صفحه و فایل‌های موجود در پوشه نگاشت برقرار کرده است.

ذخیره کردن تغییرات در پوشه منبع

می‌توانید تغییرات را در هر فایل CSS،‏ HTML، و جاوا اسکریپت در پوشه فضای کاری متصل‌شده ذخیره کنید.

ذخیره کردن تغییرات در «سرویس مقایسه قیمت»

نکته: با پوشه فضای کاری متصل، پانل کمک هوش مصنوعی می‌تواند تغییرات CSS را به‌طور خودکار در منابع شما ذخیره کند.

برای ذخیره کردن تغییرات در «سرویس مقایسه قیمت»:

1. فایل CSS را از پوشه فضای کاری متصل‌شده در منابع > فضاهای کاری باز کنید.

2. تغییری در «سرویس مقایسه قیمت» خود ایجاد کنید.

   توجه: تغییرات در صفحه فعال اعمال می‌شود اما هنوز در منبع اعمال نشده است.

3. تغییر را ذخیره کنید، برای مثال، با فشار دادن Ctrl / Cmd + S و تغییر اعمال‌شده را در فایل منبع خود ببینید. پانل منابع نقطه سبزی را در کنار نام فایل به شما نشان می‌دهد.

   توجه: برای اعمال و ذخیره کردن تغییرات CSS، نیازی به بار کردن مجدد صفحه نیست.

برای آشنایی با گردش کار، ویدیو را تماشا کنید:

ذخیره تغییرات در HTML

برای ذخیره کردن تغییرات در HTML:

1. فایل HTML را از پوشه فضای کاری متصل‌شده در منابع > فضاهای کاری باز کنید.

2. تغییری در HTML خود ایجاد کنید.

   توجه: تغییرات هنوز در صفحه فعال یا منبع اعمال نشده است.

3. تغییر را ذخیره کنید، برای مثال، با فشار دادن Ctrl / Cmd + S و تغییر اعمال‌شده را در فایل منبع خود ببینید. پانل منابع نقطه سبزی را در کنار نام فایل به شما نشان می‌دهد.

4. صفحه را مجدداً بار کنید تا تغییرات اعمال شود.

برای آشنایی با گردش کار، ویدیو را تماشا کنید:

توجه: می‌توانید تغییر HTML را از پانل منابع اعمال و ذخیره کنید، اما نمی‌توانید این کار را از پانل عناصر انجام دهید.

چرا نمی‌توانید HTML را از پانل عناصر تغییر دهید؟

• درخت گره‌هایی که در پانل عناصر می‌بینید، DOM صفحه را نشان می‌دهد.
• برای نمایش صفحه، مرورگر HTML را ازطریق شبکه واکشی می‌کند، HTML را تجزیه می‌کند، و سپس آن را به درختی از گره‌های DOM تبدیل می‌کند.
• اگر صفحه جاوا اسکریپت داشته باشد، آن جاوا اسکریپت ممکن است گره‌های DOM را اضافه، حذف، یا تغییر دهد. CSS می‌تواند با ویژگی content، DOM را نیز تغییر دهد.
• مرورگر درنهایت از DOM برای تعیین محتوایی که باید به کاربران مرورگر ارائه دهد استفاده می‌کند.
• بنابراین، وضعیت نهایی صفحه‌ای که کاربران می‌بینند ممکن است با HTML واکشی‌شده توسط مرورگر بسیار متفاوت باشد.
• این امر باعث می‌شود DevTools به‌سختی بتواند تشخیص دهد که تغییرات ایجادشده در پانل عناصر کجا باید ذخیره شود، زیرا DOM تحت‌تأثیر HTML،‏ JavaScript، و CSS قرار دارد.

به‌طور خلاصه، درخت DOM !== HTML.

ذخیره کردن تغییرات در جاوا اسکریپت

برای ذخیره کردن تغییرات در جاوا اسکریپت:

1. فایل جاوا اسکریپت را از پوشه فضای کاری متصل‌شده در منابع > فضاهای کاری باز کنید.

2. تغییری در جاوا اسکریپت خود ایجاد کنید.

   توجه: تغییرات هنوز در صفحه فعال یا منبع اعمال نشده است.

3. تغییر را ذخیره کنید، برای مثال، با فشار دادن Ctrl / Cmd + S و تغییر اعمال‌شده را در فایل منبع خود ببینید. پانل منابع نقطه سبزی را در کنار نام فایل به شما نشان می‌دهد.

4. اگر سرور HTTP محلی شما به تغییرات فایل منبع زنده گوش می‌دهد و صفحه را به‌طور خودکار بازبار می‌کند، پس‌از ذخیره کردن تغییرات در DevTools، اعمال شدن آن‌ها را خواهید دید. درغیراین‌صورت، سرور محلی‌تان را دوباره مستقر کنید.

برای آشنایی با گردش کار، ویدیو را تماشا کنید:

نکته: هنگام تغییر جاوا اسکریپت، گاهی اوقات لازم است به پانل‌های دیگر، مانند پانل عناصر یا کنسول دسترسی داشته باشید. برای این کار، می‌توانید از کشو و پانل‌های تغییر ترتیب استفاده کنید.

برداشتن اتصال پوشه فضای کاری

برای برداشتن اتصال پوشه فضای کاری، در منابع > فضای کاری، روی پوشه کلیک راست کنید، برداشتن از فضای کاری را از منوِ کرکره‌ای انتخاب کنید، و روی برداشتن کلیک کنید.

توجه: تغییر یا حذف شناسه UUID پوشه در فایل JSON فراداده نیز اتصال پوشه را قطع می‌کند.

متصل کردن دستی پوشه فضای کاری

1. DevTools را در صفحه میزبانی‌شده محلی‌تان باز کنید.

2. در منابع > فضای کاری، روی افزودن دستی پوشه کلیک کنید. سپس پوشه‌ای را که فایل‌های منبعتان در آن قرار دارد انتخاب کنید.

   

   توجه: همچنین می‌توانید پوشه را به پانل منابع بکشید.

3. سپس مراحل ۳ و ۴ را در متصل کردن پوشه فضای کاری دنبال کنید.

محدودیت‌ها

اگر از چارچوب مدرنی استفاده می‌کنید، احتمالاً کد منبع شما را از قالبی که نگهداری آن برای شما آسان است به قالبی تبدیل می‌کند که برای اجرا در سریع‌ترین زمان ممکن بهینه‌سازی شده است. اتصال پوشه فضای کاری معمولاً می‌تواند با کمک نقشه‌های منبع، کد بهینه‌شده را به کد منبع اصلی شما نگاشت کند.

انجمن DevTools برای پشتیبانی از قابلیت‌های ارائه‌شده توسط نقشه‌های منبع در انواع چارچوب‌ها و ابزارها تلاش می‌کند. اگر هنگام استفاده از فضای کاری با چارچوب انتخابی‌تان با مشکلی مواجه شدید یا پس‌از پیکربندی سفارشی توانستید آن را راه‌اندازی کنید، رشته‌ای در فهرست پستی شروع کنید یا سؤالی در Stack Overflow بپرسید تا دانش خود را با بقیه انجمن DevTools هم‌رسانی کنید.

مراحل بعدی

همه پوشه‌هایی که قبلاً راه‌اندازی شده‌اند را می‌توانید در تنظیمات > فضای کاری مدیریت کنید.

سپس، با نحوه استفاده از DevTools برای تغییر CSS و اشکال‌زدایی JavaScript آشنا شوید.

همچنین مراجعه کنید به

لغوهای محلی یکی دیگر از ویژگی‌های تاحدودی مشابه DevTools است که به شما امکان می‌دهد محتوای وب یا سرایندهای درخواست را شبیه‌سازی کنید. به‌این‌ترتیب، می‌توانید آزادانه تغییرات صفحه را آزمایش کنید بدون اینکه منتظر بمانید تا پس‌زمینه به‌روز شود. با لغو محلی، تغییرات در بارگیری‌های صفحه باقی می‌مانند اما به کد منبع صفحه شما نگاشت نمی‌شوند.