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

Kayce Basques

Sofia Emelianova

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

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

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

סקירה כללית

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

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

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

מגבלות

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

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

תכונה קשורה: שינויים מקומיים

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

שלב 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 ששוכפלה. ניתן לעשות זאת בכמה דרכים:

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

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. פותחים את הכרטיסייה Elements (רכיבים).

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

   

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

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

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

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

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

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

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

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

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

   

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

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.