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

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

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

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

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

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

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

เวิร์กช็อป

Node.js

Python

Java

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

Node.js

Python

Java

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

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

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

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

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

  1. เปิดหน้า Google Chat API ใน Google Cloud Console โดยทำดังนี้

    ไปที่หน้า Google Chat API

  2. คลิกแท็บการกําหนดค่า

  3. ไปที่ฟีเจอร์อินเทอร์แอกทีฟ > การตั้งค่าการเชื่อมต่อ แล้วตั้งค่าช่องข้อความ URL ปลายทางของ HTTP เป็น

    https://NGROK_STATIC_DOMAIN

    แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok

  4. คลิกบันทึก

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

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

ทดสอบแอป Chat

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

Node.js

  1. โคลนที่เก็บ googleworkspace/google-chat-samples จาก GitHub ไปยังสภาพแวดล้อมในเครื่องของคุณ โดยที่เก็บดังกล่าวมีโค้ดของแอปพลิเคชันที่จะเรียกใช้

    git clone https://github.com/googleworkspace/google-chat-samples.git

  2. จาก 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

      แอปพลิเคชันทำงานอยู่และรอรับคําขอ HTTP ในพอร์ต `9000`

      รูปที่ 3 แอปพลิเคชันทำงานอยู่และรอรับคำขอ HTTP ในพอร์ต 9000

  3. เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok ตอนนี้ระบบจะเปลี่ยนเส้นทางคำขอทั้งหมดไปยังสภาพแวดล้อมในท้องถิ่นและพอร์ตที่แอปพลิเคชันใช้

    เทอร์มินัลที่มีเซิร์ฟเวอร์ `ngrok` ทำงานอยู่และเปลี่ยนเส้นทาง

    รูปที่ 4 เทอร์มินัลที่มีเซิร์ฟเวอร์ ngrok ทำงานอยู่และเปลี่ยนเส้นทาง

  4. ngrok แอปพลิเคชันจะเริ่มต้นเว็บอินเทอร์เฟซใน localhost ด้วย ซึ่งคุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดแอปพลิเคชันในเบราว์เซอร์

    อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน `ngrok` ซึ่งไม่แสดงคําขอ HTTP

    รูปที่ 5 เว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคําขอ HTTP

  5. ทดสอบแอป Chat โดยส่งข้อความโดยตรง

    • เปิด Google Chat

      ไปที่ Google Chat

    • คลิกแชทใหม่

    • ในกล่องโต้ตอบ ให้ป้อนชื่อแอปแชท

    • ในผลการค้นหา ให้ค้นหาแอป Chat แล้วคลิกเพิ่ม > แชท

    • ในพื้นที่ข้อความส่วนตัว ให้พิมพ์ Hello แล้วกด enter แอปแชทไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่

  6. ใน Visual Studio Code ในสภาพแวดล้อมในเครื่อง คุณจะเห็นว่าการดำเนินการหยุดชั่วคราวตามเบรกพอยท์ที่ตั้งค่าไว้

    การดำเนินการจะหยุดชั่วคราวที่เบรกพอยต์ที่ตั้งไว้

    รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่เบรกพอยต์ที่ตั้งไว้

  7. เมื่อคุณกลับมาดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code ก่อนที่ Google Chat จะหมดเวลา แอป Chatตอบกลับ Your message : Hello

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

    คำขอ HTTP จากเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน `ngrok`

    รูปที่ 7 คําขอ HTTP จากเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok

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

    แอปพลิเคชันทำงานอยู่และรอรับคําขอ HTTP ในพอร์ต 9000 โดยโหลดการเปลี่ยนแปลงโค้ดแล้ว

    รูปที่ 8 แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต 9000 ที่โหลดการเปลี่ยนโค้ดแล้ว

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

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

Python

  1. รับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้สำหรับข้อมูลรับรองเริ่มต้นของแอปพลิเคชัน

    gcloud config set project PROJECT_ID
gcloud auth application-default login

    แทนที่ PROJECT_ID ด้วยรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของแอป

  2. โคลนที่เก็บ googleworkspace/google-chat-samples จาก GitHub ไปยังสภาพแวดล้อมในเครื่องของคุณ โดยที่เก็บโค้ดดังกล่าวมีโค้ดของแอปพลิเคชันดังนี้

    git clone https://github.com/googleworkspace/google-chat-samples.git

  3. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้

    1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ google-chat-samples/python/avatar-app

    2. สร้างสภาพแวดล้อมเสมือนใหม่สำหรับ Python env และเปิดใช้งาน:

      virtualenv env
