ในฐานะนักพัฒนาแอป 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 ของคุณ คลิกเพิ่ม > แชท
ในพื้นที่ข้อความส่วนตัว ให้พิมพ์
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
ที่โหลดการเปลี่ยนโค้ดแล้วครั้งนี้ คุณสามารถเลือกคำขอ HTTP ล่าสุดที่บันทึกในเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน
ngrok
ในสภาพแวดล้อมในเครื่องของคุณได้แทนที่จะส่งข้อความที่ 2Hello
ในพื้นที่ทำงาน แล้วคลิก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 ของคุณ คลิกเพิ่ม > แชท
ในพื้นที่ข้อความส่วนตัว ให้พิมพ์
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
ที่โหลดการเปลี่ยนโค้ดแล้วครั้งนี้ คุณสามารถเลือกคำขอ HTTP ล่าสุดที่บันทึกในเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน
ngrok
ในสภาพแวดล้อมในเครื่องของคุณได้แทนที่จะส่งข้อความที่ 2Hey!
ในพื้นที่ทำงาน แล้วคลิก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 Functionsfunction-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 ของคุณ คลิกเพิ่ม > แชท
ในพื้นที่ข้อความส่วนตัว ให้พิมพ์
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
อีกครั้งเพื่อแนบและเริ่มต้นการแก้ไขข้อบกพร่องอีกครั้งครั้งนี้ คุณสามารถเลือกคำขอ HTTP ล่าสุดที่บันทึกในเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน
ngrok
ในสภาพแวดล้อมในเครื่องของคุณได้แทนที่จะส่งข้อความที่ 2Hey!
ในพื้นที่ทำงาน แล้วคลิก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 เท่านั้น" หรือ "ระบบจะยกเว้นผู้ใช้จากพื้นที่ทำงานได้"
- ดูวิธีแก้ไขข้อผิดพลาดของการ์ด เช่น ข้อความในการ์ด กล่องโต้ตอบ หรือตัวอย่างลิงก์ไม่แสดงผลหรือไม่ทำงานตามที่คาดไว้