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

Kayce Basques

Sofia Emelianova

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

סקירה כללית

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

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

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

מגבלות

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

קהילת DevTools פועלת לתמיכה ביכולות שמספקות מפות המקור במגוון מסגרות וכלים. אם נתקלתם בבעיות במהלך השימוש בסביבת עבודה עם המסגרת שבחרתם, או אם היא פועלת אחרי הגדרה מותאמת אישית כלשהי, תוכלו להתחיל שרשור ברשימת התפוצה או לשאול שאלה ב-Stack Overflow כדי לשתף את הידע שלכם עם שאר קהילת 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. עוברים אל Sources (מקורות) > Workspace (סביבת עבודה) ומגדירים סביבת עבודה בתיקייה devtools-workspace-demo שמשוכפלת. יש כמה דרכים לעשות זאת:

   • גוררים את התיקייה ומשחררים אותה בעורך בקטע מקורות.
   • לוחצים על הקישור בחירת תיקייה ובוחרים את התיקייה.
   • לוחצים על Add folder ובוחרים את התיקייה.

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

   

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

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

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

   

2. סגירת הכלי לעריכת טקסט.

3. חוזרים לכלי הפיתוח, לוחצים על הכרטיסייה רכיבים.

4. משנים את הערך של המאפיין color של הרכיב <h1> לצבע המועדף. לשם כך:

   1. לחץ על הרכיב <h1> בעץ DOM.
   2. בחלונית סגנונות, מאתרים את כלל ה-CSS h1 { color: fuchsia } ומשנים את הצבע למועדפים. בדוגמה הזו, הצבע מוגדר לירוק.

   

   המשמעות של הנקודה הירוקה לצד styles.css:1 בחלונית סגנונות היא שכל שינוי שתבצעו ימופה אל /devtools-workspace-demo/styles.css.

5. פתח שוב את /devtools-workspace-demo/styles.css בעורך טקסט. המאפיין color מוגדר עכשיו לצבע המועדף.

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

שלב 3: שמירת שינוי HTML בדיסק

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

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

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

   

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

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

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

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

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

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

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

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: שמירת שינוי JavaScript בדיסק

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

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

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

   

   בכרטיסייה מוצג התוכן של index.html, שהוא הקובץ האחרון שערכתם בחלונית Sources. בכרטיסייה 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 בכרטיסייה מקור מהיר.

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

8. לוחצים על Command+S (Mac) או על Control+S (Windows, Linux, ChromeOS) כדי לשמור את השינוי.

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

השלבים הבאים

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

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