source env/bin/activate

    3. ติดตั้งข้อกําหนดของโปรเจ็กต์ทั้งหมดโดยใช้ 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", "avatar_app",
            "--port", "9000",
            "--debug"
        ]
    }]
}

    5. เพิ่มเบรกพอยท์ที่หยุดการประมวลผลคำขอ HTTP ชั่วคราวในไฟล์ main.py และเริ่มเรียกใช้และแก้ไขข้อบกพร่องด้วยการกำหนดค่า Debug Watch ที่เพิ่มไว้ก่อนหน้านี้ แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต 9000

      แอปพลิเคชันทำงานอยู่และรอรับคําขอ HTTP ในพอร์ต `9000`

      รูปที่ 3 แอปพลิเคชันทำงานอยู่และรอรับคำขอ HTTP ในพอร์ต 9000

  4. เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณ:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok ตอนนี้ระบบจะเปลี่ยนเส้นทางคำขอทั้งหมดไปยังสภาพแวดล้อมในท้องถิ่นและพอร์ตที่แอปพลิเคชันใช้

    เทอร์มินัลที่มีเซิร์ฟเวอร์ `ngrok` ทำงานอยู่และเปลี่ยนเส้นทาง

    รูปที่ 4 เทอร์มินัลที่มีเซิร์ฟเวอร์ ngrok ทำงานอยู่และเปลี่ยนเส้นทาง

  5. ngrok แอปพลิเคชันจะเริ่มต้นเว็บอินเทอร์เฟซใน localhost ด้วย ซึ่งคุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดแอปพลิเคชันในเบราว์เซอร์

    อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน `ngrok` ซึ่งไม่แสดงคําขอ HTTP

    รูปที่ 5 เว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคําขอ HTTP

  6. ทดสอบแอป Chat โดยส่งข้อความโดยตรง

    • เปิด Google Chat

      ไปที่ Google Chat

    • คลิกแชทใหม่

    • ในกล่องโต้ตอบ ให้ป้อนชื่อแอปแชท

    • ในผลการค้นหา ให้ค้นหาแอป Chat ของคุณ คลิกเพิ่ม > แชท

    • ในช่องข้อความส่วนตัว ให้พิมพ์ Hey! แล้วกด enter แอปแชทไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่

  7. ใน Visual Studio Code ในสภาพแวดล้อมภายใน คุณจะเห็นว่าการดําเนินการหยุดชั่วคราวที่จุดหยุดที่ตั้งไว้

    การดำเนินการจะหยุดชั่วคราวที่เบรกพอยต์ที่ตั้งไว้

    รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

  8. เมื่อคุณกลับมาดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code ก่อนที่ Google Chat จะหมดเวลา แอป Chat จะตอบกลับพร้อมชื่อและรูปโปรไฟล์ของคุณในข้อความ

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

    คำขอ HTTP จากเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน `ngrok`

    รูปที่ 7 คําขอ HTTP จากเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok

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

    แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP บนพอร์ต "9000" ที่โหลดการเปลี่ยนแปลงโค้ดแล้ว

    รูปที่ 8 แอปพลิเคชันทำงานอยู่และรอรับคำขอ HTTP ในพอร์ต 9000 โดยโหลดการเปลี่ยนแปลงโค้ดแล้ว

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

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

Java

  1. รับข้อมูลเข้าสู่ระบบของผู้ใช้ใหม่เพื่อใช้สำหรับข้อมูลรับรองเริ่มต้นของแอปพลิเคชัน

    gcloud config set project PROJECT_ID
gcloud auth application-default login

    แทนที่ PROJECT_ID ด้วยรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของแอป

  2. โคลนที่เก็บ googleworkspace/google-chat-samples จาก GitHub ในสภาพแวดล้อมในเครื่อง ซึ่งจะมีโค้ดแอปพลิเคชัน

    git clone https://github.com/googleworkspace/google-chat-samples.git

  3. จาก Visual Studio Code IDE ที่ติดตั้งในสภาพแวดล้อมภายในของคุณ ให้ทำดังนี้

    1. ในหน้าต่างใหม่ ให้เปิดโฟลเดอร์ google-chat-samples/java/avatar-app

    2. กำหนดค่าโปรเจ็กต์ Maven ให้เรียกใช้แอปพลิเคชัน App ในพอร์ต 9000 บนเครื่องโดยเพิ่มปลั๊กอินบิลด์เฟรมเวิร์ก Cloud Functions function-maven-plugin ในไฟล์ pom.xml

      ...
