Debugging in JavaScript

תמלול ההרצאה: Debugging in JavaScript

הטקסט המלא של הדקות הראשונות בהרצאה «Debugging in JavaScript» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:01

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

2. 00:11

   מה קורה אם יש לנו איזשהו באג ואיך אנחנו יכולים לדבג אותו אז הכוונה בדיבגינג זה לעבור שורה שורה ולראות את המשתנים שיש לנו בקוד זה בגדול מה שאנחנו רוצים לעשות לצורך כך בואו נבנה לחצן input type button value בוא נניח הוא עושה משהו do something.

3. 00:33

   וב-on-click נקרא לפונקציה שנקרא לה do something. שאנחנו הולכים לכתוב אותה ב-JavaScript. לא נשתמש כרגע ב-JQuery בשביל להעביר את הרעיון.

4. 00:47

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

5. 01:31

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

6. 02:04

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

7. 02:14

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

8. 02:53

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

9. 03:05

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

10. 03:19

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

11. 03:36

    step over שזה אומר קפוץ לשורה הבאה אבל אם אתה נמצא על פונקציה אז תבצע אותה בלי להיכנס לתוכה. step out צא מהפונקציה הנוכחית.

12. 03:48

    אז בואו נלחץ על step over ואנחנו עוברים לשורה הבאה. הדבר הבא שאנחנו יכולים לראות זה שאני יכול לעמוד עם העכבר מעל משתנה ולראות מה ערכו ואני רואה כרגע ש-i הוא undefined כלומר עדיין לא הכנסנו לתוכו את הערך 0 וזה הגיוני מפני שהשורה שצבועה לנו בצהוב או יותר נכון הפקודה שצבועה לנו בצהוב

13. 04:12

    זה פקודה שעדיין לא התבצעה ורק כשאני מלחץ f10 או f11 היא תתבצע. בואו ננסה להציג כאן סרגל שקשור רק לדיבאג. אני רואה שהוא קיים לי הנה הוא פה בואו ניקח אותו ונשים אותו כאן ואז יש לנו את שלושת אלה step into step over וstep out בהישג יד ואנחנו יכולים ללחוץ עליהם עם העכבר ואנחנו רואים שקפצנו לפקודה הבאה וi כרגע ערכו 0.

14. 04:45

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