בדיקה וניפוי באגים של תוספים ל-Google Workspace מסוג HTTP

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

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

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

בקטע הזה תבצעו פעולות בתוסף של Google Workspace שפועל בסביבה המקומית.

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

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

Node.js

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

    npm install -g nodemon
  • פרויקט ב-Google Cloud. אפשר לפעול לפי השלבים שמפורטים במדריך למתחילים, בקטע דרישות מוקדמות ובקטע הגדרת הסביבה.

  • הקוד של התוסף ל-Google Workspace לצורך ניפוי באגים בסביבה המקומית. במדריך הזה אנחנו משתמשים בתכונות של קישורי תצוגה מקדימה מתוך דוגמת הקוד 3p-resources מהמאגר ב-GitHub‏ googleworkspace/add-ons-samples, לצורך המחשה.

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

  • חשבון ngrok.

  • הגרסה האחרונה של gcloud שמותקנת ומופעלת בסביבה המקומית.

Python

  • הגרסה האחרונה של python3 שמותקנת בסביבה המקומית.
  • הגרסה האחרונה של pip ושל virtualenv מותקנת בסביבה המקומית. הם משמשים לניהול חבילות Python וסביבות וירטואליות, בהתאמה.
  • פרויקט ב-Google Cloud. אפשר לפעול לפי השלבים שמפורטים במדריך למתחילים, בקטע דרישות מוקדמות ובקטע הגדרת הסביבה.
  • הקוד של התוסף ל-Google Workspace לצורך ניפוי באגים בסביבה המקומית. במדריך הזה אנחנו משתמשים בתכונות של קישורי תצוגה מקדימה מתוך דוגמת הקוד 3p-resources מהמאגר ב-GitHub‏ googleworkspace/add-ons-samples, לצורך המחשה.
  • סביבת פיתוח משולבת (IDE) שמוגדרת בסביבה המקומית שלכם ויכולה לנפות באגים. במדריך הזה אנחנו משתמשים ב-Visual Studio Code IDE ובתכונות ניפוי הבאגים שמוגדרות כברירת מחדל, לצורך המחשה.
  • חשבון ngrok.
  • הגרסה האחרונה של gcloud שמותקנת ומופעלת בסביבה המקומית.

Java

איך הופכים את שירות ה-localhost לזמין לכולם

צריך לחבר את הסביבה המקומית לאינטרנט כדי שתוסף Google Workspace יוכל לגשת אליה. האפליקציה ngrok משמשת להפניה אוטומטית של בקשות HTTP שנשלחות לכתובת URL ציבורית לסביבה המקומית.

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

יצירת הפריסה של התוסף והתקנתה

  1. מגדירים את התוסף של Google Workspace כך שיישלח את כל בקשות ה-HTTP שלו לדומיין הסטטי. קובץ הפריסה אמור להיראות כך:

    {
      "oauthScopes": [
        "https://www.googleapis.com/auth/workspace.linkpreview",
        "https://www.googleapis.com/auth/workspace.linkcreate"
      ],
      "addOns": {
        "common": {
          "name": "Manage support cases",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
          "layoutProperties": {
            "primaryColor": "#dd4b39"
          }
        },
        "docs": {
          "linkPreviewTriggers": [
            {
              "runFunction": "NGROK_STATIC_DOMAIN",
              "patterns": [
                {
                  "hostPattern": "example.com",
                  "pathPrefix": "support/cases"
                },
                {
                  "hostPattern": "*.example.com",
                  "pathPrefix": "cases"
                },
                {
                  "hostPattern": "cases.example.com"
                }
              ],
              "labelText": "Support case",
              "localizedLabelText": {
                "es": "Caso de soporte"
              },
              "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
            }
          ],
          "createActionTriggers": [
            {
              "id": "createCase",
              "labelText": "Create support case",
              "localizedLabelText": {
                "es": "Crear caso de soporte"
              },
              "runFunction": "$URL2",
              "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
            }
          ]
        },
        "httpOptions": {
          "granularOauthPermissionSupport": "OPT_IN"
        }
      }
    }
    

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

  2. מגדירים את הפרויקט ב-Google Cloud שבו רוצים להשתמש:

    gcloud config set project PROJECT_ID
  3. מקבלים פרטי כניסה חדשים של משתמשים לשימוש ב-Application Default Credentials:

    gcloud auth application-default login

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

  4. יוצרים את הפריסה:

    gcloud workspace-add-ons deployments create manageSupportCases \
        --deployment-file=DEPLOYMENT_FILE_PATH

    מחליפים את DEPLOYMENT_FILE_PATH בנתיב של קובץ הפריסה.

  5. מתקינים את הפריסה:

    gcloud workspace-add-ons deployments install manageSupportCases
    התוסף של Google Workspace שולח את כל בקשות ה-HTTP שלו לדומיין הסטטי.
    איור 2. התוסף של Google Workspace שולח את כל בקשות ה-HTTP שלו לדומיין הסטטי. השירות הציבורי ngrok משמש כגשר בין התוסף של Google Workspace לבין קוד האפליקציה שפועל באופן מקומי.

