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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

סקירה כללית

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

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

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

מגבלות

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

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

    דף ההדגמה באירוח מקומי נפתח ב-Chrome.

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

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

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

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

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

    לחצן אישור בהנחיה.

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

בכרטיסייה 'Workspace' מוצג עכשיו מיפוי בין הקבצים המקומיים לקבצים שברשת.

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

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

    הצגת style.css בכלי לעריכת טקסט.

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

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

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

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

    הגדרת מאפיין הצבע של הרכיב h1 לירוק.

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

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

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

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

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

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

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

    מתבצע ניסיון לשנות את ה-HTML מעץ ה-DOM של חלונית הרכיבים.

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

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

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

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

    שינוי HTML מהחלונית &#39;מקורות&#39;.

  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 ובוחרים באפשרות הצגת מקור מהיר. בחלק התחתון של החלון של כלי הפיתוח יש כרטיסיית Quick Source (מקור מהיר).

    פתיחת הכרטיסייה &#39;מקורות מהירים&#39; דרך תפריט הפקודות.

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

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

  5. מקלידים script ובוחרים באפשרות devtools-workspace-demo/script.js.

    פתיחת סקריפט באמצעות תיבת הדו-שיח &#39;פתיחת קובץ&#39;.

  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. טעינה מחדש. צריך לטעון מחדש את הדף. הקישור בדף נטוי עכשיו.

הקישור בדף נטוי עכשיו.

השלבים הבאים

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

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