ניפוי באגים באפליקציות Google Chat

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

בדף הזה מוסבר איך לנפות באגים באפליקציית HTTP Chat באמצעות ngrok, פלטפורמה מאוחדת לתעבורת נתונים נכנסת (ingress) שאפשר להשתמש בה כדי לבדוק בסביבות פיתוח. במדריך הזה תלמדו לעומק את שינויי הקוד בסביבה מרוחקת, ולפתור בעיות בסביבה מרוחקת.

ניפוי באגים מסביבת הפיתוח המקומית

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

ניפוי באגים מתהליך פיתוח מקומי
סביבה

איור 1. ניפוי באגים בסביבת פיתוח מקומית.

סדנה

Node.js

Python

Java

דרישות מוקדמות

Node.js

Python

Java

הגדרת שירות Localhost כזמין באופן ציבורי

עליך לחבר את הסביבה המקומית שלך לאינטרנט, כדי לאפליקציית Chat יש גישה אליו. האפליקציה ngrok נמצאת בשימוש כדי להפנות בקשות HTTP שנשלחות לכתובת URL ציבורית אל הסביבה המקומית שלכם.

  1. בדפדפן שבסביבה המקומית, נכנסים לחשבון ngrok.
  2. התקנת האפליקציה והגדרת authtoken במכשיר המקומי שלך הסביבה.
  3. יוצרים דומיין סטטי בקובץ חשבון ngrok, הוא נקרא NGROK_STATIC_DOMAIN בהוראות שבמדריך הזה.

איך מגדירים את האפליקציה ל-Chat

איך מגדירים שאפליקציית Chat תשלח את כל בקשות ה-HTTP שלה אל הדומיין הסטטי.

  1. במסוף Google Cloud, פותחים את הדף Google Chat API:

    לדף Google Chat API

  2. לוחצים על הכרטיסייה Configuration.

  3. עוברים אל תכונות אינטראקטיביות > הגדרות חיבור והגדרת הערך של שדה הטקסט כתובת URL של אפליקציה כדי:

    https://NGROK_STATIC_DOMAIN
    

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי ב- חשבון ngrok שלך.

  4. לוחצים על שמירה.

אפליקציית Chat שולחת את כל בקשות ה-HTTP שלה
דומיין סטטי

איור 2. אפליקציית Chat שולחת את כל בקשות ה-HTTP שלה לדומיין הסטטי. השירות הציבורי של ngrok משמש כגשר בין אפליקציית Chat והקוד של האפליקציה שמופעלת מקומית.

בדיקת האפליקציה של Chat

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

Node.js

  1. שכפול המאגר googleworkspace/google-chat-samples מ-GitHub הוא מכיל את קוד האפליקציה execute:

    git clone https://github.com/googleworkspace/google-chat-samples.git
  2. בסביבת הפיתוח המשולבת Visual Studio Code שמותקנת בסביבה המקומית, לבצע את הפעולות הבאות:

    1. פותחים את התיקייה בחלון חדש. google-chat-samples/node/basic-app
    2. הגדרת האפליקציה לניפוי באגים בטעינה מחדש באופן אוטומטי על ידי הוספת שני סקריפטים בקובץ package.json:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    3. מתיקיית הבסיס, מתקינים את האפליקציה:

      npm install
    4. ליצור ולהגדיר השקה בשם Debug Watch שמפעילה את סקריפט debug-watch על ידי יצירת הקובץ .vscode/launch.json ב- תיקיית השורש:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      
    5. מוסיפים נקודת עצירה (breakpoint) להשהיית העיבוד של בקשת HTTP index.js, ומתחילים להריץ לנפות באגים באמצעות הגדרה אישית של Debug Watch נוספה בעבר. האפליקציה נקראת עכשיו ריצה והאזנה לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומאזינים לבקשות HTTP
יציאה '9000'

      איור 3. האפליקציה פועלת ומאזינים ל-HTTP בקשות ביציאה 9000.

  3. מפעילים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי ב- חשבון ngrok שלך. כל הבקשות מופנו עכשיו אל והיציאה שבה האפליקציה משתמשת.

    הטרמינל שבו שרת 'ngrok' פועל
