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

Kayce Basques

Sofia Emelianova

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

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

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

לדוגמה, בצילום המסך שבהמשך מוצגת דף הבית של המסמכים של 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.

   

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

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

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

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

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

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. לוחצים על השם של קטע הקוד שרוצים להריץ. החלונית מקורות פותחת אותה ב-Code Editor.

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

   

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

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

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

   

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

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

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

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

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