Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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