מפנה לכתובת אחרת

    איור 4. הטרמינל עם השרת ngrok פועל ומפנה מחדש.

  4. ממשק אינטרנט הופעל גם במארח המקומי שלך על ידי ngrok אפשר לעקוב אחר כל הפעילויות על ידי פתיחתו בדפדפן.

    ממשק האינטרנט שמתארח באפליקציה 'ngrok' לא מציג HTTP
בקשות

    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok לא מציגות בקשות HTTP.

  5. אפשר לשלוח קישור ישיר לאפליקציית Chat. רוצה לבדוק אותה? message:

    • פותחים את Google Chat.

      כניסה ל-Google Chat

    • לוחצים על צ'אט חדש .

    • בתיבת הדו-שיח, מזינים את השם של אפליקציית Chat.

    • מוצאים את אפליקציית Chat בתוצאות החיפוש. לוחצים על הוספה >. צ'אט.

    • במרחב הצ'אט האישי, מקלידים Hello ומקישים על enter. שלך אפליקציית Chat לא מגיבה כי היא מנופה באגים באופן פעיל.

  6. ב-Visual Studio Code בסביבה המקומית שלך אפשר לראות הביצוע מושהה בנקודת העצירה שהוגדרה.

    הביצוע מושהה בנקודת העצירה (breakpoint)
הגדרה

    איור 6. הביצוע מושהה בנקודת העצירה (breakpoint) שהוגדרה.

  7. כשממשיכים את הביצוע מהכלי לניפוי באגים של Visual Studio Code לפני שהזמן הקצוב לתפוגה של אפליקציית Google Chat יפוג משיב Your message : Hello.

  8. אפשר לבדוק את יומני בקשת ה-HTTP והתגובה מממשק האינטרנט מתארח באפליקציה ngrok בסביבה המקומית שלכם.

    בקשת ה-HTTP מממשק האינטרנט שמתארח ב-'ngrok'
אפליקציה

    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח אפליקציה: ngrok.

  9. כדי לשנות את התנהגות האפליקציה, צריך להחליף את Your message ב- Here was your message בתוך השורה של 35 מתוך index.json. כששומרים את הקובץ, nodemon טוען מחדש את האפליקציה באופן אוטומטי עם קוד המקור המעודכן וה-Visual Studio Code נשאר במצב ניפוי באגים.

    האפליקציה פועלת ומאזינים לבקשות HTTP ביציאה
9000 עם השינוי בקוד
נטען

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

  10. הפעם, במקום לשלוח הודעה שנייה Hello במרחב המשותף, יכול לבחור את בקשת ה-HTTP האחרונה שנקלטה בממשק האינטרנט שמתארח על ידי את האפליקציה ngrok בסביבה המקומית שלך ולוחצים על Replay. כמו בפעם הקודמת, לא התקבלה תשובה מאפליקציית Chat כי מתבצע בו ניפוי באגים באופן פעיל.

  11. כשממשיכים את הביצוע מהכלי לניפוי באגים של Visual Studio Code תוכלו לראות מממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית שבה האפליקציה יוצרת תשובה את הגרסה המעודכנת של ההודעה Here was your message : Hello.

Python

  1. קבלת פרטי כניסה של משתמש חדש לשימוש עבור Application Default פרטי כניסה:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    מחליפים את PROJECT_ID ב- מזהה הפרויקט לפרויקט Cloud של האפליקציה.

  2. שכפול המאגר googleworkspace/google-chat-samples מ-GitHub הוא מכיל את קוד האפליקציה:

    git clone https://github.com/googleworkspace/google-chat-samples.git
  3. בסביבת הפיתוח המשולבת Visual Studio Code שמותקנת בסביבה המקומית, לבצע את הפעולות הבאות:

    1. פותחים את התיקייה בחלון חדש. google-chat-samples/python/avatar-app
    2. יוצרים סביבה וירטואלית חדשה בשביל Python env ומפעילים אותה:

      virtualenv env
      source env/bin/activate
    3. התקנת כל יחסי התלות של הפרויקט באמצעות pip בסביבה הווירטואלית סביבה:

      pip install -r requirements.txt
    4. יוצרים את הקובץ .vscode/launch.json בתיקיית השורש להגדיר הפעלה בשם Debug Watch שמפעילה את האפליקציה מהמודול functions-framework ביציאה 9000 במצב ניפוי באגים בסביבה הווירטואלית env:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. מוסיפים נקודת עצירה (breakpoint) להשהיית העיבוד של בקשת HTTP main.py, ומתחילים להריץ לנפות באגים באמצעות הגדרה אישית של Debug Watch נוספה בעבר. האפליקציה נקראת עכשיו ריצה והאזנה לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומאזינים לבקשות HTTP
