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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

סקירה כללית

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

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

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

מגבלות

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

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

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

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

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

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

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

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

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

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

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

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

    צפייה בקובץ styles.css בעורך טקסט.

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

  3. חוזרים אל DevTools ולוחצים על הכרטיסייה Elements.

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

שלב 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 מחלונית המקורות.

  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.

    פתיחת הכרטיסייה &#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.