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

Kayce Basques

Sofia Emelianova

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

זהירות: לפני שמתחילים את המדריך הזה, צריך לדעת איך:

• איך משתמשים ב-HTML, ב-CSS וב-JavaScript כדי ליצור דף אינטרנט
• שימוש בכלי הפיתוח כדי לבצע שינויים בסיסיים ב-CSS
• הפעלת שרת אינטרנט מקומי מסוג HTTP.

סקירה כללית

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

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

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

מגבלות

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

   

הגדרת כלי הפיתוח

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

2. עוברים אל מקורות > סביבת עבודה ומגדירים סביבת עבודה בתיקייה devtools-workspace-demo שהעתקתם. יש כמה דרכים לעשות זאת:

   • גוררים את התיקייה ומשחררים אותה בעורך בקטע מקורות.
   • לוחצים על הקישור select folder (בחירת תיקייה) ובוחרים את התיקייה.
   • לוחצים על הוספת תיקייה ובוחרים את התיקייה.

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

   

בכרטיסייה Workspace (סביבת עבודה) מופיעה עכשיו נקודה ירוקה לצד index.html,‏ script.js ו-styles.css. הנקודות הירוקות האלה מציינות שכלי הפיתוח יצר מיפוי בין משאבי הרשת של הדף לבין הקבצים ב-devtools-workspace-demo.

שלב 2: שומרים שינוי ב-CSS בדיסק

1. פותחים את /devtools-workspace-demo/styles.css בכלי לעריכת טקסט. שימו לב שהמאפיין color של הרכיבים h1 מוגדר ל-fuchsia.

   

2. סוגרים את עורך הטקסט.

3. חוזרים אל כלי הפיתוח ולוחצים על הכרטיסייה 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 מחלונית הרכיבים

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

1. פותחים את הכרטיסייה רכיבים.

2. לוחצים לחיצה כפולה על תוכן הטקסט של האלמנט h1, Workspaces Demo, ומחליפים אותו ב-I ❤️ Cake.

   

3. פותחים את /devtools-workspace-demo/index.html בכלי לעריכת טקסט. השינוי שביצעתם לא מופיע.

4. טוענים מחדש את הדף. הדף יחזור לכותרת המקורית שלו.

אופציונלי: למה זה לא עובד

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

• עץ הצמתים שמוצג בחלונית רכיבים מייצג את ה-DOM של הדף.
• כדי להציג דף, הדפדפן מאחזר את ה-HTML מהרשת, מנתח את ה-HTML ולאחר מכן ממיר אותו לעץ של צמתים ב-DOM.
• אם יש בדף קוד JavaScript, קוד ה-JavaScript הזה עשוי להוסיף, למחוק או לשנות צומתי DOM. אפשר לשנות את ה-DOM גם באמצעות CSS דרך המאפיין content.
• בסופו של דבר, הדפדפן משתמש ב-DOM כדי לקבוע איזה תוכן הוא יציג למשתמשים בדפדפן.
• לכן, המצב הסופי של הדף שמוצג למשתמשים עשוי להיות שונה מאוד מקוד ה-HTML שהדפדפן אחזר.
• לכן קשה ל-DevTools לקבוע איפה לשמור שינוי שבוצע בחלונית Elements, כי ה-DOM מושפע מ-HTML, מ-JavaScript ומ-CSS.

בקיצור, ה-HTML של עץ ה-DOM !==.

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

אם רוצים לשמור שינוי בקוד ה-HTML של הדף, צריך לעשות זאת בחלונית מקורות.

1. עוברים אל מקורות > דף.
2. לוחצים על (index). קובץ ה-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: שמירת שינוי ב-JavaScript בדיסק

בחלונית מקורות אפשר גם לבצע שינויים ב-JavaScript. אבל לפעמים צריך לגשת ללוחות אחרים, כמו הלוח Elements או הלוח Console, בזמן ביצוע שינויים באתר. יש דרך לפתוח את החלונית מקורות לצד חלוניות אחרות.

1. פותחים את הכרטיסייה רכיבים.
2. מקישים על Command+Shift+P (‏Mac) או על Control+Shift+P (‏Windows, ‏Linux, ‏ChromeOS). תפריט הפקודות נפתח.

3. מקלידים QS ובוחרים באפשרות Show Quick Source. בתחתית החלון של כלי הפיתוח מופיעה עכשיו הכרטיסייה Quick Source (מקור מהיר).

   

   בכרטיסייה מוצג התוכן של index.html, שהוא הקובץ האחרון שערכתם בחלונית מקורות. בכרטיסייה Quick Source מוצג הכלי לעריכה מהחלונית Sources, כך שתוכלו לערוך קבצים בזמן שחלוניות אחרות פתוחות.

4. מקישים על Command+P (ב-Mac) או על Control+P (ב-Windows, ב-Linux וב-ChromeOS) כדי לפתוח את תיבת הדו-שיח פתיחת קובץ.

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 ולאתר באגים ב-JavaScript.