فایل ها را در یک فضای کاری ویرایش و ذخیره کنید

Kayce Basques

Sofia Emelianova

این آموزش فرصتی را برای تمرین با راه اندازی یک فضای کاری ارائه می دهد تا بتوانید از آن در پروژه های خود استفاده کنید. Workspace به شما امکان می دهد تغییراتی را که در DevTools ایجاد می کنید در کد منبع ذخیره شده در رایانه خود ذخیره کنید.

بررسی اجمالی

Workspace به شما امکان می دهد تغییری را که در DevTools ایجاد می کنید در یک نسخه محلی از همان فایل در رایانه خود ذخیره کنید. برای مثال، فرض کنید:

• شما کد منبع سایت خود را روی دسکتاپ خود دارید.
• شما در حال اجرای یک وب سرور محلی از دایرکتوری کد منبع هستید، به طوری که سایت در localhost:8080 قابل دسترسی است.
• شما localhost:8080 در Google Chrome باز کرده اید و از DevTools برای تغییر CSS سایت استفاده می کنید.

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

محدودیت ها

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

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

ویژگی مرتبط: لغو محلی

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

مرحله 1: راه اندازی

این آموزش را تکمیل کنید تا تجربه عملی با یک فضای کاری داشته باشید.

دمو را تنظیم کنید

1. این مخزن نمایشی را در فهرستی از رایانه خود کلون کنید. به عنوان مثال، به ~/Desktop .

2. یک وب سرور محلی را در ~/Desktop/devtools-workspace-demo راه اندازی کنید. در زیر چند نمونه کد برای راه اندازی SimpleHTTPServer آمده است، اما می توانید از هر سروری که ترجیح می دهید استفاده کنید.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   برای بقیه این آموزش، این دایرکتوری با عنوان /devtools-workspace-demo نامیده می شود.

3. یک برگه در Google Chrome باز کنید و به نسخه میزبانی محلی سایت بروید. باید بتوانید از طریق URL مانند localhost:8000 به آن دسترسی داشته باشید. شماره پورت دقیق ممکن است متفاوت باشد.

   

DevTools را راه اندازی کنید

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

2. به Sources > Workspace بروید و یک فضای کاری در پوشه devtools-workspace-demo که کلون کردید راه اندازی کنید. شما می توانید این کار را به چند روش انجام دهید:

   • پوشه را به ویرایشگر در منابع بکشید و رها کنید.
   • روی پیوند انتخاب پوشه کلیک کنید و پوشه را انتخاب کنید.
   • کلیک پوشه را اضافه کنید و پوشه را انتخاب کنید.

3. در اعلان بالا، روی Allow کلیک کنید تا به DevTools اجازه خواندن و نوشتن در دایرکتوری داده شود.

   

در تب Workspace ، اکنون یک نقطه سبز رنگ در کنار index.html ، script.js و styles.css وجود دارد. این نقاط سبز به این معنی است که DevTools یک نقشه بین منابع شبکه صفحه و فایل‌ها در devtools-workspace-demo ایجاد کرده است.

مرحله 2: یک تغییر CSS را در دیسک ذخیره کنید

1. /devtools-workspace-demo/styles.css در یک ویرایشگر متن باز کنید. توجه کنید که چگونه ویژگی color عناصر h1 روی fuchsia تنظیم می شود.

   

2. ویرایشگر متن را ببندید.

3. در DevTools برگردید، روی تب Elements کلیک کنید.

4. مقدار ویژگی color عنصر <h1> را به رنگ دلخواه خود تغییر دهید. برای انجام این کار:

   1. روی عنصر <h1> در درخت DOM کلیک کنید.
   2. در قسمت Styles ، قانون CSS h1 { color: fuchsia } را پیدا کنید و رنگ را به دلخواه تغییر دهید. در این مثال رنگ سبز تنظیم شده است.

   

   نقطه سبز در کنار styles.css:1 در پنجره Styles به این معنی است که هر تغییری که ایجاد می کنید به /devtools-workspace-demo/styles.css نگاشت می شود.

5. /devtools-workspace-demo/styles.css دوباره در یک ویرایشگر متن باز کنید. اکنون ویژگی color روی رنگ دلخواه شما تنظیم شده است.

