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

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

Kayce Basques

Sofia Emelianova

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

סקירה כללית

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

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

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

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

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

כדי לאפשר ל-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. בקטע מקורות > סביבת עבודה, לוחצים על קישור לצד התיקייה.

   

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

   

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

   

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

שמירת שינוי חזרה לתיקיית המקור

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

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

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

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

2. מבצעים שינוי ב-CSS.

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

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

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

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

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

2. מבצעים שינוי ב-HTML.

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

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

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

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

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

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

2. מבצעים שינוי ב-JavaScript.

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

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

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

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

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

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

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

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

   

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

מגבלות

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

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

השלבים הבאים

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

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

ראה גם

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