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

แก้ไขข้อบกพร่องของแอป Google Chat

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

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

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

ในส่วนนี้ คุณจะโต้ตอบกับแอป Chat ที่เรียกใช้ในสภาพแวดล้อมในเครื่อง

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

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

เวิร์กช็อป

Node.js

Python

Java

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

Node.js

node และ npm เวอร์ชันล่าสุดติดตั้งในสภาพแวดล้อมภายในของคุณ
nodemon ที่ติดตั้งเวอร์ชันล่าสุดในสภาพแวดล้อมในเครื่องของคุณ ซึ่งใช้สำหรับจุดประสงค์ในการโหลดซ้ำอัตโนมัติ ดังนี้
```
npm install -g nodemon
```
แอป HTTP Chat ที่กำหนดค่าไว้สำหรับการรับส่งข้อความ คุณสามารถทำตามหัวข้อ ข้อกำหนดเบื้องต้น ตั้งค่าสภาพแวดล้อม และเผยแพร่แอปไปยัง Google Chat ของ คู่มือเริ่มใช้งานฉบับย่อ ความแตกต่างเพียงอย่างเดียวคือคุณต้องตั้งค่าชื่อแอปเป็น Debug App และ URL ของแอปเป็นอะไรก็ได้ เช่น http://example.com
การตั้งค่า IDE ในสภาพแวดล้อมภายในที่แก้ไขข้อบกพร่องได้ เราใช้ฟีเจอร์ Visual Studio Code IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นในคู่มือนี้เพื่อวัตถุประสงค์ในการอธิบายให้เห็นภาพ
Git ติดตั้งแล้วในสภาพแวดล้อมภายในของคุณ
บัญชี ngrok

Python

python3 ติดตั้งเวอร์ชันล่าสุดในสภาพแวดล้อมภายในของคุณ
เวอร์ชันล่าสุดของ pip และ virtualenv ที่ติดตั้งในสภาพแวดล้อมในเครื่องของคุณจะใช้ในการจัดการแพ็กเกจ Python และสภาพแวดล้อมเสมือนตามลำดับ
แอป HTTP Chat ที่กำหนดค่าไว้สำหรับการรับส่งข้อความ คุณสามารถทำตามหัวข้อ ข้อกำหนดเบื้องต้น ตั้งค่าสภาพแวดล้อม และเผยแพร่แอปไปยัง Google Chat ของ คู่มือเริ่มใช้งานฉบับย่อ ความแตกต่างเพียงอย่างเดียวคือคุณต้องตั้งค่าชื่อแอปเป็น Debug App และ URL ของแอปเป็นอะไรก็ได้ เช่น http://example.com
การตั้งค่า IDE ในสภาพแวดล้อมภายในที่แก้ไขข้อบกพร่องได้ เราใช้ฟีเจอร์ Visual Studio Code IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นในคู่มือนี้เพื่อวัตถุประสงค์ในการอธิบายให้เห็นภาพ
Git ติดตั้งแล้วในสภาพแวดล้อมภายในของคุณ
บัญชี ngrok
gcloud ที่ติดตั้งและเริ่มต้นแล้วเวอร์ชันล่าสุดในสภาพแวดล้อมภายในของคุณ

Java

Java SE 11's JDK ติดตั้งเวอร์ชันเสถียรล่าสุดในสภาพแวดล้อมในเครื่องของคุณ
Apache Maven ที่ติดตั้งเวอร์ชันล่าสุดในสภาพแวดล้อมในเครื่องของคุณซึ่งใช้ในการจัดการโปรเจ็กต์ Java
แอป HTTP Chat ที่กำหนดค่าไว้สำหรับการรับส่งข้อความ คุณสามารถทำตามหัวข้อ ข้อกำหนดเบื้องต้น ตั้งค่าสภาพแวดล้อม และเผยแพร่แอปไปยัง Google Chat ของ คู่มือเริ่มใช้งานฉบับย่อ ความแตกต่างเพียงอย่างเดียวคือคุณต้องตั้งค่าชื่อแอปเป็น Debug App และ URL ของแอปเป็นอะไรก็ได้ เช่น http://example.com
การตั้งค่า IDE ในสภาพแวดล้อมภายในที่แก้ไขข้อบกพร่องได้ เราใช้ฟีเจอร์ Visual Studio Code IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นในคู่มือนี้เพื่อวัตถุประสงค์ในการอธิบายให้เห็นภาพ
Git ติดตั้งแล้วในสภาพแวดล้อมภายในของคุณ
บัญชี ngrok
gcloud ที่ติดตั้งและเริ่มต้นแล้วเวอร์ชันล่าสุดในสภาพแวดล้อมภายในของคุณ

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

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

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

กำหนดค่าแอป Chat

กำหนดค่าแอป Chat ให้ส่งคำขอ HTTP ทั้งหมดไปยังโดเมนแบบคงที่

เปิดหน้า Google Chat API ในคอนโซล Google Cloud โดยทำดังนี้

ไปที่หน้า Google Chat API
คลิกแท็บการกำหนดค่า
ไปที่ฟีเจอร์แบบอินเทอร์แอกทีฟ > การตั้งค่าการเชื่อมต่อ และตั้งค่าของช่องข้อความ URL ของแอปเป็น
```
https://NGROK_STATIC_DOMAIN
```
แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok
คลิกบันทึก

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

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

ทดสอบแอป Chat

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

Node.js