6. صفحه را دوباره بارگیری کنید. رنگ عنصر <h1> همچنان روی رنگ دلخواه شما تنظیم شده است. این کار به این دلیل کار می کند که وقتی تغییر را ایجاد کردید و DevTools تغییر را در دیسک ذخیره کرد. و سپس، هنگامی که صفحه را بارگذاری مجدد کردید، سرور محلی شما کپی تغییر یافته فایل را از دیسک ارائه می دهد.

مرحله 3: یک تغییر HTML را در دیسک ذخیره کنید

HTML را از پنل Elements تغییر دهید

1. تب Elements را باز کنید.

2. روی محتوای متن عنصر h1 که می‌گوید Workspaces Demo دوبار کلیک کنید و I ❤️ Cake را جایگزین کنید.

   

3. /devtools-workspace-demo/index.html در یک ویرایشگر متن باز کنید. تغییری که شما ایجاد کردید وجود ندارد.

4. صفحه را دوباره بارگیری کنید. صفحه به عنوان اصلی خود باز می گردد.

اختیاری: چرا کار نمی کند

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

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

HTML را از پنل Sources تغییر دهید

اگر می خواهید تغییری در HTML صفحه ذخیره کنید، آن را در پنل Sources انجام دهید.

1. به منابع > صفحه بروید.
2. روی (شاخص) کلیک کنید. HTML صفحه باز می شود.
3. <h1>Workspaces Demo</h1> با <h1>I ❤️ Cake</h1> جایگزین کنید.
4. برای ذخیره تغییرات ، Command + S (Mac) یا Control + S (Windows، Linux، ChromeOS) را فشار دهید.

5. صفحه را دوباره بارگیری کنید. عنصر <h1> همچنان متن جدید را نمایش می دهد.

   

6. /devtools-workspace-demo/index.html را باز کنید. عنصر <h1> حاوی متن جدید است.

مرحله 4: تغییر جاوا اسکریپت را در دیسک ذخیره کنید

پنل Sources همچنین مکانی برای ایجاد تغییرات در جاوا اسکریپت است. اما گاهی اوقات لازم است ضمن ایجاد تغییرات در سایت خود، به پنل های دیگری مانند پنل عناصر یا پنل کنسول دسترسی داشته باشید. راهی برای باز کردن پنل Sources در کنار سایر پنل ها وجود دارد.

1. تب Elements را باز کنید.
2. Command + Shift + P (Mac) یا Control + Shift + P (Windows، Linux، ChromeOS) را فشار دهید. منوی فرمان باز می شود.

3. QS تایپ کنید، سپس Show Quick Source را انتخاب کنید. در پایین پنجره DevTools شما اکنون یک تب Quick Source وجود دارد.

   

   این برگه محتویات index.html را نمایش می دهد که آخرین فایلی است که در پنل منابع ویرایش کرده اید. زبانه Quick Source ویرایشگر را از پنل Sources به شما می دهد تا بتوانید فایل ها را در حالی که پانل های دیگر باز دارید ویرایش کنید.

4. Command + P (Mac) یا Control + P (Windows، Linux، ChromeOS) را فشار دهید تا کادر گفتگوی Open File باز شود.

5. script را تایپ کنید، سپس devtools-workspace-demo/script.js را انتخاب کنید.

   

6. به پیوند Edit and save files in a workspace در نسخه آزمایشی توجه کنید. به طور منظم استایل می شود.

7. کد زیر را به پایین script.js در تب Quick Source اضافه کنید.

   document.querySelector('a').style = 'font-style:italic';
   

8. برای ذخیره تغییرات ، Command + S (Mac) یا Control + S (Windows، Linux، ChromeOS) را فشار دهید.

9. صفحه را دوباره بارگیری کنید. پیوند موجود در صفحه اکنون مورب است.

مراحل بعدی

می توانید چندین پوشه را در یک فضای کاری راه اندازی کنید. همه این پوشه ها در لیست هستند تنظیمات > فضای کاری .

در مرحله بعد، نحوه استفاده از DevTools برای تغییر CSS و اشکال زدایی جاوا اسکریپت را بیاموزید.