ในฐานะนักพัฒนาซอฟต์แวร์ส่วนเสริมของ 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
จากที่เก็บ GitHubgoogleworkspace/add-ons-samples
ในคู่มือนี้เพื่อวัตถุประสงค์ในการอธิบายให้เห็นภาพการตั้งค่า IDE ในสภาพแวดล้อมภายในที่แก้ไขข้อบกพร่องได้ เราใช้ฟีเจอร์
Visual Studio Code
IDE และฟีเจอร์การแก้ไขข้อบกพร่องเริ่มต้นในคู่มือนี้เพื่อวัตถุประสงค์ในการอธิบายให้เห็นภาพบัญชี
ngrok
gcloud
ที่ติดตั้งและเริ่มต้นแล้วเวอร์ชันล่าสุดในสภาพแวดล้อมภายในของคุณ
Python
python3
ติดตั้งเวอร์ชันล่าสุดในสภาพแวดล้อมภายในของคุณ- เวอร์ชันล่าสุดของ
pip
และvirtualenv
ที่ติดตั้งในสภาพแวดล้อมในเครื่องของคุณจะใช้ในการจัดการแพ็กเกจ Python และสภาพแวดล้อมเสมือนตามลำดับ - โปรเจ็กต์ Google Cloud คุณสามารถทำตามส่วน ข้อกำหนดเบื้องต้น และตั้งค่าสภาพแวดล้อม ของคู่มือเริ่มใช้งานฉบับย่อ
- โค้ดของส่วนเสริม Google Workspace ที่จะแก้ไขข้อบกพร่องในสภาพแวดล้อมในเครื่อง เราใช้ฟีเจอร์ลิงก์แสดงตัวอย่างจากตัวอย่างโค้ด
3p-resources
จากที่เก็บ GitHubgoogleworkspace/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
จากที่เก็บ GitHubgoogleworkspace/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
รูปที่ 2 ส่วนเสริม Google Workspace จะส่งคำขอ HTTP ทั้งหมดไปยังโดเมนแบบคงที่ บริการสาธารณะ ngrok
ทำหน้าที่เป็นสะพานเชื่อมระหว่างส่วนเสริม Google Workspace และโค้ดแอปพลิเคชันที่ทำงานในเครื่อง
ทดสอบส่วนเสริมของ Google Workspace
คุณสามารถติดตั้งใช้งาน ทดสอบ แก้ไขข้อบกพร่อง และโหลดส่วนเสริม Google Workspace ซ้ำโดยอัตโนมัติในเครื่องได้
Node.js
จาก
Visual Studio Code
IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้- ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์
add-ons-samples/node/3p-resources
กำหนดค่าแอปพลิเคชันสำหรับการเรียกใช้ในเครื่องและโหลดการแก้ไขข้อบกพร่องซ้ำอัตโนมัติโดยเพิ่มทรัพยากร Dependency 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" } ... }
จากไดเรกทอรีราก ให้ติดตั้งแอปพลิเคชันด้วยคำสั่งต่อไปนี้
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ทดสอบส่วนเสริมของ Google Workspace โดยดูตัวอย่าง URL ของกรณีใน 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
ที่โหลดการเปลี่ยนโค้ดแล้วครั้งนี้แทนที่จะคลิกลิงก์และรอ 2-3 วินาทีใน Google เอกสารใหม่ คุณสามารถเลือกคำขอ HTTP ล่าสุดที่บันทึกอยู่ในอินเทอร์เฟซเว็บซึ่งโฮสต์โดยแอปพลิเคชัน
ngrok
ในสภาพแวดล้อมในเครื่อง แล้วคลิกReplay
เช่นเดียวกับครั้งที่แล้ว ส่วนเสริม Google Workspace ของคุณไม่ได้ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่เมื่อดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ
Visual Studio Code
คุณจะเห็นจากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชันngrok
ในสภาพแวดล้อมในเครื่องว่าแอปพลิเคชันสร้างการตอบสนองด้วยการ์ดตัวอย่างเวอร์ชันอัปเดต
Python
จาก
Visual Studio Code
IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้- ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์
add-ons-samples/python/3p-resources/create_link_preview
สร้างสภาพแวดล้อมเสมือนใหม่สำหรับ 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", "create_link_preview", "--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ทดสอบส่วนเสริมของ Google Workspace โดยดูตัวอย่าง URL ของกรณีใน 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
ที่โหลดการเปลี่ยนโค้ดแล้วครั้งนี้แทนที่จะคลิกลิงก์และรอ 2-3 วินาทีใน Google เอกสารใหม่ คุณสามารถเลือกคำขอ HTTP ล่าสุดที่บันทึกอยู่ในอินเทอร์เฟซเว็บซึ่งโฮสต์โดยแอปพลิเคชัน
ngrok
ในสภาพแวดล้อมในเครื่อง แล้วคลิกReplay
เช่นเดียวกับครั้งที่แล้ว ส่วนเสริม Google Workspace ของคุณไม่ได้ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่เมื่อดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ
Visual Studio Code
คุณจะเห็นจากอินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชันngrok
ในสภาพแวดล้อมในเครื่องว่าแอปพลิเคชันสร้างการตอบสนองด้วยการ์ดตัวอย่างเวอร์ชันอัปเดต
Java
จาก
Visual Studio Code
IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้- ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์
add-ons-samples/java/3p-resources
กำหนดค่าโปรเจ็กต์ Maven เพื่อเรียกใช้แอปพลิเคชัน
CreateLinkPreview
บนพอร์ต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>CreateLinkPreview</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 ชั่วคราวในไฟล์
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 เอกสาร
พิมพ์ลิงก์ต่อไปนี้และกด
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
หัวข้อที่เกี่ยวข้อง
ดูวิธีค้นหาบันทึกข้อผิดพลาด