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

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

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

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

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

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

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

סדנה

Node.js

Python

Java

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

Node.js

  • הגרסאות האחרונות של node ו-npm שמותקנות בסביבה המקומית.
  • הגרסה האחרונה של nodemon שמותקנת בסביבה המקומית, והיא משמשת למטרות של טעינה מחדש אוטומטית:

    npm install -g nodemon
  • אפליקציית HTTP Chat שמוגדרת לשליחת הודעות. אפשר לפעול לפי ההוראות בקטע דרישות מוקדמות, בקטע הגדרת הסביבה ובקטע פרסום האפליקציה ב-Google Chat במדריך למתחילים. ההבדלים היחידים הם שצריך להגדיר את שם האפליקציה כ-Debug App ואת כתובת ה-URL של נקודת הקצה מסוג HTTP כ-http://example.com, למשל.

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

  • Git מותקן בסביבה המקומית.

  • חשבון ngrok.

Python

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

Java

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

    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. בסביבת הפיתוח המשולבת (IDE) של 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. מוסיפים נקודת עצירה בקובץ index.js כדי להשהות את עיבוד הבקשה ל-HTTP, ומתחילים להריץ ולפתור באגים עם ההגדרות של 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. ממשק אינטרנט מופעל גם ב-localhost על ידי האפליקציה ngrok. אפשר לעקוב אחרי כל הפעילויות על ידי פתיחת הממשק בדפדפן.

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

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

  5. כדי לבדוק את אפליקציית Chat, שולחים לה הודעה ישירה:

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

      כניסה ל-Google Chat

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

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

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

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

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

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

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

  7. כשממשיכים את הביצוע מכלי ניפוי הבאגים של Visual Studio Code לפני ש-Google Chat מפסיק את הזמן הקצוב, אפליקציית 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 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. בסביבת הפיתוח המשולבת (IDE) של 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. מוסיפים נקודת עצירה בקובץ main.py כדי להשהות את עיבוד הבקשה ל-HTTP, ומתחילים להריץ ולפתור באגים עם ההגדרות של 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. ממשק אינטרנט מופעל גם ב-localhost על ידי האפליקציה ngrok. אפשר לעקוב אחרי כל הפעילויות על ידי פתיחת הממשק בדפדפן.

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

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

  6. כדי לבדוק את אפליקציית Chat, שולחים לה הודעה ישירה:

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

      כניסה ל-Google Chat

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

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

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

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

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

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

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

  8. כשממשיכים את הביצוע מכלי ניפוי הבאגים של Visual Studio Code לפני שחל הזמן הקצוב לתפוגה ב-Google Chat, אפליקציית 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 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. בסביבת הפיתוח המשולבת (IDE) של Visual Studio Code שמותקנת בסביבה המקומית, מבצעים את הפעולות הבאות:

    1. בחלון חדש, פותחים את התיקייה google-chat-samples/java/avatar-app.
    2. כדי להריץ את האפליקציה App ביציאה 9000 באופן מקומי, מוסיפים את הפלאגין function-maven-plugin של Cloud Functions Framework ל-build בקובץ 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. מוסיפים נקודת עצירה בקובץ App.java כדי להשהות את עיבוד הבקשה ל-HTTP, ומתחילים לצרף ולפתור באגים באמצעות ההגדרות של Remote 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. ממשק אינטרנט מופעל גם ב-localhost על ידי האפליקציה ngrok. אפשר לעקוב אחרי כל הפעילויות על ידי פתיחת הממשק בדפדפן.

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

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

  6. כדי לבדוק את אפליקציית Chat, שולחים לה הודעה ישירה:

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

      כניסה ל-Google Chat

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

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

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

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

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

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

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

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

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

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

    איור 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: יציאת ניפוי הבאגים בסביבה המרוחקת.

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

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

בסביבת הפיתוח המשולבת (IDE) של 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. מוסיפים נקודת עצירה בקוד המקור של האפליקציה שמשהה את עיבוד הבקשה ל-HTTP, ומתחילים להריץ ולפתור באגים עם ההגדרה של Debug Remote שנוספה קודם.

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