ריאקט דיבאג עם Chrome
React Debugging
localhost:3000, מאתרים את קובץ הקומפוננטה, כאן הוספת מוצר.Local מציגה את המשתנים של הפונקציה, כולל this. Closure מציגה משתנים מחוץ לפונקציה שהיא משתמשת בהם, כל closure הוא scope נוסף. יש גם closure של המודול ואת האובייקט הגלובלי, שבדפדפן הוא window.product, product.name או product.price < 0, והם מתעדכנים תוך כדי הדיבאג. יש גם חלוניות עם רשימת ה-breakpoints והנתיב של קריאות הפונקציות (call stack).setTimeout, הוא נכנס גם אליו.debugger;: כותבים אותה בקוד, והיא עוצרת את הריצה רק כש-F12 פתוח. כך מגיעים ישר לקוד בלי לחפש אותו.פרקי ההרצאה: ריאקט דיבאג עם Chrome React Debugging
תמלול ההרצאה: ריאקט דיבאג עם Chrome React Debugging
הטקסט המלא של הדקות הראשונות בהרצאה «ריאקט דיבאג עם Chrome React Debugging» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, אנחנו מגיעים למודול ממש חשוב ודי פשוט שעוסק בכל הנושא של דיבאגינג וטיפול בשגיאות. כאן אנחנו הולכים לראות כל מיני טכניקות לדבק גם מבחינת כלים שיש, גם מבחינת דפדפן, איך אנחנו בעצם יכולים לטפל בשגיאות, איך אנחנו יכולים להציג שגיאות בצורה נכונה ועוד דברים בנושא.
דבר ראשון אנחנו הולכים לראות איך ניתן לדבג על ידי שימוש בחום. חום הוא כלי מעולה גם לצורך דיבאגינג. בואו נראה אנחנו רוצים כרגע לבצע איזה שהוא תהליך של דיבאגינג ובוא נניח שאנחנו רוצים להוסיף מוצר חדש.
יש לנו איזושהי בעיה נניח בהוספת מוצר ואנחנו רוצים לדבג מה בעצם קורה כאשר היוזר לוחץ על הלחצן. אז הנה יש לנו פה את הטופס של הוספת מוצר חדש וחורום מאפשר לנו על ידי F12 גם להסתכל על כל מה שקשור בנוגע לדיבאגינג.
בואו קודם כל נמלא בינתיים את הפרטים, נגדיר שיש לנו כאן אפל, עולה שלוש וחצי, יש לנו מאה במלאי, בואו נבחר לעצמנו גרין אפל, מעולה.
כאן אנחנו רוצים, לפני שאנחנו לוחצים על הלחצן, לראות את הקוד. חורום מאפשר לנו לראות את הקוד. הקוד עצמו נמצא בsources כאן אנחנו הולכים ורואים איפה האתר גולש localhost 3000 ויש לנו כאן בעצם קצת מוחבא לנו כאן כל מיני נתיבים בדיוק הנתיב איפה האפליקציה שלנו יושבת במחשב
והנה הsource של האפליקציה והנה הקומפוננטות קצת קשה להגיע לזה אנחנו תכף נראה איך אנחנו יכולים בקלות לדעת איפה זה נמצא כאן כאן אנחנו רוצים את product area, add product והנה הכובד שלנו וכאן אנחנו רואים את הקוד.
אוקיי, מה שאנחנו יכולים לעשות זה פשוט לשים breakpoint, נקודת עצירה, כאן אנחנו רואים פה את השורה והנה יש לנו breakpoint, זאת אומרת שאם אנחנו נגיע לקוד הזה, הקוד יעצור ויעבור למצב דיבאג.
אז בואו נלחץ על add והנה אנחנו רואים שנכנסנו לכאן, התוכנית תקועה בשורה הזאת, בברקפוינט שלנו ואנחנו רואים גם פה pause in debugging והתוכנית לא ממשיכה.
אנחנו עכשיו יכולים א' להתבונן בנתונים שקיימים לנו, הרי המטרה שלנו זה לתקן שגיאות, אז אנחנו יכולים להתבונן ולראות, רגע, אולי לא קיבלנו אובייקט מוצר כמו שצריך, אולי חסר בו מידע, אולי אנחנו טעינו בשמות שלו.
אז הכלי הזה מאפשר לנו גם בעצם לדבג את התוכנית שלנו. בואו רגע נשים את זה, נחזיר את זה לאיך שזה היה, הנה זה כאן, ובואו נראה איזה בעצם כלים יש לנו בדיבאגר הזה.
אז אם אנחנו מרחפים מעל פרודקט אנחנו בעצם רואים את הערכים שלו שזה מאוד אינפורמטיבי אנחנו רואים שהתמונה הגיעה כמו שצריך השם הפרייס הסטוק אוקיי יש לנו פה אפשרות להתבונן בזה.
כאן למעטה אנחנו רואים חלונית סקופ סקופ זה בעצם איזה דאטה אנחנו רואים בדיוק כאן בברייק פוינט הזאת. לוקאל זה כל המשתנים הלוקאלים של הפונקציה שלנו.
יש כמובן משתנה דיס בכל מקום, כרגע הוא אונדיפיינד. יש לנו את הפרודקט עצמו, הנה הוא כאן, הוא נחשב משתנה לוקאלי כמובן, הוא בתוך הפונקציה.
ויש משהו שנקרא קלוז'רים. קלוז'ר זה קונספט או בעצם היכולת של פונקציה בג'אווה סקריפט להשתמש במשתנה שנמצא מחוץ לפונקציה. הקונספט הזה נקרא קלוז'ר וכל פעם שאנחנו רואים קלוז'ר זה אומר סקופ נוסף.
אז הנה אנחנו רואים הקלוז'ר הזה שזה הסקופ של הפונקציה. אד פרודקט כי אנחנו נמצאים בתוך סאב מיט אז הסקופ של אד פרודקט זאת אומרת לדוגמה האובייקט היסטורי הזה שאנחנו רואים אותו פה והפונקציה סט אימג' סורס שנמצאת איפשהו פה למטה הנה היא כאן הם נמצאים ברמת אד פרודקט כפונקציה ולכן זה חיצוני לסאב מיט שלנו אז זה נחשב קלוז'ר
יש לנו פה עוד קלוז'ר שזה המודול עצמו כל הקובץ יש לנו פה עוד קלוז'ר אחד, גם כן אנחנו רואים מודול, זה add product ויש לנו כאן את הגלובל אובג'קט. הגלובל אובג'קט בדפדפן זה ה-window.
חלונית נוספת מאוד חשובה, Watch. Watch זאת חלונית שמאפשרת לנו להוסיף ערכים ספציפיים ולצפות בהם. על ידי פלוס, בואו נוסיף לדוגמה את product.
הוא קפץ לי מאיזושהי סיבה למשהו אחר. Product. אוקיי, אז הנה אנחנו רואים את product. בואו נוסיף גם משהו יותר ספציפי product.name ואנחנו רואים שזה אפל.
אנחנו יכולים להוסיף גם ביטויים לדוגמה האם product.price קטן מאפס והוא כמובן יחשב את הביטוי ויגיד לנו false. כמובן שהדבר הזה מתעדכן תוך כדי תנועה תוך כדי ושאנחנו מבצעים דיבאגינג.
מה עוד יש לנו כאן? יש לנו פה כל מיני חלוניות נוספות שמאפשרות לנו לראות לדוגמה את רשימת הברייפונט שלנו ואנחנו יכולים לבטל אותם או להגדיר אותם כרצוננו.
יש לנו פה את ה-call stack, ה-call stack זה נתיב הפונקציות, איזה פונקציה קרה לאיזה פונקציה קרה לאיזה פונקציה עד שהגיעה לפונקציה שלנו.
יש לנו כאן את ה-dome breakpoints, כל מיני breakpoints אחרים שאפשר לשים במהלך האפליקציה, event listener breakpoints וכדומה, אבל פחות רלוונטי אלינו כרגע, מה שחשוב זה אלה.
החבר'ה האלה שנמצאים פה מאפשרים לנו לטייל, אז יש לנו קודם כל את הדבר הזה, step over שמאפשר לבצע את השורה הנוכחית את הפקודה הנוכחית ולהתקדם לפקודה הבאה כאשר אם הפקודה הנוכחית זאת קריאה לפונקציה בדיוק כמו שאנחנו רואים עכשיו אנחנו נמצאים בפקודה של קריאה לפונקציה add product אז הפקודה הזאת שנקראת step over כן תבצע את הפונקציה שלנו אבל לא תיכנס אליה מבחינת דיבאגר זאת אומרת הדיבאגר לא ייכנס
אליה אבל היא כן תתבצע בואו נלחץ עליה ונראה שאנחנו קפצנו שורה אחרי זה האם הפונקציה הזאת התבצעה ושלחה את המוצר לשרת כי זה מה שהיא אמורה לעשות, תשובה בהחלט כן.
אז ככה אנחנו יכולים לבצע סטפ אובר, בואו נבצע עוד פעם סטפ אובר והנה אנחנו רואים את ההודעה שקפצה לה, בואו נבצע עוד פעם סטפ אובר והנה הגענו לסוף ואנחנו יכולים לבצע את זה ריזיום והתוכנית ממשיכה ויצאה ממצב דיבאג.
בואו ניכנס ונוסיף עוד