יציאה '9000'

      איור 3. האפליקציה פועלת ומאזינים ל-HTTP בקשות ביציאה 9000.

  4. מפעילים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי ב- חשבון ngrok שלך. כל הבקשות מופנו עכשיו אל והיציאה שבה האפליקציה משתמשת.

    הטרמינל שבו שרת 'ngrok' פועל
מפנה לכתובת אחרת

    איור 4. הטרמינל עם השרת ngrok פועל ומפנה מחדש.

  5. ממשק אינטרנט הופעל גם במארח המקומי שלך על ידי ngrok אפשר לעקוב אחר כל הפעילויות על ידי פתיחתו בדפדפן.

    ממשק האינטרנט שמתארח באפליקציה 'ngrok' לא מציג HTTP
בקשות

    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok לא מציגות בקשות HTTP.

  6. אפשר לשלוח קישור ישיר לאפליקציית Chat. רוצה לבדוק אותה? message:

    • פותחים את Google Chat.

      כניסה ל-Google Chat

    • לוחצים על צ'אט חדש .

    • בתיבת הדו-שיח, מזינים את השם של אפליקציית Chat.

    • מוצאים את אפליקציית Chat בתוצאות החיפוש. לוחצים על הוספה >. צ'אט.

    • במרחב הצ'אט האישי, מקלידים Hey! ומקישים על enter. שלך אפליקציית Chat לא מגיבה כי מתבצע כרגע מנופה באגים באופן פעיל.

  7. ב-Visual Studio Code בסביבה המקומית שלך אפשר לראות הביצוע מושהה בנקודת העצירה שהוגדרה.

    הביצוע מושהה בנקודת העצירה (breakpoint)
הגדרה

    איור 6. הביצוע מושהה בנקודת העצירה (breakpoint) שהוגדרה.

  8. כשממשיכים את הביצוע מהכלי לניפוי באגים של Visual Studio Code לפני שהזמן הקצוב לתפוגה של אפליקציית Google Chat יפוג משיבה עם השם ותמונת הדמות שלכם בהודעה.

  9. אפשר לבדוק את יומני בקשת ה-HTTP והתגובה מממשק האינטרנט מתארח באפליקציה ngrok בסביבה המקומית שלכם.

    בקשת ה-HTTP מממשק האינטרנט שמתארח ב-'ngrok'
אפליקציה

    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח אפליקציה: ngrok.

  10. כדי לשנות את התנהגות האפליקציה, צריך להחליף את Hello בטקסט Hey בתוך השורה 51 של הקובץ main.py. כששומרים את הקובץ, Visual Studio Code טוען מחדש באופן אוטומטי את האפליקציה עם קוד המקור המעודכן, נשאר במצב ניפוי באגים.

    האפליקציה פועלת ומאזינים לבקשות HTTP ביציאה
9000 עם השינוי בקוד
נטען

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

  11. הפעם, במקום לשלוח הודעה שנייה Hey! במרחב המשותף, יכול לבחור את בקשת ה-HTTP האחרונה שנקלטה בממשק האינטרנט שמתארח על ידי את האפליקציה ngrok בסביבה המקומית שלך ולוחצים על Replay. כמו בפעם הקודמת, אין תשובה מאפליקציית Chat כי מתבצע בו ניפוי באגים באופן פעיל.

  12. כשממשיכים את הביצוע מהכלי לניפוי באגים של Visual Studio Code תוכלו לראות מממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית שבה האפליקציה יוצרת תשובה את הגרסה המעודכנת של ההודעה.

