איתור באגים ב- JavaScript: כניסה למסוף הדפדפן

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

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

---

---

מדוע חשוב רישום?

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

קשור: 6 מסגרות JavaScript ששווה ללמוד

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

עֵצָה : מסוף הדפדפן שלך יכול להריץ את כל הקוד שנדון במדריך זה. ללחוץ F12 במקלדת שלך כדי לפתוח את כלי מפתחי הדפדפן ב- Chrome או ב- Firefox.

הודעות מחרוזת רישום

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

---

---

כיצד להכניס שורות למילה

כדי להוציא א שלום עולם ההודעה, אתה יכול להשתמש בדברים הבאים.

console.log(`Hello World`);

עוד תכונה מיוחדת של console.log () השיטה היא היכולת להדפיס את הפלט של רכיבי DOM או את המבנה של חלק מאתר אינטרנט, למשל, להוציא את מבנה רכיב הגוף וכל מה שבתוכו באמצעות הדברים הבאים.

---

---

console.log(document.body)

הפלט הוא אוסף של רכיבי DOM כעץ HTML.

רישום אובייקטים של JavaScript אינטראקטיביים

ה console.dir () שיטה משמשת לרישום נכסים אינטראקטיביים של אובייקטים של JavaScript. לדוגמה, תוכל להשתמש בו כדי להציג את רכיבי ה- DOM בדף אינטרנט.

הפלט הטיפוסי של console.dir () השיטה מורכבת מכל המאפיינים של אובייקט JavaScript שצוין בפורמט JSON. השתמש בשיטה שלהלן כדי להדפיס את המאפיינים של כל האלמנטים בגוף של דף HTML:

console.dir(document.body)

הערכת ביטויים

ייתכן שאתה מכיר שיטות טענה מבדיקת יחידות - ובכן console.assert () השיטה עובדת בצורה דומה. להשתמש ב console.assert () שיטה להערכת ביטוי או מצב.

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

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

הטענה לעיל נכשלת והודעת שגיאה מודפסת בהתאם.

רישום נתונים בטבלאות

להשתמש ב console.table () שיטת הצגת נתונים בפורמט טבלאי. מועמדים טובים להצגה בטבלה כוללים מערכים או נתוני אובייקטים.

הערה : לדפדפנים מסוימים, כמו Firefox, יש מגבלה מקסימלית של 1,000 שורות שניתן להציג עם console.table () שיטה.

בהנחה שיש לך את המערך הבא של אובייקטים לרכב:

let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]

אתה יכול להציג את המערך למעלה בטבלה בשיטה שלהלן:

console.table(cars);

רישום הודעות לפי קטגוריות

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

שגיאות

כדי להדפיס באופן ספציפי הודעות שגיאה לקונסולה באמצעות console.error () שיטה, הודעות הקשורות לשגיאה מוצגות בגופן אדום.

console.error('error message');

אזהרות

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

console.warn('warning message');

מידע

כדי להדפיס מידע כללי לקונסולה, השתמש ב console.info () שיטה:

console.info('general info message')

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

זרימת תכנית מעקב

להשתמש ב console.trace () שיטה להדפסת עקבות של זרימה או ביצוע של תוכנית. זוהי תכונה שימושית מאוד לניפוי באגים מכיוון שהיא מדפיסה את הסדר שבו הפונקציות מבוצעות בתוכנית שלך.

לראות את ה console.trace () בשיטה בפעולה, אתה יכול ליצור שלוש פונקציות (לפי להלן) ולמקם עקבות מחסנית באחת מהפונקציות.

function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

במסוף הדפדפן שלך, התקשר או הפעל functionOne () ותקבל עקבות מחסנית של שיחות הפונקציות המודפסות בסדר ההזמנה החופף הראשון (LIFO) מכיוון שזו ערימה.

ביצוע תוכנית תזמון

עד כמה זמן ייקח לביצוע התוכנית שלך, תוכל להשתמש ב console.time () שיטה. console.time () משמש בדרך כלל יחד עם console.timeEnd () שיטה שבה האחרונה משמשת לסיום הטיימר.

תוכל להפעיל עד 10,000 טיימרים לדף אינטרנט, תוך הדגשת החשיבות של תווית נכון של הטיימרים שלך.

עד כמה זמן לוקח לולאה לעבור בין המספרים 1 עד 50,000, תוכל להשתמש בטיימר כדלקמן.

console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');


סְפִירָה

ה console.count () שיטה משמשת כדי לעקוב אחר מספר הפעמים שפונקציה או פיסת קוד כלשהי נקראה בתוכנית. לדוגמה, אנו יכולים לעקוב אחר מספר הפעמים של לולאה בוצעה כדלקמן:

for(i=0; i<4; i++ ){
console.count();
}

קיבוץ הודעות יומן

בדיוק כמו שיטת הטיימר, ה- console.group () , ו console.groupEnd () בדרך כלל משתמשים בשיטות בזוגות.

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

console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

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

ניקוי הקונסולה

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

להשתמש ב console.clear () השיטה כדלקמן.

console.clear()

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

גוגל כרום : Ctrl + L.

פיירפוקס : Ctrl + Shift + L.

שימוש במסוף הדפדפן במלואו

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

כיצד לשנות סיסמת מנהל מערכת ב- Windows 10

הפוך טופס אימות של CAPTCHA לפרויקט הבא שלך והבחן את כישורי איתור הבאגים החדשים שלך!

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל צור טופס אימות CAPTCHA באמצעות HTML, CSS ו- JavaScript

אבטח את האתרים שלך בעזרת אימות CAPTCHA.

קרא הבא נושאים קשורים

• תִכנוּת
• בניית אתרים
• JavaScript

על הסופר מוכן ללכת(36 מאמרים פורסמו)

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

עוד מאת מוויזה קומוונדה

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה