הרצת קטעי קוד של JavaScript

Kayce Basques

Sofia Emelianova

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

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

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

זהו קוד המקור של קטע הקוד שרושם ביומן הודעה ומחליף את גוף ה-HTML של דף הבית באלמנט <p> שמכיל את ההודעה:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

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

פתיחת חלונית קטעי הקוד

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

1. עוברים אל מקורות > > קטעי קוד.

   

2. מתפריט הפקודות:

   1. מקישים על Control+Shift+P (Windows/‏Linux) או על Command+Shift+P (Mac) כדי לפתוח את תפריט הפקודות.
   2. מתחילים להקליד Snippets, בוחרים באפשרות הצגת קטעי קוד ומקישים על Enter.

   

בחלונית מקורות>קטעי קוד מוצגת רשימה של קטעי הקוד ששמרתם. בדוגמה הזו הרשימה ריקה.

יצירת נכסי מידע מובנה

אפשר ליצור קטעי קוד בחלונית Snippets או להריץ את הפקודה המתאימה מCommand Menu בכל מקום ב-DevTools.

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

יצירת קטע קוד בחלונית המקורות

1. פותחים את החלונית קטעי קוד.
2. לוחצים על קטע קוד חדש.

3. נותנים שם לקטע הקוד ומקישים על Enter כדי לשמור.

   

יצירת קטע קוד מתפריט הפקודות

1. מעבירים את הסמן למקום כלשהו ב-DevTools.
2. מקישים על Control+Shift+P (Windows/‏Linux) או על Command+Shift+P (Mac) כדי לפתוח את תפריט הפקודות.

3. מתחילים להקליד Snippet, בוחרים באפשרות Create new snippet ומקישים על Enter כדי להריץ את הפקודה.

   

במאמר שינוי השם של קטעי קוד מוסבר איך לתת שם מותאם אישית לקטע הקוד החדש.

עריכת נכסי מידע מובנה

1. פותחים את החלונית קטעי קוד.

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

   

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

   

4. כדי לשמור, מקישים על Control+S (Windows/‏Linux) או על Command+S (Mac).

הרצת קטעי קוד

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

הרצת קטע קוד בחלונית 'מקורות'

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

3. לוחצים על הפעלה בסרגל הפעולות שבתחתית העורך, או מקישים על Control+Enter (ב-Windows או ב-Linux) או על Command+Enter (ב-Mac).

   

הרצת קטע קוד מתפריט הפקודות

1. ממרכזים את הסמן במקום כלשהו ב-DevTools.
2. מקישים על Control+O (Windows/‏Linux) או על Command+O (Mac) כדי לפתוח את תפריט הפקודות.

3. מקלידים את התו ! ואחריו את שם קטע הקוד שרוצים להריץ.

   

4. מקישים על Enter כדי להריץ את קטע הקוד.

שינוי השם של קטעי טקסט

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

מחיקת נכסי מידע מובנה

1. פותחים את החלונית קטעי קוד.
2. לוחצים לחיצה ימנית על שם קטע הקוד ובוחרים באפשרות הסרה.