ทดสอบและแก้ไขข้อบกพร่องส่วนเสริม HTTP ของ Google Workspace

ในฐานะนักพัฒนาส่วนเสริมของ Google Workspace คุณอาจต้องแก้ไขข้อบกพร่องของโค้ด ทดสอบการเปลี่ยนแปลงหรือแก้ปัญหาที่ซับซ้อน การแก้ไขข้อบกพร่องส่วนเสริมของ Google Workspace สามารถทำได้หลายวิธี ขึ้นอยู่กับสถาปัตยกรรมของแอป การทำงานของแอป วิธีการนำแอปไปใช้ และค่ากำหนดของคุณ

หน้านี้จะอธิบายวิธีแก้ไขข้อบกพร่องของส่วนเสริม HTTP สำหรับ Google Workspace โดยใช้ ngrok ซึ่งเป็นแพลตฟอร์มขาเข้าแบบรวมที่ใช้ทดสอบในเครื่องได้ สภาพแวดล้อมในการพัฒนาซอฟต์แวร์ ในคู่มือนี้ คุณจะได้ทดสอบการเปลี่ยนแปลงโค้ดใน สภาพแวดล้อมการทำงานและแก้ปัญหาในสภาพแวดล้อมระยะไกล

แก้ไขข้อบกพร่องจากสภาพแวดล้อมการพัฒนาในเครื่อง

ในส่วนนี้ คุณจะโต้ตอบกับส่วนเสริม Google Workspace ที่ ดำเนินการในสภาพแวดล้อมในเครื่องของคุณ

แก้ไขข้อบกพร่องจากการพัฒนาในเครื่อง
สภาพแวดล้อม

รูปที่ 1 แก้ไขข้อบกพร่องในสภาพแวดล้อมการพัฒนาภายใน

ข้อกำหนดเบื้องต้น

Node.js

Python

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"
            }
          ]
        }
      }
    }
    

    แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ใน บัญชี ngrok

  2. ตั้งค่าโปรเจ็กต์ Google Cloud เพื่อใช้สิ่งต่อไปนี้

    gcloud config set project PROJECT_ID
    
  3. ขอรับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้กับค่าเริ่มต้นของแอปพลิเคชัน ข้อมูลเข้าสู่ระบบ:

    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. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมในเครื่องของคุณ ให้ทำดังนี้

    1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ add-ons-samples/node/3p-resources
    2. กำหนดค่าแอปพลิเคชันสำหรับการเรียกใช้ในเครื่องและโหลดการแก้ไขข้อบกพร่องซ้ำอัตโนมัติโดย การเพิ่มทรัพยากร Dependency 1 รายการและสคริปต์ 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. เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ HTTP ชั่วคราวใน index.js ไฟล์ และเริ่มทำงานและ การแก้ไขข้อบกพร่องด้วยฟังก์ชัน เพิ่มการกำหนดค่า 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 เอกสารที่ใช้บัญชีผู้ทดสอบ

  5. ใน Visual Studio Code ในสภาพแวดล้อมภายในของคุณ คุณจะเห็นว่า การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

    การดำเนินการหยุดชั่วคราวที่เบรกพอยท์ที่
ตั้งค่า

    รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

  6. เมื่อคุณดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code ก่อนที่ส่วนเสริมของ Google Workspace จะหมดเวลาใช้งานส่วนเสริมของ Google Workspace แสดงตัวอย่างลิงก์ใน Google เอกสารจากแคช

  7. คุณสามารถตรวจสอบบันทึกคำขอ HTTP และการตอบกลับได้จากอินเทอร์เฟซเว็บ โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ

    คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย "ngrok"
แอปพลิเคชัน

    รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย ngrok แอปพลิเคชัน

  8. หากต้องการเปลี่ยนการทำงานของแอปพลิเคชัน ให้แทนที่ Case ด้วย Case: ในบรรทัด 51 ของ index.js เมื่อคุณบันทึกไฟล์ nodemon โดยอัตโนมัติ โหลดแอปพลิเคชันซ้ำด้วยซอร์สโค้ดที่อัปเดตแล้วและ Visual Studio Code ยังคงอยู่ในโหมดแก้ไขข้อบกพร่อง

    แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต
