הגדרת סביבות עבודה לשמירת שינויים בקובצי המקור

Kayce Basques

Sofia Emelianova

כדי לשמור את השינויים שביצעתם בכלי הפיתוח בחזרה בקובצי המקור במחשב, אתם צריכים להגדיר סביבת עבודה. אתם יכולים לחבר באופן אוטומטי תיקיית סביבת עבודה לכלי הפיתוח על ידי הצגת קובץ תצורה, או להוסיף באופן ידני מיקום של סביבת עבודה בחלונית מקורות.

סקירה כללית

חיבור אוטומטי (או ידני) לתיקייה של סביבת עבודה מאפשר לכם לשמור שינוי שאתם מבצעים בכלי הפיתוח בעותק מקומי של אותו קובץ במחשב. לדוגמה, נניח ש:

• קוד המקור של האתר נמצא במחשב שלכם.
• אתם מפעילים שרת אינטרנט מקומי מספריית קוד המקור, כך שהאתר נגיש בכתובת localhost:PORT, וגם מציג קובץ JSON פשוט עם מטא-נתונים (הסבר בהמשך).
• פתחתם את localhost:PORT ב-Google Chrome, ואתם משתמשים בכלי הפיתוח כדי לשנות את ה-CSS של האתר.

כשתיקיית סביבת העבודה מחוברת, השינויים שאתם מבצעים בחלונית מקורות בקובצי CSS,‏ HTML ו-JavaScript נשמרים בקוד המקור במחשב. עם זאת, כלי הפיתוח לא שומרים שינויים ב-DOM שאתם מבצעים בחלונית רכיבים.

בנוסף, בדרך כלל כלי הפיתוח יכולים למפות את הקוד שעבר אופטימיזציה בחזרה לקוד המקור המקורי בעזרת מפות מקור.

יצירת מטא-נתונים לחיבור

כדי לאפשר ל-DevTools לגלות את תיקיית סביבת העבודה באופן אוטומטי, צריך ליצור UUID אקראי בגרסה 4 ולהכניס אותו לקובץ ה-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 מוגש.

אפשר גם לדלג על השלב הזה ולהגדיר חיבור לתיקייה באופן ידני.

חיבור תיקייה של סביבת עבודה

כדי לקשר תיקייה:

1. ב-Chrome, עוברים לדף שמתארח באופן מקומי (בדוגמה הזו, בכתובת localhost:8000) ופותחים את כלי הפיתוח.

2. בקטע מקורות > Workspace, לוחצים על קישור לצד התיקייה.

   

3. כשמוצגת בקשה, לוחצים על עריכת קבצים כדי לאפשר לכלי הפיתוח לגשת לתיקייה.

   

4. אחרי החיבור, אפשר לפתוח את התיקייה בכרטיסייה סביבות עבודה.

   

בכרטיסייה Workspace (סביבת עבודה) מופיעה נקודה ירוקה ליד קובצי HTML,‏ CSS ו-JavaScript. הנקודות הירוקות האלה מציינות שכלי הפיתוח יצרו מיפוי בין משאבי הרשת של הדף לבין הקבצים בתיקייה.

שמירת שינוי בתיקיית המקור

אתם יכולים לשמור שינויים בכל קובץ CSS,‏ HTML ו-JavaScript בתיקיית סביבת העבודה המקושרת.

שמירת השינויים ב-CSS

כדי לשמור את השינויים ב-CSS:

1. פותחים קובץ CSS מתיקיית סביבת העבודה המקושרת במקורות > סביבות עבודה.

2. משנים את ה-CSS.

3. שומרים את השינוי, למשל, על ידי לחיצה על Ctrl / Cmd + S, ורואים את השינוי שהוחל בקובץ המקור. בחלונית Sources (מקורות) מופיעה נקודה ירוקה לצד שם הקובץ.

כדי ללמוד על תהליך העבודה, צפו בסרטון:

שמירת השינויים ב-HTML

כדי לשמור את השינויים ב-HTML:

