דיבאג בצד לקוח בתוך Visual Studio Code

תמלול ההרצאה: דיבאג בצד לקוח בתוך Visual Studio Code

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

1. 00:03

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

2. 00:16

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

3. 00:32

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

4. 00:55

   זה אקסטנצ'ל מעולה שאני ממליץ עליו. preview on web server מאפשר להריץ דפי html על ידי מכש ימני ו-preview launch on browser, אז אין לי פה כרגע את האקסטנצ'ן עבור דיבאגינג, אנחנו הולכים ל-Marketplace פה, ל-Search, והאקסטנצ'ן נקרא דיבאגר

5. 01:19

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

6. 01:30

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

7. 01:50

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

8. 02:12

   ועכשיו בשביל באמת להריץ את הדיבאגר אנחנו הולכים ל-view command palette ובוחרים, רושמים פה דיבאג נקודתיים open launch.json זה, הוא ימצא לנו את זה, אני לוחץ עליו ואז הוא אמור לשאול אותי האם אני רוצה לדבק את זה בכרום או בנוד ג'ייס.

9. 02:37

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

10. 03:03

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

11. 03:17

    הנה בואו נשים breakpoint בדיוק באותו המקום ששמנו בסרטון הקודם. עכשיו כל מה שאנחנו עושים זה הולכים ל-run ו-start debugging F5 ואנחנו רואים שהוא פתח לנו מופע חדש של הדפדפן ושואל אותנו איפה אתם רוצים,