בדיקת התוסף ל-Google Workspace

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

Node.js

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

    1. בחלון חדש, פותחים את התיקייה add-ons-samples/node/3p-resources.
    2. כדי להגדיר את האפליקציה להרצה מקומית ולניפוי באגים אוטומטי של טעינה מחדש, מוסיפים קובץ תלות אחד ושני סקריפטים בקובץ package.json:

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions-framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      
    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.
  2. מריצים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

    ממשק האינטרנט שמתארח באפליקציית ngrok ולא מוצגות בו בקשות HTTP.
    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok, שבו לא מוצגות בקשות HTTP.
  4. כדי לבדוק את התוסף ל-Google Workspace, אפשר להציג תצוגה מקדימה של כתובת ה-URL של בקשת התמיכה במסמך Google Docs חדש באמצעות חשבון בדיקה:

    • יוצרים מסמך ב-Google Docs.

      יצירת מסמך ב-Google Docs

    • מקלידים את הקישור הבא ומקישים על enter:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • לוחצים על הקישור.

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

    הביצוע מושהה בנקודת העצירה שהוגדרה.
    איור 6. הביצוע מושהה בנקודת העצירה שהוגדרה.
  6. כשממשיכים את הביצוע מכלי ניפוי הבאגים Visual Studio Code לפני שפג התוקף של התוספים של Google Workspace, התוסף של Google Workspace מציג את התצוגה המקדימה של הקישור ב-Google Docs מהמטמון.

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

    בקשת ה-HTTP מהממשק האינטרנטי שמתארח באפליקציית ngrok.
    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה ngrok.
  8. כדי לשנות את התנהגות האפליקציה, מחליפים את Case ב-Case: בשורה 51 ב-index.js. כששומרים את הקובץ, nodemon טוען מחדש את האפליקציה עם קוד המקור המעודכן באופן אוטומטי, ו-Visual Studio Code נשאר במצב ניפוי באגים.

    האפליקציה פועלת ומקשיבה לבקשות HTTP ביציאה 9000 עם שינוי הקוד שנטען.
    איור 8. האפליקציה פועלת ומקשיבה לבקשות HTTP ביציאה 9000 עם שינוי הקוד שנטען.
  9. הפעם, במקום ללחוץ על הקישור ולהמתין כמה שניות במסמך Google חדש, אפשר לבחור את בקשת ה-HTTP האחרונה שרשומה בממשק האינטרנט שמתארח באפליקציית ngrok בסביבה המקומית שלכם, וללחוץ על Replay. כמו בפעם הקודמת, התוסף ל-Google Workspace לא משיב כי אנחנו מאתרים בו באגים.

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