"9000" พร้อมการเปลี่ยนรหัส
โหลดแล้ว

    รูปที่ 8 แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต 9000 ที่โหลดการเปลี่ยนโค้ดแล้ว

  9. แทนที่จะต้องคลิกลิงก์แล้วรอ 2-3 วินาที เอกสารใหม่ใน Google เอกสาร คุณสามารถเลือกคำขอ HTTP รายการสุดท้ายที่บันทึกในเว็บได้ อินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ และคลิก Replay เช่นเดียวกับครั้งที่แล้ว ซึ่งเป็นส่วนเสริมของ Google Workspace ไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่

  10. เมื่อคุณดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code คุณจะเห็นได้จากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ใน สภาพแวดล้อมในเครื่องของคุณที่แอปพลิเคชันสร้างการตอบสนองด้วย การ์ดตัวอย่าง ที่อัปเดตแล้ว

Python

  1. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมในเครื่องของคุณ ให้ทำดังนี้

    1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ add-ons-samples/python/3p-resources/create_link_preview
    2. สร้างสภาพแวดล้อมเสมือนใหม่สำหรับ Python env และเปิดใช้งาน:

      virtualenv env
      source env/bin/activate
      
    3. ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์ทั้งหมดโดยใช้ 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. เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ HTTP ชั่วคราวใน main.py ไฟล์ และเริ่มทำงานและ การแก้ไขข้อบกพร่องด้วยฟังก์ชัน เพิ่มการกำหนดค่า 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 เอกสารที่ใช้บัญชีผู้ทดสอบ

  5. ใน Visual Studio Code ในสภาพแวดล้อมภายในของคุณ คุณจะเห็นว่า การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

    การดำเนินการหยุดชั่วคราวที่เบรกพอยท์ที่
ตั้งค่า

    รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

  6. เมื่อคุณดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code ก่อนที่ส่วนเสริมของ Google Workspace จะหมดเวลาใช้งานส่วนเสริมของ Google Workspace แสดงตัวอย่างลิงก์ใน Google เอกสารจากแคช

  7. คุณสามารถตรวจสอบบันทึกคำขอ HTTP และการตอบกลับได้จากอินเทอร์เฟซเว็บ โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ

    คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย "ngrok"
แอปพลิเคชัน

    รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย ngrok แอปพลิเคชัน

  8. หากต้องการเปลี่ยนการทำงานของแอปพลิเคชัน ให้แทนที่ Case ด้วย Case: ในบรรทัด 56 ของไฟล์ main.py เมื่อคุณบันทึกไฟล์ Visual Studio Code จะโหลดแอปพลิเคชันซ้ำโดยอัตโนมัติด้วยซอร์สโค้ดที่อัปเดตแล้วและ จะยังคงอยู่ในโหมดแก้ไขข้อบกพร่อง

    แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต
"9000" พร้อมการเปลี่ยนรหัส
โหลดแล้ว

    รูปที่ 8 แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต 9000 ที่โหลดการเปลี่ยนโค้ดแล้ว

  9. แทนที่จะต้องคลิกลิงก์แล้วรอ 2-3 วินาที เอกสารใหม่ใน Google เอกสาร คุณสามารถเลือกคำขอ HTTP รายการสุดท้ายที่บันทึกในเว็บได้ อินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ และคลิก Replay เช่นเดียวกับครั้งที่แล้ว ซึ่งเป็นส่วนเสริมของ Google Workspace ไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่

  10. เมื่อคุณดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code คุณจะเห็นได้จากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ใน สภาพแวดล้อมในเครื่องของคุณที่แอปพลิเคชันสร้างการตอบสนองด้วย การ์ดแสดงตัวอย่างเวอร์ชันอัปเดต

