איתור שגיאות בתוכנית ריאקט

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

1. שימוש בכלי הדיבג של הדפדפן

הפעילו את הפרויקט שכתבנו בשיעור הקודם על המכונה שלכם ומתוך דפדפן כרום לחצו כפתור ימני ובחרו Inspect Element. כנסו לטאב Sources, שם לחצו על המילה webpack ואז על סימן הנקודה, המילה src ושם הקובץ main.js. על המסך יופיע לכם קוד המקור של הקובץ. סמנו נקודת עצירה באחת השורות וטענו מחדש את הדף ותוכלו לראות שהדפדפן עוצר בדיוק בנקודה שסימנתם. עכשיו אפשר להתקדם ולדבג כמו שאתם רגילים.

2. הצגת ותיקון טעויות בניה

חוץ מטעויות לוגיקה במהלך העבודה על ריאקט יהיו לנו גם טעויות בתחביר. לדוגמא נסו לעדכן את קוד הקובץ main.js כך שיכיל את התוכן הבא:

function App() {
  return (
    <div className="App">
      <Person name="mike" >
      <Person name="dave" />
      <Person name="dana" />
    </div>
  );
}

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

3. התקנת הכלי React Dev Tools

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

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

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