בדף הזה מוסבר איך אפשר להשתמש במסוף כלי הפיתוח ל-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 סיבות כלליות:
- מוודאים שהקוד פועל בסדר הנכון.
- בדיקה של ערכי המשתנים ברגע מסוים בזמן.
תוכלו להיעזר במאמר תחילת העבודה עם הודעות רישום ביומן כדי להתנסות ברישום ביומן. ברשימה המלאה של ה-methods console, אפשר לעיין בחומר העזר בנושא API של המסוף. ההבדל העיקרי בין השיטות הוא האופן שבו הן מציגות את הנתונים שאתם רושמים ביומן.
הרצת JavaScript
המסוף הוא גם REPL. אפשר להריץ JavaScript במסוף כדי ליצור אינטראקציה עם הדף שבודקים. לדוגמה, ב-איור 2 מוצג המסוף ליד דף הבית של כלי הפיתוח, ובאיור 3 מוצג אותו הדף אחרי שמשתמשים ב-Play Console כדי לשנות את כותרת הדף.
איור 2. החלונית Console ליד דף הבית של כלי הפיתוח.
איור 3. שימוש במסוף כדי לשנות את כותרת הדף.
ניתן לשנות את הדף דרך ה-Play Console כי יש למסוף גישה מלאה ל-window של הדף. בכלי הפיתוח יש כמה פונקציות נוחות שיעזרו לכם לבדוק את כל הדפים בדף. לדוגמה, נניח ש-JavaScript מכיל פונקציה בשם hideModal. הרצה של debug(hideModal) תשהה את הקוד בשורה הראשונה של hideModal בפעם הבאה שתתבצע קריאה.
רשימה מלאה של פונקציות השירות מופיעה בחומר העזר בנושא ממשק ה-API של המסוף.
כשמפעילים JavaScript, אין צורך לבצע פעולות בדף. אפשר להשתמש במסוף כדי לנסות
קוד חדש שלא קשור לדף. לדוגמה, נניח שלמדתם על שיטת מערך ה-JavaScript המובנית map(), ואתם רוצים להתנסות בה. כדאי לנסות את הפונקציה במסוף.
במאמר תחילת העבודה עם הרצת JavaScript תוכלו להתנסות בהרצת JavaScript במסוף.