דף זה תורגם על ידי Cloud Translation API.

שינויים: מעקב אחר שינויים ב-HTML, ב-CSS וב-JavaScript

Sofia Emelianova

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

סקירה כללית

בחלונית שינויים אפשר לעקוב אחרי השינויים שביצעתם ב:

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

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

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

כדי לפתוח את החלונית שינויים:

פותחים את כלי הפיתוח.
כדי לפתוח את תפריט הפקודות, מקישים על Command+Shift+P (ב-Mac) או על Control+Shift+P (ב-Windows, ב-Linux וב-ChromeOS).
מתחילים להקליד changes, בוחרים באפשרות הצגת השינויים ומקישים על Enter.

לחלופין, בפינה השמאלית העליונה, לוחצים על התאמה אישית של DevTools ושליטה בהם > כלים נוספים > שינויים.

האפשרות שמתמקדים בה בתפריט הנפתח 'כלים נוספים' משתנה

כברירת מחדל, בחלונית Changes (שינויים) בתפריט של כלי הפיתוח מוצגים השינויים שבוצעו.

כדי לראות את השינויים:

פותחים את כלי הפיתוח.
מבצעים שינויים במקורות:
- HTML: קודם צריך להפעיל את הביטולים המקומיים, ואז לבצע שינויים בקטע מקורות
- CSS בקטע רכיבים > סגנונות או מקורות
- JavaScript בקטע מקורות
פותחים את החלונית Changes ובוחרים קובץ בצד שמאל של החלונית.
מוצג פלט של diff שמודגש בו:

ההבדלים המודגשים בחלונית 'שינויים'

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

אם ביצעתם שינויים ב-CSS בקטע רכיבים > סגנונות, תוכלו להעתיק את כולם בלחיצה אחת:

פותחים את החלונית Changes ובצד שמאל של החלונית בוחרים את קובץ ה-CSS שבו ביצעתם שינויים.
לוחצים על הלחצן העתקה בחלק התחתון של החלונית 'שינויים'.

כדי לבטל שינויים שבוצעו בקובץ:

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