דיבאג בצד שרת בתוך Visual Studio Code

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

Visual Studio - סביבת פיתוח משולבת (IDE) של מיקרוסופט לכתיבה, ניפוי והרצה של קוד, בעיקר בשפות .NET.

Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.

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

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

לוג - רישום מתועד של אירועים ופעולות שמתרחשים במערכת או בתוכנה, המשמש למעקב ולאיתור תקלות.

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

דיבאג בצד שרת בתוך Visual Studio Code

אפשר לדבג גם אפליקציית Node.js בצד שרת מתוך Visual Studio Code, באותו אופן כמו בצד לקוח. ההרצאה מראה את ההגדרה והשימוש בתוכנית פשוטה שמחשבת סכום חזקות.

השלבים העיקריים

1. התוכנית: יש app.js שקורא ל-calculate מתוך calculate.js, שמשתמש בפונקציה power. אין דף HTML, והתוצאה מודפסת ב-console.log. מריצים קודם כדי לראות שהיא עובדת.

2. התוסף: שוב נדרש התוסף Debugger for Chrome, גם שאין דיבוג בדפדפן.

3. launch.json: פותחים View ואז Command Palette, מריצים debug: open launch.json ובוחרים הפעם Node.js. נוצר קובץ הגדרות לדיבוג Node.js, ואין צורך לגעת בו.

4. דיבוג: מציבים breakpoint (בהרצאה שוכחים ומציבים שוב), ואז Run ואז Start Debugging או F5. הריצה נעצרת בנקודה.

5. התקדמות: משתמשים ב-Step Over וב-Step Into כדי להיכנס לפונקציה power. חלוניות ה-Variables וה-Watch נשארות מההרצאה הקודמת ואפשר למחוק מהן מה שלא נחוץ, וה-Call Stack מציג את הפונקציות. בסוף התוצאה מופיעה ב-Debug Console.

אפשר עכשיו לדבג אפליקציית Node.js ב-VS Code ולעקוב אחרי המשתנים והקריאות שלה.

פרקי ההרצאה: דיבאג בצד שרת בתוך Visual Studio Code

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

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

00:03
אנחנו מגיעים לדיבאגינג של אפליקציה ב-Node.js. פה יכול להיות שאנחנו רוצים לדבק את כל מה שאנחנו בונים בסרבר סייד, ב-Node.js שלנו. אז בואו נראה איך עושים את זה.
00:19
יש לנו כאן תוכנית Node.js רגילה, יש לנו App.js, אין לנו פה אינדקס HTML כמו שהיה בסרטונים הקודמים, כי אנחנו כרגע Node.js סרבר סייד. יש לנו את ה-Calculate.js שבו יש את הפונקציות שראינו בסרטונים הקודמים, Calculate ו-Power חשפנו החוצה את Calculate קראנו לה מפה יש לנו פה את ה-Require זה מה שאנחנו עושים דבר
00:45
ראשון בואו נריץ נראה שזה עובד יש לנו כאן את Node App Go והנה הוא נותן לנו את ה-Summary כמובן שאין לנו פה Alert אלא Console Log Good בשביל לבצע דיבאגינג ב-Node.js אנחנו צריכים שוב פעם באקסטנשן את באגר for chrome. זה משהו שאנחנו צריכים, אפילו שאנחנו כביכול לא מדבגים עם כרום.
01:16
והדבר הבא שאנחנו רוצים זה לבצע view command palette שוב פעם debug open launch json אבל להגיד לו שאנחנו רוצים לדבג את node.js ואז הוא יוצר לנו קובץ קונפיגורציה עבור דיבגינג של node.js שם אותו פה. בואו נסגור אותו אנחנו לא הולכים לגעת בו ומפה הדיבאגינג הוא בייסיקלי זהה.