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

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

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

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

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

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

รูปที่ 1 แก้ไขข้อบกพร่องในสภาพแวดล้อมการพัฒนาภายใน

เวิร์กช็อป

Node.js

Python

Java

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

Node.js

Python

Java

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

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

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

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

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

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

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

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

  3. ไปที่ฟีเจอร์แบบอินเทอร์แอกทีฟ > การตั้งค่าการเชื่อมต่อ แล้วกำหนดค่า ของช่องข้อความ URL ของแอปเพื่อทำดังนี้

    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. กำหนดค่าแอปพลิเคชันสำหรับการแก้ไขข้อบกพร่องของโหลดซ้ำอัตโนมัติด้วยการเพิ่ม ในไฟล์ 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. อินเทอร์เฟซเว็บก็เริ่มต้นบน localhost ของคุณโดย ngrok คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยการเปิดในเบราว์เซอร์

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

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

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

    • เปิด Google Chat

      ไปที่ Google Chat

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

    • ในกล่องโต้ตอบ ให้ป้อนชื่อ แอป 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. ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์ทั้งหมดโดยใช้ 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. อินเทอร์เฟซเว็บก็เริ่มต้นบน localhost ของคุณโดย ngrok คุณสามารถตรวจสอบกิจกรรมทั้งหมดได้โดยการเปิดในเบราว์เซอร์

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

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

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

    • เปิด Google Chat

      ไปที่ Google Chat

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

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

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

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

  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 ของคุณ ตอนนี้ระบบเปลี่ยนเส้นทางคำขอทั้งหมดไปยังในพื้นที่ และพอร์ตที่แอปพลิเคชันใช้

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

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

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

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

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

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

    • เปิด Google Chat

      ไปที่ Google Chat

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

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

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

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

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

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

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

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

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

    คำขอ HTTP จากอินเทอร์เฟซเว็บที่โฮสต์โดย &quot;ngrok&quot; หน้า

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

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

  11. ครั้งนี้ แทนที่จะส่งข้อความที่ 2 Hey! ในพื้นที่ทำงาน คุณ สามารถเลือกคำขอ HTTP สุดท้ายที่บันทึกลงในเว็บอินเทอร์เฟซซึ่งโฮสต์โดย แอปพลิเคชัน ngrok ในสภาพแวดล้อมในเครื่องของคุณและคลิก 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 บัญชี แอปแชทไม่ตอบกลับเนื่องจากมีการใช้งานอยู่ในขณะนี้ แก้ไขข้อบกพร่องแล้ว ใน Visual Studio Code IDE