โคลนที่เก็บ googleworkspace/google-chat-samples จาก GitHub ไปยังสภาพแวดล้อมในเครื่องของคุณ โดยมีโค้ดของแอปพลิเคชันที่จะเรียกใช้ดังนี้
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้
1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ google-chat-samples/node/basic-app
2. กำหนดค่าแอปพลิเคชันให้โหลดการแก้ไขข้อบกพร่องซ้ำอัตโนมัติโดยเพิ่ม 2 สคริปต์ในไฟล์ package.json ดังนี้
```
{
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}
```
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
ทดสอบแอป Chat ด้วยการส่งข้อความส่วนตัวดังนี้
- เปิด Google Chat
  
  ไปที่ Google Chat
- คลิกแชทใหม่
- ในกล่องโต้ตอบ ให้ป้อนชื่อแอป Chat
- ในผลการค้นหา ให้ค้นหาแอป Chat ให้คลิกเพิ่ม > Chat
- ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hello แล้วกด enter แอป Chat ไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่
ใน Visual Studio Code ในสภาพแวดล้อมภายใน คุณจะเห็นว่าการดำเนินการหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

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

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

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

Python

รับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้สำหรับข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
แทนที่ PROJECT_ID ด้วยรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของแอป
โคลนที่เก็บ googleworkspace/google-chat-samples จาก GitHub ไปยังสภาพแวดล้อมในเครื่องของคุณ โดยมีโค้ดของแอปพลิเคชันดังนี้
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้
1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ google-chat-samples/python/avatar-app
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", "hello_chat",
            "--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
ทดสอบแอป Chat ด้วยการส่งข้อความส่วนตัวดังนี้
- เปิด Google Chat
  
  ไปที่ Google Chat
- คลิกแชทใหม่
- ในกล่องโต้ตอบ ให้ป้อนชื่อแอป Chat
- ในผลการค้นหา ให้ค้นหาแอป Chat ให้คลิกเพิ่ม > Chat
- ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hey! แล้วกด enter แอป Chat ของคุณไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่
ใน Visual Studio Code ในสภาพแวดล้อมภายใน คุณจะเห็นว่าการดำเนินการหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

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

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

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

Java

รับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้สำหรับข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
แทนที่ PROJECT_ID ด้วยรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของแอป
โคลนที่เก็บ googleworkspace/google-chat-samples จาก GitHub ในสภาพแวดล้อมในเครื่องของคุณ โดยมีโค้ดของแอปพลิเคชันดังนี้
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้
1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ google-chat-samples/java/avatar-app
2. กำหนดค่าโปรเจ็กต์ Maven เพื่อเรียกใช้แอปพลิเคชัน HelloChat บนพอร์ต 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>HelloChat</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 ชั่วคราวในไฟล์ HelloChat.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
ทดสอบแอป Chat ด้วยการส่งข้อความส่วนตัวดังนี้
- เปิด Google Chat
  
  ไปที่ Google Chat
- คลิกแชทใหม่
- ในกล่องโต้ตอบ ให้ป้อนชื่อแอป Chat
- ในผลการค้นหา ให้ค้นหาแอป Chat ให้คลิกเพิ่ม > Chat
- ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hey! แล้วกด enter แอป Chat ของคุณไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่
ใน Visual Studio Code ในสภาพแวดล้อมภายใน คุณจะเห็นว่าการดำเนินการหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

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

รูปที่ 7 คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok
หากต้องการเปลี่ยนการทำงานของแอปพลิเคชัน ให้แทนที่ Hello ด้วยHey ในหน้า 55 ของไฟล์ HelloChat.java แล้วรีสตาร์ทกระบวนการ mvnDebug แล้วเปิด Remote Debug Watch อีกครั้งเพื่อแนบเอกสารใหม่อีกครั้งและรีสตาร์ทการแก้ไขข้อบกพร่อง
ในครั้งนี้ แทนที่จะส่งข้อความที่ 2 Hey! ในพื้นที่ทำงาน คุณสามารถเลือกคำขอ HTTP ล่าสุดที่บันทึกในอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่อง แล้วคลิก Replay แอป Chat จะไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่ เช่นเดียวกับครั้งที่แล้ว
เมื่อดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code คุณจะเห็นจากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องว่าแอปพลิเคชันสร้างการตอบกลับด้วยข้อความเวอร์ชันอัปเดต

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

ในส่วนนี้ คุณจะโต้ตอบกับแอป Chat ที่ทำงานในสภาพแวดล้อมระยะไกล

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

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

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

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

ในพื้นที่ข้อความส่วนตัวด้วยแอป Chat ให้พิมพ์สิ่งที่ต้องการทดสอบแล้วกด enter แอป Chat ไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องใน Visual Studio Code IDE

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

ดูวิธีenableบันทึกข้อผิดพลาดและการค้นหา
ดูวิธีแก้ไขข้อผิดพลาดของแอป Google Chat เช่น "แอปไม่ตอบสนอง" "Google Chat API พร้อมให้บริการแก่ผู้ใช้ Google Workspace เท่านั้น" หรือ "ยกเว้นผู้ใช้จากพื้นที่ทำงานได้"
ดูวิธีแก้ไขข้อผิดพลาดของการ์ด เช่น ข้อความในการ์ด กล่องโต้ตอบ หรือตัวอย่างลิงก์ไม่แสดงผลหรือไม่ทำงานตามที่คาดไว้