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

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

ในฐานะนักพัฒนาส่วนเสริมของ 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"
        }
      ]
    },
    "httpOptions": {
      "granularOauthPermissionSupport": "OPT_IN"
    }
  }
}

แทนที่ 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
```
รูปที่ 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. กำหนดค่าแอปพลิเคชันสำหรับการเรียกใช้ในเครื่องและการแก้ไขข้อบกพร่องแบบโหลดซ้ำอัตโนมัติโดยเพิ่มข้อกำหนด 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 ทำงานอยู่และเปลี่ยนเส้นทาง
แอปพลิเคชันngrok จะเริ่มต้นเว็บอินเทอร์เฟซใน localhost ด้วย คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดในเบราว์เซอร์

รูปที่ 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. ติดตั้งข้อกําหนดของโปรเจ็กต์ทั้งหมดโดยใช้ 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 ทำงานอยู่และเปลี่ยนเส้นทาง
ngrok แอปพลิเคชันจะเริ่มต้นเว็บอินเทอร์เฟซใน localhost ด้วย ซึ่งคุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดแอปพลิเคชันในเบราว์เซอร์

รูปที่ 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 ในเครื่องโดยเพิ่มปลั๊กอินการสร้างเฟรมเวิร์ก Cloud Functions 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 ทำงานอยู่และเปลี่ยนเส้นทาง
ngrok แอปพลิเคชันจะเริ่มต้นเว็บอินเทอร์เฟซใน localhost ด้วย ซึ่งคุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดแอปพลิเคชันในเบราว์เซอร์

รูปที่ 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 ที่ทำงานในสภาพแวดล้อมระยะไกล

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

ติดตั้งและใช้งานส่วนเสริม 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

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

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