Python

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

    1. בחלון חדש, פותחים את התיקייה add-ons-samples/python/3p-resources/create_link_preview.
    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", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. מוסיפים נקודת עצירה בקובץ main.py כדי להשהות את עיבוד הבקשה ל-HTTP, ומתחילים להריץ ולפתור באגים עם ההגדרות של Debug Watch שנוספו קודם. האפליקציה פועלת עכשיו ומקשיבה לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומקשיבת לבקשות HTTP ביציאה 9000.
      איור 3. האפליקציה פועלת ומקשיבת לבקשות HTTP ביציאה 9000.
  2. מריצים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

    ממשק האינטרנט שמתארח באפליקציית ngrok ולא מוצגות בו בקשות HTTP.
    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok, שבו לא מוצגות בקשות HTTP.
  4. כדי לבדוק את התוסף ל-Google Workspace, אפשר להציג תצוגה מקדימה של כתובת ה-URL של בקשת התמיכה במסמך Google Docs חדש באמצעות חשבון בדיקה:

    • יוצרים מסמך ב-Google Docs.

      יצירת מסמך ב-Google Docs

    • מקלידים את הקישור הבא ומקישים על enter:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • לוחצים על הקישור.

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

    הביצוע מושהה בנקודת העצירה שהוגדרה.
    איור 6. הביצוע מושהה בנקודת העצירה שהוגדרה.
  6. כשממשיכים את הביצוע מכלי ניפוי הבאגים Visual Studio Code לפני שפג התוקף של התוספים של Google Workspace, התוסף של Google Workspace מציג את התצוגה המקדימה של הקישור ב-Google Docs מהמטמון.

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

    בקשת ה-HTTP מהממשק האינטרנטי שמתארח באפליקציית ngrok.
    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה ngrok.
  8. כדי לשנות את התנהגות האפליקציה, מחליפים את הערך Case בערך Case: בשורה 56 בקובץ main.py. כששומרים את הקובץ, Visual Studio Codeטעון מחדש את האפליקציה באופן אוטומטי עם קוד המקור המעודכן, ונותר במצב ניפוי באגים.

    האפליקציה פועלת ומקשיבה לבקשות HTTP ביציאה 9000 עם שינוי הקוד שנטען.
    איור 8. האפליקציה פועלת ומקשיבה לבקשות HTTP ביציאה 9000 עם שינוי הקוד שנטען.
  9. הפעם, במקום ללחוץ על הקישור ולהמתין כמה שניות במסמך Google חדש, אפשר לבחור את בקשת ה-HTTP האחרונה שרשומה בממשק האינטרנט שמתארח באפליקציית ngrok בסביבה המקומית שלכם, וללחוץ על Replay. כמו בפעם הקודמת, התוסף ל-Google Workspace לא משיב כי אנחנו מאתרים בו באגים.

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

Java

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

    1. בחלון חדש, פותחים את התיקייה add-ons-samples/java/3p-resources.
    2. מגדירים את פרויקט Maven כך שיפעיל את האפליקציה CreateLinkPreview בשקע 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>CreateLinkPreview</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. מוסיפים נקודת עצירה בקובץ CreateLinkPreview.java כדי להשהות את עיבוד הבקשה ל-HTTP, ומתחילים לצרף ולפתור באגים באמצעות ההגדרות של Remote Debug Watch שנוספו קודם. האפליקציה פועלת עכשיו ומקשיבה לבקשות HTTP ביציאה 9000.

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

    ממשק האינטרנט שמתארח באפליקציית ngrok ולא מוצגות בו בקשות HTTP.
    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok, שבו לא מוצגות בקשות HTTP.
  4. כדי לבדוק את התוסף ל-Google Workspace, אפשר להציג תצוגה מקדימה של כתובת ה-URL של בקשת התמיכה במסמך Google Docs חדש באמצעות חשבון בדיקה:

    • יוצרים מסמך ב-Google Docs.

      יצירת מסמך ב-Google Docs

    • מקלידים את הקישור הבא ומקישים על enter:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • לוחצים על הקישור.

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

    הביצוע מושהה בנקודת העצירה שהוגדרה.
    איור 6. הביצוע מושהה בנקודת העצירה שהוגדרה.
  6. כשממשיכים את הביצוע מכלי ניפוי הבאגים Visual Studio Code לפני שפג התוקף של התוספים של Google Workspace, התוסף של Google Workspace מציג את התצוגה המקדימה של הקישור ב-Google Docs מהמטמון.

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

    בקשת ה-HTTP מהממשק האינטרנטי שמתארח באפליקציית ngrok.
    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה ngrok.
  8. כדי לשנות את התנהגות האפליקציה, מחליפים את Case ב-Case: בשורה 78 בקובץ CreateLinkPreview.java, מפעילים מחדש את התהליך mvnDebug ומפעילים מחדש את Remote Debug Watch כדי לצרף מחדש את האפליקציה ולהפעיל מחדש את ניפוי הבאגים.

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

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

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

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

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

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

  • התוסף ל-Google Workspace נפרס ופורסם.
  • האפליקציה פועלת בסביבה המרוחקת עם מנתח הבאגים מופעל ביציאה מסוימת, והיא מוזכרת בתור 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 שנוספה קודם.

    אינטראקציה עם התוסף ל-Google Workspace שהותקן. התוסף של Google Workspace לא משיב כי מתבצע בו ניפוי באגים פעיל בסביבת הפיתוח המשולבת (IDE) של Visual Studio Code.