Java

  1. קבלת פרטי כניסה של משתמש חדש לשימוש עבור Application Default פרטי כניסה:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    מחליפים את PROJECT_ID ב- מזהה הפרויקט לפרויקט Cloud של האפליקציה.

  2. שכפול המאגר googleworkspace/google-chat-samples מ-GitHub בסביבה המקומית שלכם, הוא מכיל את קוד האפליקציה:

    git clone https://github.com/googleworkspace/google-chat-samples.git
  3. בסביבת הפיתוח המשולבת Visual Studio Code שמותקנת בסביבה המקומית, לבצע את הפעולות הבאות:

    1. פותחים את התיקייה בחלון חדש. google-chat-samples/java/avatar-app
    2. הגדרת הפרויקט Maven להרצת האפליקציה App עליו להעביר את 9000 באופן מקומי על ידי הוספת גרסת ה-build של Cloud Functions Framework הפלאגין function-maven-plugin בקובץ pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>App</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      
    3. עכשיו אפשר להפעיל אותו באופן מקומי במצב ניפוי באגים:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
    4. יוצרים את הקובץ .vscode/launch.json בתיקיית השורש להגדיר הפעלה בשם Remote Debug Watch שמצורפת אל האפליקציה הושקה בעבר עם היציאה 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      
    5. מוסיפים נקודת עצירה (breakpoint) להשהיית העיבוד של בקשת HTTP קובץ App.java, ולהתחיל לצרף ו לנפות באגים באמצעות הגדרה אישית של Remote Debug Watch נוספה בעבר. האפליקציה פועל ומאזין לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומאזינים לבקשות HTTP
יציאה &#39;9000&#39;

      איור 3. האפליקציה שלו פועלת ומאזינים ל-HTTP בקשות ביציאה 9000.

  4. מפעילים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי ב- חשבון ngrok שלך. כל הבקשות מופנו עכשיו אל והיציאה שבה האפליקציה משתמשת.

    הטרמינל שבו שרת &#39;ngrok&#39; פועל
מפנה לכתובת אחרת

    איור 4. הטרמינל עם השרת ngrok פועל ומפנה מחדש.

  5. ממשק אינטרנט הופעל גם במארח המקומי שלך על ידי ngrok אפשר לעקוב אחר כל הפעילויות על ידי פתיחתו בדפדפן.

    ממשק האינטרנט שמתארח באפליקציה &#39;ngrok&#39; לא מציג HTTP
בקשות

    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok לא מציגות בקשות HTTP.

  6. אפשר לשלוח קישור ישיר לאפליקציית Chat. רוצה לבדוק אותה? message:

    • פותחים את Google Chat.

      כניסה ל-Google Chat

    • לוחצים על צ'אט חדש .

    • בתיבת הדו-שיח, מזינים את השם של אפליקציית Chat.

    • מוצאים את אפליקציית Chat בתוצאות החיפוש. לוחצים על הוספה &gt;. צ'אט.

    • במרחב הצ'אט האישי, מקלידים Hey! ומקישים על enter. שלך אפליקציית Chat לא מגיבה כי מתבצע כרגע מנופה באגים באופן פעיל.

  7. ב-Visual Studio Code בסביבה המקומית שלך אפשר לראות הביצוע מושהה בנקודת העצירה שהוגדרה.

    הביצוע מושהה בנקודת העצירה (breakpoint)
הגדרה

    איור 6. הביצוע מושהה בנקודת העצירה (breakpoint) שהוגדרה.

  8. כשממשיכים את הביצוע מהכלי לניפוי באגים של Visual Studio Code לפני שהזמן הקצוב לתפוגה של אפליקציית Google Chat יפוג משיבה עם השם ותמונת הדמות שלכם בהודעה.

  9. אפשר לבדוק את יומני בקשת ה-HTTP והתגובה מממשק האינטרנט מתארח באפליקציה ngrok בסביבה המקומית שלכם.

    בקשת ה-HTTP מממשק האינטרנט שמתארח ב-&#39;ngrok&#39;