<plugin>
    <groupId>com.google.cloud.functions</groupId>
    <artifactId>function-maven-plugin</artifactId>
    <version>0.11.0</version>
    <configuration>
        <functionTarget>App</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 ชั่วคราวในไฟล์ App.java แล้วเริ่มแนบและแก้ไขข้อบกพร่องด้วยการกำหนดค่า Remote Debug Watch ที่เพิ่มไว้ก่อนหน้านี้ ตอนนี้แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP ในพอร์ต 9000

      แอปพลิเคชันกำลังทำงานและรอรับคำขอ HTTP ในพอร์ต &quot;9000&quot;

      รูปที่ 3 แอปพลิเคชันทำงานอยู่และรอรับคำขอ HTTP ในพอร์ต 9000

  4. เปิดแอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องโดยทำดังนี้

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    แทนที่ NGROK_STATIC_DOMAIN ด้วยโดเมนแบบคงที่ในบัญชี ngrok ตอนนี้ระบบจะเปลี่ยนเส้นทางคำขอทั้งหมดไปยังสภาพแวดล้อมในท้องถิ่นและพอร์ตที่แอปพลิเคชันใช้

    เทอร์มินัลที่มีเซิร์ฟเวอร์ `ngrok` ทำงานอยู่และเปลี่ยนเส้นทาง

    รูปที่ 4 เทอร์มินัลที่มีเซิร์ฟเวอร์ ngrok ทำงานอยู่และเปลี่ยนเส้นทาง

  5. ngrok แอปพลิเคชันจะเริ่มต้นเว็บอินเทอร์เฟซใน localhost ด้วย ซึ่งคุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยเปิดแอปพลิเคชันในเบราว์เซอร์

    อินเทอร์เฟซเว็บที่โฮสต์โดยแอปพลิเคชัน `ngrok` ซึ่งไม่แสดงคําขอ HTTP

    รูปที่ 5 เว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok ไม่แสดงคําขอ HTTP

  6. ทดสอบแอป Chat โดยส่งข้อความโดยตรง

    • เปิด Google Chat

      ไปที่ Google Chat

    • คลิกแชทใหม่

    • ในกล่องโต้ตอบ ให้ป้อนชื่อแอปแชท

    • ในผลการค้นหา ให้ค้นหาแอป Chat แล้วคลิกเพิ่ม > Chat

    • ในช่องข้อความส่วนตัว ให้พิมพ์ Hey! แล้วกด enter แอปแชทไม่ตอบกลับเนื่องจากกำลังแก้ไขข้อบกพร่องอยู่

  7. ใน Visual Studio Code ในสภาพแวดล้อมภายใน คุณจะเห็นว่าการดําเนินการหยุดชั่วคราวที่จุดหยุดที่ตั้งไว้

    การดำเนินการจะหยุดชั่วคราวที่เบรกพอยต์ที่ตั้งไว้

    รูปที่ 6 การดำเนินการจะหยุดชั่วคราวที่เบรกพอยท์ที่ตั้งค่าไว้

  8. เมื่อคุณกลับมาดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ Visual Studio Code ก่อนที่ Google Chat จะหมดเวลา แอป Chat จะตอบกลับพร้อมชื่อและรูปโปรไฟล์ของคุณในข้อความ

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

    คำขอ HTTP จากเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน `ngrok`

    รูปที่ 7 คําขอ HTTP จากเว็บอินเทอร์เฟซที่โฮสต์โดยแอปพลิเคชัน ngrok

  10. หากต้องการเปลี่ยนลักษณะการทํางานของแอปพลิเคชัน ให้แทนที่ Hello ด้วย Hey ในบรรทัด 55 ของไฟล์ App.java แล้วรีสตาร์ทกระบวนการ mvnDebug และเปิด Remote Debug Watch อีกครั้งเพื่อแนบไฟล์อีกครั้งและเริ่มการแก้ไขข้อบกพร่อง

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

  12. เมื่อดำเนินการต่อจากโปรแกรมแก้ไขข้อบกพร่องของ 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 ที่ติดตั้งในสภาพแวดล้อมภายใน ให้ทําดังนี้

  1. ในหน้าต่างใหม่ ให้เปิดซอร์สโค้ดของแอป

  2. สร้างไฟล์ .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 ด้วยพอร์ตแก้ไขข้อบกพร่องในสภาพแวดล้อมในเครื่อง

  3. เพิ่มเบรกพอยท์ในซอร์สโค้ดของแอปที่จะหยุดการประมวลผลคำขอ HTTP ชั่วคราว และเริ่มเรียกใช้และแก้ไขข้อบกพร่องด้วยการกำหนดค่า Debug Remote ที่เพิ่มไว้ก่อนหน้านี้

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