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

แก้ไขข้อบกพร่องของส่วนเสริม Google Workspace

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

หน้านี้อธิบายวิธีแก้ไขข้อบกพร่องของส่วนเสริม 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=9500",
        "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 บนพอร์ต 9500
  
  รูปที่ 3 แอปพลิเคชันกำลังทำงานและฟังคำขอ HTTP บนพอร์ต 9500
เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณดังนี้
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9500
```
แทนที่ 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 บนพอร์ต 9500 ที่โหลดการเปลี่ยนโค้ดแล้ว
ครั้งนี้แทนที่จะคลิกลิงก์และรอ 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 บนพอร์ต 9500 ในโหมดแก้ไขข้อบกพร่องในสภาพแวดล้อมเสมือน 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", "9500",
            "--debug"
        ]
    }]
}
```
5. เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ HTTP ชั่วคราวในไฟล์ main.py และเริ่มต้นทำงานและแก้ไขข้อบกพร่องโดยเพิ่มการกำหนดค่า Debug Watch ก่อนหน้านี้ ขณะนี้แอปพลิเคชันกำลังทำงานและฟังคำขอ HTTP บนพอร์ต 9500
  
  รูปที่ 3 แอปพลิเคชันกำลังทำงานและฟังคำขอ HTTP บนพอร์ต 9500
เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณดังนี้
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9500
```
แทนที่ 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 บนพอร์ต 9500 ที่โหลดการเปลี่ยนโค้ดแล้ว
ครั้งนี้แทนที่จะคลิกลิงก์และรอ 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 บนพอร์ต 9500 ภายในเครื่องโดยเพิ่มปลั๊กอินบิลด์ของ 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>9500</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 บนพอร์ต 9500
  
  รูปที่ 3 แอปพลิเคชันกำลังทำงานและฟังคำขอ HTTP บนพอร์ต 9500
เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณดังนี้
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9500
```
แทนที่ 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

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

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