ในฐานะนักพัฒนาแอป 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 โดยทำดังนี้
คลิกแท็บการกำหนดค่า
ไปที่ฟีเจอร์แบบอินเทอร์แอกทีฟ > การตั้งค่าการเชื่อมต่อ และตั้งค่าของช่องข้อความ URL ของแอปเป็น
https://NGROK_STATIC_DOMAIN
แทนที่
NGROK_STATIC_DOMAIN
ด้วยโดเมนแบบคงที่ในบัญชีngrok
คลิกบันทึก
รูปที่ 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 ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้- ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์
google-chat-samples/node/basic-app
กำหนดค่าแอปพลิเคชันให้โหลดการแก้ไขข้อบกพร่องซ้ำอัตโนมัติโดยเพิ่ม 2 สคริปต์ในไฟล์
package.json
ดังนี้{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
จากไดเรกทอรีราก ให้ติดตั้งแอปพลิเคชันด้วยคำสั่งต่อไปนี้
npm install
สร้างและกำหนดค่าการเปิดตัวชื่อ
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"] }] }
เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ 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
คลิกแชทใหม่
ในกล่องโต้ตอบ ให้ป้อนชื่อแอป 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 ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้- ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์
google-chat-samples/python/avatar-app
สร้างสภาพแวดล้อมเสมือนใหม่สำหรับ Python
env
และเปิดใช้งานดังนี้virtualenv env
source env/bin/activate
ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์ทั้งหมดโดยใช้
pip
ในสภาพแวดล้อมเสมือน:pip install -r requirements.txt
สร้างไฟล์
.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" ] }] }
เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ 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
คลิกแชทใหม่
ในกล่องโต้ตอบ ให้ป้อนชื่อแอป 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 ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้- ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์
google-chat-samples/java/avatar-app
กำหนดค่าโปรเจ็กต์ Maven เพื่อเรียกใช้แอปพลิเคชัน
HelloChat
บนพอร์ต9000
ภายในเครื่องโดยเพิ่มปลั๊กอิน Cloud Functions Frameworkfunction-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> ...
ตอนนี้คุณสามารถเปิดใช้งานในเครื่องในโหมดแก้ไขข้อบกพร่องได้แล้ว โดยทำดังนี้
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
สร้างไฟล์
.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 }] }
เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ 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
คลิกแชทใหม่
ในกล่องโต้ตอบ ให้ป้อนชื่อแอป 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 เท่านั้น" หรือ "ยกเว้นผู้ใช้จากพื้นที่ทำงานได้"
- ดูวิธีแก้ไขข้อผิดพลาดของการ์ด เช่น ข้อความในการ์ด กล่องโต้ตอบ หรือตัวอย่างลิงก์ไม่แสดงผลหรือไม่ทำงานตามที่คาดไว้