אפליקציה

    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח אפליקציה: ngrok.

  10. כדי לשנות את התנהגות האפליקציה, צריך להחליף את Hello בטקסט Hey בתוך השורה 55 מהקובץ App.java, מפעילים מחדש את התהליך mvnDebug ואז צריך להפעיל מחדש את Remote Debug Watch כדי לחבר מחדש ולהפעיל מחדש ניפוי באגים.

  11. הפעם, במקום לשלוח הודעה שנייה Hey! במרחב המשותף, יכול לבחור את בקשת ה-HTTP האחרונה שנקלטה בממשק האינטרנט שמתארח על ידי את האפליקציה ngrok בסביבה המקומית שלך ולוחצים על Replay. כמו בפעם הקודמת, אין תשובה מאפליקציית Chat כי מתבצע בו ניפוי באגים באופן פעיל.

  12. כשממשיכים את הביצוע מהכלי לניפוי באגים של Visual Studio Code תוכלו לראות מממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית שבה האפליקציה יוצרת תשובה את הגרסה המעודכנת של ההודעה.

ניפוי באגים מסביבה מרוחקת

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

ניפוי באגים מרחוק
סביבה

איור 9. ניפוי באגים מסביבה מרוחקת.

דרישות מוקדמות

  • מרחב צ'אט אישי עם אפליקציית Chat. אפשר לעקוב אחרי הקטע לבדוק את אפליקציית Chat של במדריך למתחילים ומחפשים כדי להתחיל ליצור אפליקציה ב-Chat.
  • האפליקציה פועלת בסביבה המרוחקת באמצעות הכלי לניפוי באגים מופעל בשקע נתון, הוא נקרא כך REMOTE_DEBUG_PORT בהוראות שבמדריך הזה.
  • הסביבה המקומית שלך יכולה ssh לסביבה המרוחקת שלך.
  • סביבת פיתוח משולבת (IDE) שהוגדרה בסביבה המקומית שלך שיכולה לנפות באגים. אנחנו משתמשים Visual Studio Code סביבת פיתוח משולבת (IDE) וברירת המחדל שלה לניפוי באגים בתכונות האלה למטרות המחשה.

חיבור בין הסביבות המקומיות לסביבות המרוחקות

בסביבה המקומית שממנה רוצים להפעיל לקוח לניפוי באגים חיבור, להגדיר מנהרת SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

מחליפים את מה שכתוב בשדות הבאים:

  • LOCAL_DEBUG_PORT: יציאת ניפוי הבאגים במכשיר המקומי שלכם הסביבה.
  • REMOTE_USERNAME: שם המשתמש בסביבה המרוחקת שלכם.
  • REMOTE_ADDRESS: הכתובת של הסביבה המרוחקת.
  • REMOTE_DEBUG_PORT: יציאת ניפוי הבאגים בשלט הרחוק הסביבה.

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

התחלת ניפוי באגים

בסביבת הפיתוח המשולבת Visual Studio Code שמותקנת בסביבה המקומית, מבצעים את הפעולות הבאות הבאים:

  1. פותחים את קוד המקור של האפליקציה בחלון חדש.
  2. יוצרים את הקובץ .vscode/launch.json בתיקיית השורש ומגדירים של השקה בשם Debug Remote שמצורף ליציאת ניפוי הבאגים סביבה:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    מחליפים את LOCAL_DEBUG_PORT ביציאת ניפוי הבאגים ב- בסביבה המקומית.

  3. צריך להוסיף בקוד המקור של האפליקציה נקודת עצירה (breakpoint) להשהיית בקשת ה-HTTP בעיבוד, ולהתחיל לפעול ניפוי באגים באמצעות ההגדרה Debug Remote נוספה לפני כן.

במרחב הצ'אט האישי עם אפליקציית Chat, מקלידים כל מה שרוצים לבדוק ולוחצים על enter. שלך אפליקציית Chat לא מגיבה כי היא פעילה ניפוי באגים בסביבת הפיתוח המשולבת (IDE) Visual Studio Code.