תוסף מיוחד ל-Chrome לדיבאג
React Developer Tool- Components

תמלול ההרצאה: תוסף מיוחד ל-Chrome לדיבאג React Developer Tool- Components

הטקסט המלא של הדקות הראשונות בהרצאה «תוסף מיוחד ל-Chrome לדיבאג React Developer Tool- Components» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:26

   הנה האקסטנשן בואו נוסיף אותו Add to Chrome, אקסטנשן ובואו נסגור את זה אני צריך to turn on sync ורק נבצע לו פה קיבוע עם הסיכה והנה הוא נמצא כאן כאשר אנחנו לא נמצאים באתר שהוא ריאקט אז הוא דהוי כזה אם אנחנו עוברים לאתר של ריאקט בואו רק נרפרש כי הוא היה כאן מקודם אז הוא הופך להיות אדום ומצביע לנו שתשמעו זה האתר שבנוי בריאקט מה הדב טול

3. 00:59

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

4. 01:13

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

5. 01:22

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

6. 01:42

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

7. 02:06

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

8. 02:37

   כאן זה שהכל דינמי בואו נראה אם אני בא לווישליסט ומכניס סתם AA מוסיף שימו לב מה קרה כאן הנה אנחנו רואים שיש לנו פה את הAA נוסיף עוד אחד bb go נוסיף עוד אחד cc go אנחנו יכולים לעשות את זה הפוך בואו נלך לבי בי ונרשום שתיים שתיים אנטר אז שימו לב שהיו איי משקף מיידית את מה ששמנו כאן בסטייט זה מאפשר לנו לשחק עם

9. 03:08

   הסטייט בואו ננסה לבחור עוד אחד בואו נבחר הפעם מכאן את הסיילס אם אני לוחץ כמה סיילס אז הוא בחר לי אותו הנה אנחנו רואים אותו כאן ופה אנחנו רואים לדוגמה את הפרופס שלו בואו נשנה לו את הפרופס במקום 20% בואו נגיד כשאנחנו רוצים 10% go שיניתי לו ואני רואה שזה משתנה אונליין ב-UI.

10. 03:34

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

11. 03:46

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

12. 04:00

    נתחיל עם הימני view source for this element. אנחנו לוחצים עליו והוא זורק אותנו מיידית לקובץ ה-tsx שקשור לקומפוננט ההיא שבחרנו שם בעץ.

13. 04:15

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