หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

ในส่วนนี้ คุณจะโต้ตอบกับส่วนเสริม 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

Java SE 11's JDK เวอร์ชันล่าสุดที่มีความเสถียร ติดตั้งแล้วในเครื่องของคุณ ของคุณ
Apache Maven เวอร์ชันล่าสุด ติดตั้งแล้วในสภาพแวดล้อมในเครื่องของคุณ ซึ่งใช้ในการจัดการโปรเจ็กต์ Java
โปรเจ็กต์ Google Cloud คุณติดตามส่วนต่างๆ ได้ ข้อกำหนดเบื้องต้น และตั้งค่า สภาพแวดล้อม ของคู่มือเริ่มต้นฉบับย่อ
โค้ดของส่วนเสริม Google Workspace สำหรับแก้ไขข้อบกพร่องในเครื่องของคุณ ของคุณ เราใช้ฟีเจอร์ลิงก์ดูตัวอย่างจากตัวอย่างโค้ด 3p-resources จากที่เก็บ GitHub googleworkspace/add-ons-samples ในคู่มือนี้เพื่อวัตถุประสงค์ในการอธิบายให้เห็นภาพ
IDE ที่ตั้งค่าไว้ในสภาพแวดล้อมในเครื่องของคุณซึ่งแก้ไขข้อบกพร่องได้ เราใช้ Visual Studio Code IDE และค่าเริ่มต้น การแก้ไขข้อบกพร่องของฟีเจอร์ใน คู่มือนี้มีไว้เพื่อประกอบการอธิบาย
บัญชี ngrok
gcloud เวอร์ชันล่าสุด ติดตั้งแล้ว และเริ่มต้นใน สภาพแวดล้อมภายใน

ทำให้บริการ localhost พร้อมใช้งานแบบสาธารณะ

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

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

สร้างและติดตั้งการทำให้ส่วนเสริมใช้งานได้

กำหนดค่าส่วนเสริม 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

ตั้งค่าโปรเจ็กต์ Google Cloud เพื่อใช้สิ่งต่อไปนี้
```
gcloud config set project PROJECT_ID
```
ขอรับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้กับค่าเริ่มต้นของแอปพลิเคชัน ข้อมูลเข้าสู่ระบบ:
```
gcloud auth application-default login
```
แทนที่ PROJECT_ID ด้วย รหัสโปรเจ็กต์ สำหรับโปรเจ็กต์ Google Cloud ของแอป
สร้างการทำให้ใช้งานได้
```
gcloud workspace-add-ons deployments create manageSupportCases \
    --deployment-file=DEPLOYMENT_FILE_PATH
```
ให้แทนที่ DEPLOYMENT_FILE_PATH ด้วยเส้นทางของ ไฟล์การทำให้ใช้งานได้
ติดตั้งการทำให้ใช้งานได้
```
gcloud workspace-add-ons deployments install manageSupportCases
```

ส่วนเสริม Google Workspace จะส่งคำขอ HTTP ทั้งหมดไปยัง
โดเมนแบบคงที่

รูปที่ 2 ส่วนเสริม Google Workspace จะส่งคำขอ HTTP ทั้งหมด กับโดเมนแบบคงที่ บริการสาธารณะของ ngrok ทำหน้าที่เป็นสะพานเชื่อมระหว่าง ส่วนเสริม Google Workspace และโค้ดของแอปพลิเคชันที่ทำงาน ในเครื่อง

ทดสอบส่วนเสริมของ Google Workspace

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

Node.js

จาก 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
  
  รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอฟัง HTTP คำขอในพอร์ต 9000
เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ใน บัญชี ngrok ของคุณ ตอนนี้ระบบเปลี่ยนเส้นทางคำขอทั้งหมดไปยังในพื้นที่ และพอร์ตที่แอปพลิเคชันใช้

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

รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคำขอ HTTP
ทดสอบส่วนเสริมของ Google Workspace ด้วยการแสดงตัวอย่าง URL เคสใน เอกสารใน Google เอกสารที่ใช้บัญชีผู้ทดสอบ
- สร้างเอกสารใหม่ใน Google เอกสาร
  
  สร้างเอกสารใหม่ใน Google เอกสาร
