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