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

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

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

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

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

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

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

סדנה

Node.js

Python

Java

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

Node.js

Python

  • הגרסה האחרונה של python3 שמותקנת בסביבה המקומית.
  • הגרסה האחרונה של pip ושל virtualenv שמותקנות בסביבה המקומית שלכם משמשת לניהול חבילות Python וסביבות וירטואליות, בהתאמה.
  • אפליקציית HTTP Chat שמוגדרת להעברת הודעות. בסעיפים דרישות מוקדמות, הגדרת הסביבה ופרסום האפליקציה ב-Google Chat במדריך למתחילים. ההבדל היחיד הוא שצריך להגדיר את שם האפליקציה ל-Debug App ואת כתובת ה-URL של האפליקציה לכל דבר כמו http://example.com.
  • סביבת פיתוח משולבת (IDE) שהוגדרה בסביבה המקומית שלך שיכולה לנפות באגים. אנחנו משתמשים בסביבת הפיתוח המשולבת Visual Studio Code ובתכונות ברירת המחדל לניפוי באגים במדריך הזה למטרות המחשה.
  • Git מותקן בסביבה המקומית.
  • חשבון ngrok.
  • הגרסה האחרונה של gcloud הותקנה והאותחלה בסביבה המקומית שלכם.

Java

  • הגרסה היציבה האחרונה של Java SE 11's JDK שמותקן בסביבה המקומית שלכם.
  • הגרסה האחרונה של Apache Maven שמותקנת בסביבה המקומית ומשמשת לניהול פרויקטים ב-Java.
  • אפליקציית HTTP Chat שמוגדרת להעברת הודעות. בסעיפים דרישות מוקדמות, הגדרת הסביבה ופרסום האפליקציה ב-Google Chat במדריך למתחילים. ההבדל היחיד הוא שצריך להגדיר את שם האפליקציה ל-Debug App ואת כתובת ה-URL של האפליקציה לכל דבר כמו http://example.com.
  • סביבת פיתוח משולבת (IDE) שהוגדרה בסביבה המקומית שלך שיכולה לנפות באגים. אנחנו משתמשים בסביבת הפיתוח המשולבת Visual Studio Code ובתכונות ברירת המחדל לניפוי באגים במדריך הזה למטרות המחשה.
  • Git מותקן בסביבה המקומית.
  • חשבון ngrok.
  • הגרסה האחרונה של gcloud הותקנה והאותחלה בסביבה המקומית שלכם.

הגדרת שירות 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. עוברים אל Interactive Features > הגדרות חיבור ומגדירים את הערך בשדה הטקסט כתובת ה-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 בסביבה המקומית, ומכילים את הקוד של האפליקציה שצריך להריץ:

    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 בצ'אט אישי:

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

      כניסה ל-Google Chat

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

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

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

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

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

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

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

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

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

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

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

  9. כדי לשנות את התנהגות האפליקציה, צריך להחליף את Your message ב-35 מוטבע של Here was your message ב-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 Credentials:

    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", "hello_chat",
                  "--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 בצ'אט אישי:

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

      כניסה ל-Google Chat

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

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

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

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

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

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

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

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

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

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

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

  10. כדי לשנות את התנהגות האפליקציה, צריך להחליף את Hello ב-51 מוטבע של Hey של הקובץ 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 Credentials:

    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 להרצת האפליקציה HelloChat ביציאה 9000 באופן מקומי על ידי הוספה של פלאגין ה-build function-maven-plugin של Cloud Functions Framework לקובץ pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>HelloChat</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 בקובץ HelloChat.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 בצ'אט אישי:

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

      כניסה ל-Google Chat

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

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

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

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

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

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

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

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

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

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

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

  10. כדי לשנות את התנהגות האפליקציה, מחליפים את Hello ב-55 מוטבע של Hey של הקובץ HelloChat.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.