הרצת JavaScript במסוף

Kayce Basques

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

איור 1. המסוף.

סקירה כללית

המסוף הוא REPL, הוא קורא את ה-JavaScript שמקלידים בו, מעריך את הקוד, מדפיס את התוצאה של הביטוי ואז חוזר לאותו שלב.

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

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

1. מקישים על Command+Option+J (ב-Mac) או על Control+Shift+J (ב-Windows, ‏Linux או ב-ChromeOS) כדי לפתוח את מסוף Chrome, ממש כאן בדף הזה.

   

   איור 2. המדריך הזה בצד ימין ו-DevTools בצד שמאל.

הצגה ושינוי של JavaScript או DOM של הדף

כשאתם יוצרים דף או מנפים באגים בו, לרוב כדאי להריץ הצהרות במסוף כדי לשנות את המראה או את אופן הפעולה של הדף.

1. שימו לב לטקסט שמופיע בלחצן שלמטה.

   שלום עולם!

2. מקלידים document.getElementById('hello').textContent = 'Hello, Console!' במסוף ומקישים על Enter כדי להעריך את הביטוי. שימו לב איך הטקסט שמופיע בלחצן משתנה.

   

   איור 3. איך המסוף נראה אחרי הערכת הביטוי שלמעלה.

   מתחת לקוד שערכתם מופיע הערך "Hello, Console!". נזכרים את 4 השלבים של REPL: קריאה, הערכה, הדפסה ולולאה. אחרי הערכת הקוד, ה-REPL מדפיס את התוצאה של הביטוי. לכן, "Hello, Console!" חייבת להיות התוצאה של ההערכה של document.getElementById('hello').textContent = 'Hello, Console!'.

הפעלת JavaScript שרירותי שלא קשור לדף

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

1. מקלידים 5 + 15 במסוף. התוצאה 20 תופיע מתחת לביטוי (אלא אם חישוב הביטוי נמשך יותר מדי זמן).
2. מקישים על Enter כדי להעריך את הביטוי. התוצאה של הביטוי תודפס במסוף מתחת לקוד. איור 4 בהמשך מראה איך המסוף צריך להיראות אחרי שמעריכים את הביטוי הזה.

3. מקלידים את הקוד הבא במסוף. כדאי לנסות להקליד אותו תו אחר תו, במקום להעתיק ולהדביק אותו.

   function add(a, b=20) {
     return a + b;
   }
   

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

4. עכשיו קוראים לפונקציה שהגדרתם כרגע.

   add(25);
   

   

   איור 4. איך המסוף נראה אחרי הערכת הביטויים שלמעלה.

   הערך של add(25) שווה 45, כי כשנשלחת קריאה לפונקציה add בלי ארגומנט שני, הערך של b שמוגדר כברירת מחדל הוא 20.

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

השלבים הבאים

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

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

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

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

• במקום להקליד document.querySelector() כדי לבחור אלמנט, אפשר להקליד $(). התחביר הזה מבוסס על jQuery, אבל הוא לא jQuery בפועל. זהו פשוט כינוי ל-document.querySelector().
• debug(function) מגדיר למעשה נקודת עצירה בשורה הראשונה של הפונקציה הזו.
• הפונקציה keys(object) מחזירה מערך שמכיל את המפתחות של האובייקט שצוין.

במאמר Console Utilities API Reference מפורטות כל הפונקציות הנוחות.