หน้านี้ได้รับการแปลโดย 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"
        }
      ]
    }
  }
}

แทนที่ 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. กำหนดค่าแอปพลิเคชันสำหรับการเรียกใช้แบบในเครื่องและการแก้ไขข้อบกพร่องแบบโหลดซ้ำอัตโนมัติโดยเพิ่มข้อกำหนด 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 ที่ทำงานในสภาพแวดล้อมระยะไกล

แก้ไขข้อบกพร่องจากสภาพแวดล้อมระยะไกล

รูปที่ 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

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

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