1. פותחים קובץ HTML מתיקיית סביבת העבודה המקושרת במקורות > סביבות עבודה.

2. משנים את ה-HTML.

3. שומרים את השינוי, למשל, על ידי לחיצה על Ctrl / Cmd + S, ורואים את השינוי שהוחל בקובץ המקור. בחלונית Sources (מקורות) מופיעה נקודה ירוקה לצד שם הקובץ.

4. כדי לראות את השינוי, צריך לטעון מחדש את הדף.

כדי ללמוד על תהליך העבודה, צפו בסרטון:

שמירת השינויים ב-JavaScript

כדי לשמור את השינויים ב-JavaScript:

1. פותחים קובץ JavaScript מתיקיית סביבת העבודה המקושרת במקורות > סביבות עבודה.

2. משנים את ה-JavaScript.

3. שומרים את השינוי, למשל, על ידי לחיצה על Ctrl / Cmd + S, ורואים את השינוי שהוחל בקובץ המקור. בחלונית Sources (מקורות) מופיעה נקודה ירוקה לצד שם הקובץ.

4. אם שרת ה-HTTP המקומי שלכם מאזין לשינויים בקובץ המקור בזמן אמת וטוען מחדש את הדף באופן אוטומטי, השינויים יחולו ברגע שתשמרו אותם בכלי הפיתוח. אחרת, צריך לפרוס מחדש את השרת המקומי.

כדי ללמוד על תהליך העבודה, צפו בסרטון:

הסרת קישור לתיקייה של סביבת עבודה

כדי להסיר קישור לתיקייה בסביבת העבודה, בקטע מקורות > סביבת עבודה, לוחצים לחיצה ימנית על התיקייה, בוחרים באפשרות הסרה מסביבת העבודה בתפריט הנפתח ולוחצים על הסרה.

חיבור ידני של תיקיית סביבת עבודה

1. פותחים את כלי הפיתוח בדף שמתארח באופן מקומי.

2. בקטע מקורות > Workspace, לוחצים על הוספת תיקייה באופן ידני. בוחרים תיקייה עם קובצי המקור.

   

3. לאחר מכן, מבצעים את שלבים 3 ו-4 בקטע קישור תיקייה של Workspace.

מגבלות

אם אתם משתמשים ב-framework מודרני, סביר להניח שהוא ממיר את קוד המקור שלכם מפורמט שקל לתחזק לפורמט שעבר אופטימיזציה כדי לפעול כמה שיותר מהר. בדרך כלל, חיבור של תיקיית סביבת עבודה יכול למפות את הקוד שעבר אופטימיזציה בחזרה לקוד המקור המקורי בעזרת מפות מקור.

קהילת כלי הפיתוח פועלת כדי לתמוך ביכולות שמספקות מפות מקור במגוון מסגרות וכלים. אם נתקלתם בבעיות בזמן השימוש בסביבת עבודה עם ה-framework שבחרתם, או אם הצלחתם להפעיל אותה אחרי הגדרה בהתאמה אישית, התחילו שרשור ברשימת התפוצה או שאלו שאלה ב-Stack Overflow כדי לשתף את הידע שלכם עם שאר חברי הקהילה של כלי הפיתוח.

השלבים הבאים

את כל התיקיות שכבר הוגדרו אפשר לנהל בקטע הגדרות > סביבת עבודה.

בשלב הבא, אתם יכולים ללמוד איך להשתמש בכלי הפיתוח כדי לשנות CSS ולנפות באגים ב-JavaScript.

ראה גם

שינויים מקומיים היא תכונה נוספת של כלי הפיתוח, שדומה קצת לתכונה "שינוי של כותרות הבקשה". היא מאפשרת לדמות תוכן מהאינטרנט או כותרות של בקשות. כך אתם יכולים להתנסות בשינויים בדף בלי לחכות שה-backend יתעדכן. כשמשתמשים בשינויים מקומיים, השינויים נשמרים גם אחרי טעינת דף, אבל הם לא ממופים לקוד המקור של הדף.