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