סקירה כללית של המסוף

Kayce Basques

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

צפייה בהודעות ביומן

לעתים קרובות מפתחי אתרים מתעדים הודעות במסוף כדי לוודא שה-JavaScript שלהם פועל מה מצופה. כדי לרשום הודעה, צריך להוסיף ביטוי כמו console.log('Hello, Console!') JavaScript. כשהדפדפן מפעיל את ה-JavaScript ורואה ביטוי כזה, הוא יודע שהוא אמור לרשום את ההודעה במסוף. לדוגמה, נניח שאתם תהליך כתיבת ה-HTML וה-JavaScript של דף:

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

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

חלונית המסוף.

איור 1. חלונית המסוף.

מפתחי אתרים רושמים הודעות ביומן מ-2 סיבות כלליות:

  • מוודאים שהקוד פועל בסדר הנכון.
  • בדיקה של ערכי המשתנים ברגע מסוים בזמן.

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

הרצת JavaScript

המסוף הוא גם REPL. אפשר להריץ JavaScript ב-Play Console כדי לקיים אינטראקציה עם הדף שאתם בודקים. לדוגמה, באיור 2 מוצג המסוף ליד דף הבית של כלי הפיתוח, ואיור 3 מציג את אותו הדף אחרי שינוי כותרת הדף באמצעות המסוף.

החלונית Console ליד דף הבית של כלי הפיתוח.

איור 2. החלונית Console ליד דף הבית של כלי הפיתוח.

שימוש במסוף כדי לשנות את כותרת הדף.

איור 3. שימוש במסוף כדי לשנות את כותרת הדף.

ניתן לשנות את הדף מה-Play Console כי יש למסוף גישה מלאה window בכלי הפיתוח יש כמה פונקציות נוחות שיעזרו לכם לבדוק את כל הדפים בדף. עבור לדוגמה, נניח ש-JavaScript מכיל פונקציה בשם hideModal. הטעינה מראש פועלת הקוד יושהה בשורה הראשונה של hideModal בפעם הבאה שתתבצע קריאה ל-debug(hideModal). רשימה מלאה של פונקציות השירות מופיעה בחומר העזר בנושא ממשק ה-API של המסוף.

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

ראו תחילת העבודה עם הרצת JavaScript כדי להתנסות בהרצת JavaScript ב- המסוף.