המדריך הזה מאפשר לכם לתרגל על ידי הגדרת סביבת עבודה, תוכלו להשתמש בו בפרויקטים משלכם. Workspace מאפשר לשמור את השינויים שמבצעים בתוך כלי פיתוח לקוד מקור שנשמר במחשב.
סקירה כללית
מערכת Workspace מאפשרת לשמור שינוי שביצעתם בכלי הפיתוח בעותק מקומי של אותו קובץ ב- במחשב שלך. לדוגמה, נניח:
- קוד המקור של האתר שמור במחשב.
- אתם מפעילים שרת אינטרנט מקומי מספריית קוד המקור, כדי שהאתר נגיש
localhost:8080
. - יש לך
localhost:8080
פתוחה ב-Google Chrome, ועליך להשתמש בכלי הפיתוח כדי לשנות את הגדרות האתר שירות CSS.
כשסביבת העבודה מופעלת, השינויים ב-CSS שמבצעים בכלי הפיתוח נשמרים בקוד המקור בשולחן העבודה.
מגבלות
אם אתם משתמשים ב-framework מודרני, סביר להניח שהוא משנה את קוד המקור מפורמט שקל לשמור על פורמט שמתאים להצגה כמה שיותר מהר. סביבת העבודה היא בדרך כלל יכולים למפות את הקוד שעבר אופטימיזציה בחזרה לקוד המקור המקורי בעזרת מפות Google.
קהילת כלי הפיתוח תומכת ביכולות של מפות המקור במגוון של מסגרות וכלים. נתקלתם בבעיות במהלך השימוש בסביבת עבודה עם מסגרת שבחרתם או שאתם מנסים לפתור את הבעיה? אחרי הגדרה מותאמת אישית כלשהי, אפשר להתחיל שרשור ברשימת התפוצה או לשאול שאלה ב-Stack Overflow תוכלו לשתף את הידע שלכם עם שאר חברי קהילת כלי הפיתוח.
תכונה קשורה: שינויים מקומיים
שינויים מקומיים הם תכונה נוספת של כלי פיתוח שדומה לסביבת העבודה. להשתמש בשינויים מקומיים כדי לדמות תוכן מהאינטרנט או לבקש כותרות בלי להמתין לשינויים בקצה העורפי כשרוצים להתנסות בשינויים בדף, וצריך לראות את השינויים האלה בכל הדף נטען, אבל לא חשוב לכם למפות את השינויים לקוד המקור של הדף.
שלב 1: הגדרה
כדי לקבל חוויית שימוש מעשית בסביבת העבודה, צריך להשלים את המדריך הזה.
הגדרת ההדגמה
- משכפלים את מאגר ההדגמות הזה לספרייה כלשהי במחשב. לדוגמה, אל
~/Desktop
. הפעלת שרת אינטרנט מקומי ב-
~/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
.פותחים כרטיסייה ב-Google Chrome ועוברים לגרסה של האתר באירוח מקומי. אמורה להיות לכם אפשרות לגשת אליו דרך כתובת URL כמו
localhost:8000
. מספר היציאה המדויק עשוי להיות שונה.
הגדרה של כלי פיתוח
פותחים את כלי הפיתוח בדף ההדגמה שמתארח באופן מקומי.
עוברים אל מקורות > סביבת עבודה ומגדירים סביבת עבודה בתיקייה
devtools-workspace-demo
ששוכפלה. ניתן לעשות זאת בכמה דרכים:- גוררים את התיקייה ומשחררים אותה בעורך בקטע מקורות.
- לוחצים על הקישור בחירת תיקייה ובוחרים את התיקייה.
- לוחצים על Add folder ובוחרים את התיקייה.
בהנחיה שלמעלה, לוחצים על אישור כדי לתת לכלי הפיתוח הרשאה לקרוא ולכתוב בספרייה.
בכרטיסייה סביבת עבודה מופיעה עכשיו נקודה ירוקה ליד index.html
, script.js
ו-styles.css
. הנקודות הירוקות האלה מצביעות על כך שכלי הפיתוח פיתחו מיפוי בין משאבי הרשת של הדף לבין הקבצים שב-devtools-workspace-demo
.
שלב 2: שומרים שינוי ב-CSS לדיסק
פתיחת
/devtools-workspace-demo/styles.css
בכלי לעריכת טקסט. שימו לב איך המאפייןcolor
שלh1
הרכיבים מוגדרים ל-fuchsia
.סוגרים את הכלי לעריכת טקסט.
חוזרים לכלי פיתוח, לוחצים על הכרטיסייה Elements.
משנים את הערך של המאפיין
color
של הרכיב<h1>
לצבע המועדף. לשם כך:- לוחצים על הרכיב
<h1>
בעץ DOM. - בחלונית סגנונות, מוצאים את כלל ה-CSS
h1 { color: fuchsia }
ומשנים את הצבע למועדפים. בדוגמה הזו, הצבע מוגדר לירוק.
הנקודה הירוקה לצד
styles.css:1
בחלונית סגנונות מציינת שכל שינוי שמבצעים ממופה אל/devtools-workspace-demo/styles.css
.- לוחצים על הרכיב
פותחים שוב את
/devtools-workspace-demo/styles.css
בכלי לעריכת טקסט. הנכסcolor
מוגדר עכשיו אל הצבע המועדף.צריך לטעון מחדש את הדף. הצבע של הרכיב
<h1>
עדיין מוגדר כצבע המועדף עליך. זה עובד כי כשביצעתם את השינוי וכלי הפיתוח שמרו את השינוי בדיסק. ואז, כשטוענים מחדש הדף, השרת המקומי הגיש את העותק שהשתנה של הקובץ מהדיסק.
שלב 3: שומרים שינוי HTML בדיסק
כדאי לנסות לשנות את ה-HTML מחלונית הרכיבים
- פותחים את הכרטיסייה Elements (רכיבים).
לוחצים לחיצה כפולה על תוכן הטקסט של הרכיב
h1
, שכתוב בוWorkspaces Demo
, ומחליפים אותו עםI ❤️ Cake
.פתיחת
/devtools-workspace-demo/index.html
בכלי לעריכת טקסט. השינוי שביצעת עכשיו לא מופיע שם.צריך לטעון מחדש את הדף. הדף מחזיר את הכותרת המקורית שלו.
אופציונלי: למה זה לא עובד
- עץ הצמתים שמופיע בחלונית Elements מייצג את ה-DOM של הדף.
- כדי להציג דף, דפדפן מאחזר HTML דרך הרשת, מנתח את ה-HTML ולאחר מכן ממיר אותו לעץ של צומתי DOM.
- אם הדף מכיל JavaScript כלשהו, קוד ה-JavaScript עשוי להוסיף, למחוק או לשנות צומתי DOM. שירות CSS יכול
משנים גם את ה-DOM דרך המאפיין
content
. - הדפדפן משתמש בסופו של דבר ב-DOM כדי לקבוע איזה תוכן עליו להציג למשתמשים בדפדפן.
- לכן, המצב הסופי של הדף שהמשתמשים רואים עשוי להיות שונה מאוד מה-HTML הדפדפן אוחזרה.
- במצב הזה, לכלי הפיתוח קשה יותר לזהות מקרים שבהם בוצע שינוי בחלונית Elements כי ה-DOM מושפע מ-HTML, מ-JavaScript ומ-CSS.
בקיצור, עץ ה-DOM !==
HTML.
שינוי HTML מהחלונית 'מקורות'
כדי לשמור שינוי ב-HTML של הדף, אפשר לעשות זאת בחלונית מקורות.
- עוברים אל מקורות > דף.
- לוחצים על (index). קוד ה-HTML של הדף ייפתח.
- מחליפים את
<h1>Workspaces Demo</h1>
ב-<h1>I ❤️ Cake</h1>
. - מקישים על Command+S (Mac) או על Control+S (Windows, Linux, ChromeOS) כדי לשמור את השינוי.
צריך לטעון מחדש את הדף. הרכיב
<h1>
עדיין מציג את הטקסט החדש.פתיחת
/devtools-workspace-demo/index.html
. הרכיב<h1>
מכיל את הטקסט החדש.
שלב 4: שומרים שינוי JavaScript בדיסק
החלונית מקורות היא גם המקום לבצע שינויים ב-JavaScript. אבל לפעמים צריך לגשת לחלוניות אחרות, כמו החלונית Elements (רכיבים) או חלונית המסוף, בזמן ביצוע שינויים לאתר שלך. יש אפשרות לפתוח את החלונית מקורות לצד חלוניות אחרות.
- פותחים את הכרטיסייה Elements (רכיבים).
- מקישים על Command+Shift+P (Mac) או על Control+Shift+P (Windows, Linux, ChromeOS). תפריט הפקודה נפתח.
מקלידים
QS
ובוחרים באפשרות הצגת מקור מהיר. עכשיו, בחלק התחתון של החלון של כלי הפיתוח, הכרטיסייה מקור מהיר.בכרטיסייה מוצג התוכן של
index.html
, שהוא האחרון שערכתם בחלונית מקורות. בכרטיסייה מקור מהיר תמצאו את העורך של מקורות, כך שאפשר לערוך קבצים בזמן שחלוניות אחרות פתוחות.מקישים על Command+P (Mac) או על Control+P (Windows, Linux, ChromeOS) כדי לפתוח את תיבת הדו-שיח פתיחת קובץ.
מקלידים
script
ובוחרים באפשרות devtools-workspace-demo/script.js.שימו לב לקישור
Edit and save files in a workspace
בהדגמה. העיצוב מתבצע באופן קבוע.מוסיפים את הקוד הבא לתחתית ה-script.js בכרטיסייה מקור מהיר.
document.querySelector('a').style = 'font-style:italic';
מקישים על Command+S (Mac) או על Control+S (Windows, Linux, ChromeOS) כדי לשמור את השינוי.
צריך לטעון מחדש את הדף. הקישור בדף נטוי עכשיו.
השלבים הבאים
אפשר להגדיר כמה תיקיות בסביבת העבודה. כל התיקיות האלה מפורטות בקטע הגדרות > סביבת עבודה.
בשלב הבא, מוסבר איך להשתמש בכלי פיתוח כדי לשנות את שירות ה-CSS ואת ניפוי הבאגים ב-JavaScript.