Java

  1. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมในเครื่องของคุณ ให้ทำดังนี้

    1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ add-ons-samples/java/3p-resources
    2. กำหนดค่าโปรเจ็กต์ Maven เพื่อเรียกใช้แอปพลิเคชัน CreateLinkPreview บนพอร์ต 9000 ภายในเครื่องโดยการเพิ่มระบบคลาวด์ ปลั๊กอินบิลด์ของเฟรมเวิร์กฟังก์ชัน 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. เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ HTTP ชั่วคราวใน CreateLinkPreview.java ไฟล์ แล้ว เริ่มการแนบ และ การแก้ไขข้อบกพร่องด้วยฟังก์ชัน เพิ่มการกำหนดค่า Remote Debug Watch ก่อนหน้าแล้ว แอปพลิเคชัน กำลังเรียกใช้และรอฟังคำขอ HTTP บนพอร์ต 9000

      แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนอุปกรณ์
พอร์ต &quot;9000&quot;

      รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอฟัง HTTP คำขอในพอร์ต 9000

  2. เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ใน บัญชี ngrok ของคุณ ตอนนี้ระบบเปลี่ยนเส้นทางคำขอทั้งหมดไปยังในพื้นที่ และพอร์ตที่แอปพลิเคชันใช้

    เทอร์มินัลที่เซิร์ฟเวอร์ &quot;ngrok&quot; ทำงานอยู่และ
การเปลี่ยนเส้นทาง

    รูปที่ 4 เทอร์มินัลที่มีเซิร์ฟเวอร์ ngrok กำลังทำงานและเปลี่ยนเส้นทาง

  3. อินเทอร์เฟซเว็บก็เริ่มต้นบน localhost ของคุณโดย ngrok คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยการเปิดในเบราว์เซอร์

    อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน &quot;ngrok&quot; ไม่แสดง HTTP
คำขอ

    รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคำขอ HTTP

  4. ทดสอบส่วนเสริมของ Google Workspace ด้วยการแสดงตัวอย่าง URL เคสใน เอกสารใน Google เอกสารที่ใช้บัญชีผู้ทดสอบ

  5. ใน Visual Studio Code ในสภาพแวดล้อมภายในของคุณ คุณจะเห็นว่า การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

    การดำเนินการหยุดชั่วคราวที่เบรกพอยท์ที่
ตั้งค่า

    รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

  6. เมื่อคุณดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code ก่อนที่ส่วนเสริมของ Google Workspace จะหมดเวลาใช้งานส่วนเสริมของ Google Workspace แสดงตัวอย่างลิงก์ใน Google เอกสารจากแคช

  7. คุณสามารถตรวจสอบบันทึกคำขอ HTTP และการตอบกลับได้จากอินเทอร์เฟซเว็บ โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ

    คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย &quot;ngrok&quot;
แอปพลิเคชัน

    รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย ngrok แอปพลิเคชัน

  8. หากต้องการเปลี่ยนการทำงานของแอปพลิเคชัน ให้แทนที่ Case ด้วย Case: ในบรรทัด 78 ของไฟล์ CreateLinkPreview.java รีสตาร์ท mvnDebug ประมวลผล และเปิด Remote Debug Watch อีกครั้งเพื่อแนบและรีสตาร์ท การแก้ไขข้อบกพร่อง

  9. แทนที่จะต้องคลิกลิงก์แล้วรอ 2-3 วินาที เอกสารใหม่ใน 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: พอร์ตแก้ไขข้อบกพร่องในรีโมต ของคุณ

ตอนนี้พอร์ตแก้ไขข้อบกพร่องในสภาพแวดล้อมในเครื่องของคุณลิงก์กับพอร์ตแก้ไขข้อบกพร่องใน สภาพแวดล้อมการทำงานทางไกล

เริ่มแก้ไขข้อบกพร่อง

จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้ ดังต่อไปนี้:

  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 ไม่ตอบกลับเนื่องจากมีการใช้งานอยู่ แก้ไขข้อบกพร่องแล้ว ใน Visual Studio Code IDE

ดูวิธีค้นหาบันทึกข้อผิดพลาด