- พิมพ์ลิงก์ต่อไปนี้และกด enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- คลิกลิงก์นั้น
ใน Visual Studio Code ในสภาพแวดล้อมภายในของคุณ คุณจะเห็นว่า การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

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

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

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

Python

จาก 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
  
  รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอฟัง HTTP คำขอในพอร์ต 9000
เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ใน บัญชี ngrok ของคุณ ตอนนี้ระบบเปลี่ยนเส้นทางคำขอทั้งหมดไปยังในพื้นที่ และพอร์ตที่แอปพลิเคชันใช้

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

รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคำขอ HTTP
ทดสอบส่วนเสริมของ Google Workspace ด้วยการแสดงตัวอย่าง URL เคสใน เอกสารใน Google เอกสารที่ใช้บัญชีผู้ทดสอบ
- สร้างเอกสารใหม่ใน Google เอกสาร
  
  สร้างเอกสารใหม่ใน Google เอกสาร
- พิมพ์ลิงก์ต่อไปนี้และกด enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- คลิกลิงก์นั้น
ใน Visual Studio Code ในสภาพแวดล้อมภายในของคุณ คุณจะเห็นว่า การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

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

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

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

Java

จาก 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
  
  รูปที่ 3 แอปพลิเคชันกำลังทำงานและรอฟัง HTTP คำขอในพอร์ต 9000
เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ใน บัญชี ngrok ของคุณ ตอนนี้ระบบเปลี่ยนเส้นทางคำขอทั้งหมดไปยังในพื้นที่ และพอร์ตที่แอปพลิเคชันใช้

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

รูปที่ 5 อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคำขอ HTTP
ทดสอบส่วนเสริมของ Google Workspace ด้วยการแสดงตัวอย่าง URL เคสใน เอกสารใน Google เอกสารที่ใช้บัญชีผู้ทดสอบ
- สร้างเอกสารใหม่ใน Google เอกสาร
  
  สร้างเอกสารใหม่ใน Google เอกสาร
- พิมพ์ลิงก์ต่อไปนี้และกด enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- คลิกลิงก์นั้น
ใน Visual Studio Code ในสภาพแวดล้อมภายในของคุณ คุณจะเห็นว่า การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

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

รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย ngrok แอปพลิเคชัน
หากต้องการเปลี่ยนการทำงานของแอปพลิเคชัน ให้แทนที่ Case ด้วย Case: ในบรรทัด 78 ของไฟล์ CreateLinkPreview.java รีสตาร์ท mvnDebug ประมวลผล และเปิด Remote Debug Watch อีกครั้งเพื่อแนบและรีสตาร์ท การแก้ไขข้อบกพร่อง
แทนที่จะต้องคลิกลิงก์แล้วรอ 2-3 วินาที เอกสารใหม่ใน Google เอกสาร คุณสามารถเลือกคำขอ HTTP รายการสุดท้ายที่บันทึกในเว็บได้ อินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ และคลิก Replay เช่นเดียวกับครั้งที่แล้ว ซึ่งเป็นส่วนเสริมของ Google Workspace ไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่
เมื่อคุณดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ 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 ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้ ดังต่อไปนี้:

ในหน้าต่างใหม่ ให้เปิดซอร์สโค้ดของแอป

สร้างไฟล์ .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 ด้วยพอร์ตแก้ไขข้อบกพร่องใน สภาพแวดล้อมภายใน

เพิ่มเบรกพอยท์ในซอร์สโค้ดของแอปที่จะหยุดคำขอ HTTP ชั่วคราว การประมวลผลข้อมูล และเริ่มทำงานและ การแก้ไขข้อบกพร่องด้วยการกำหนดค่า Debug Remote ที่เพิ่มไว้ก่อนหน้านี้

โต้ตอบกับส่วนเสริม Google Workspace ที่ติดตั้งไว้ บัญชี ส่วนเสริมของ Google Workspace ไม่ตอบกลับเนื่องจากมีการใช้งานอยู่ แก้ไขข้อบกพร่องแล้ว ใน Visual Studio Code IDE

หัวข้อที่เกี่ยวข้อง

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