ריאקט דיבאג עם VS Code
Visual Studio Code
Run ואז Start Debugging. בפעם הראשונה VS Code שואל איזה דיבאגר להריץ, ובוחרים Chrome, כי האפליקציה רצה בו..vscode עם הקובץ launch.json. ה-url שבו הצביע על localhost:8080 ושונה ל-localhost:3000. אחרי השינוי מפעילים שוב, ונפתח מופע נפרד של Chrome, שבו עובדים.Variables מקביל ל-Scope ומציג ערכים מקומיים וגם closures של הפונקציה, הקובץ והמודול, והאובייקט הגלובלי window. ב-Watch מוסיפים ערכים וביטויים, כמו product, product.name או product.price < 0. יש גם call stack ורשימת breakpoints. אפשר לרחף מעל משתנה ולראות את פרטיו.alert, הוא מופיע בחלון Chrome שנפתח על ידי הדיבאגר, ושם צריך ללחוץ OK כדי להמשיך.פרקי ההרצאה: ריאקט דיבאג עם VS Code Visual Studio Code
תמלול ההרצאה: ריאקט דיבאג עם VS Code Visual Studio Code
הטקסט המלא של הדקות הראשונות בהרצאה «ריאקט דיבאג עם VS Code Visual Studio Code» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הכלי הבא איתו אנחנו יכולים לדבג זה Visual Studio Code. קודם כל אין לנו צורך בדיבאגר הזה, זה היה טוב לחרום. אז איך אנחנו מדבגים עם Visual Studio Code?
כל מה שאנחנו צריכים לעשות זה Run ו-Start Debugging. רק הערה אחת לפני, הפרויקט חייב לרוץ. אתם לא עוצרים את הפרויקט, הוא חייב לרוץ, אנחנו רואים גם שהוא רץ כאן בטרמינל.
run start debugging בגלל שזה פעם ראשונה שאני בעצם מריץ דיבאגר על הפרויקט הזה אז הוא לא יודע איזה דיבאגר להריץ האם אני רוצה לדבק את חרום האם אני רוצה לדבק את אדג' של מייקרוסופט אולי אני רוצה לדבק את no.js אנחנו רוצים לדבק את חרום כי התוכנית רצה על חרום אז אנחנו בוחרים חרום וכל מה שהפעולה הזאת עשתה זה יצרה לנו פה תיקייה
שנקראת .vscode קונפיגורציה פנימית של הפרויקט הזה קובץ שנקרא launch.json והגדרות אגורטיביות של הדיבאגר ה-url זה הדבר שמשנה לנו כרגע כי הוא מצביע על איזשהו אתר שאנחנו לא שם הוא אומר לנו תשמעו אני רוצה לדבק את htp localhost 8080 ואנחנו ב-http localhost 3000 זה ממש כתובת אחרת מספר port מבחינת המערכת זה ממש דומיין
אחר אז הנה יש לנו עכשיו פשוט צורך לשנות את זה ל-3000 לסגור ושוב עוד פעם לבצע את אותה פעולה run start debugging אבל הפעם בגלל שיש לו את המסמך הזה launch json שמקונפק כמו שצריך הוא פותח מופע נפרד של chrome שימו לב יש לנו פה את המופע הקודם אנחנו לא נוגעים בו בשביל לדבק אנחנו הולכים למופע החדש אפילו שהמופע הקודם חייב היה לרוץ מה שאנחנו רוצים לעשות זה basically אותו דבר כמו מקודם אז בואו נגיע
למוצרים יש לנו כאן אפשרות לשים פה breakpoint זה כל היופי בכלי הזה של Visual Studio Code שאנחנו לא צריכים לצאת החוצה לכלים אחרים כמו לכרום או כל מיני דברים אחרים הכל נמצא אין האוס וגם זה יותר מרווח אם שמתם לב כרום קצת היה דחוף שמה אבל כל מה שהיה שמה יש כאן קודם כל שמתי פה ברייק פוינט בואו נריץ רגע את התוכנית נכניס כאן אפל
3.4 יש לנו רק 20 כרגע תגיע בבקשה לפירות הנה האפל וברגע שאנחנו קופצים על add כבר אתם רואים פה מאחורה את הצהוב הזה.
אני חוזר והוא אומר לי תשמע זאת השורה שאני עצרתי בה התוכנית כרגע נעצרה במצב דיבאג. מה אנחנו יכולים לעשות במצב דיבאג? אז קודם כל אנחנו יכולים לראות שיש לנו פה את כל החלונות שהיו מקודם.
חלון variables הוא מקביל לscope.