Sebagai developer aplikasi Google Chat, Anda mungkin perlu men-debug kode untuk menguji perubahan atau memecahkan masalah yang kompleks. Proses debug aplikasi Chat dapat dilakukan dengan berbagai cara, bergantung pada arsitektur aplikasi, fungsi aplikasi, cara aplikasi di-deploy, dan preferensi Anda.
Halaman ini menjelaskan cara men-debug aplikasi Chat HTTP menggunakan ngrok, yang merupakan platform ingress terpadu yang dapat Anda gunakan untuk menguji lingkungan pengembangan lokal. Dalam panduan ini, Anda menguji perubahan kode di lingkungan lokal dan memecahkan masalah di lingkungan jarak jauh.
Men-debug dari lingkungan pengembangan lokal
Di bagian ini, Anda akan berinteraksi dengan aplikasi Chat yang dijalankan di lingkungan lokal Anda.
Gambar 1. Men-debug di lingkungan pengembangan lokal.
Bengkel
Node.js
Python
Java
Prasyarat
Node.js
- Versi terbaru
node
dannpm
terinstal di lingkungan lokal Anda. Versi terbaru
nodemon
yang diinstal di lingkungan lokal Anda, yang digunakan untuk tujuan pemuatan ulang otomatis:npm install -g nodemon
Aplikasi Chat HTTP yang dikonfigurasi untuk pesan. Anda dapat mengikuti bagian Prasyarat, Menyiapkan lingkungan, dan Memublikasikan aplikasi ke Google Chat di Panduan memulai. Satu-satunya perbedaan adalah Anda perlu menetapkan App name ke
Debug App
dan App URL ke apa pun sepertihttp://example.com
.IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan
Visual Studio Code
IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi.Git
terinstal di lingkungan lokal Anda.Akun
ngrok
.
Python
- Versi terbaru
python3
yang diinstal di lingkungan lokal Anda. pip
danvirtualenv
versi terbaru yang diinstal di lingkungan lokal Anda, masing-masing digunakan untuk mengelola paket Python dan lingkungan virtual.- Aplikasi Chat HTTP yang dikonfigurasi untuk pesan. Anda dapat mengikuti bagian
Prasyarat,
Menyiapkan
lingkungan,
dan Memublikasikan aplikasi ke Google
Chat di
Panduan memulai. Satu-satunya
perbedaan adalah Anda perlu menetapkan App name ke
Debug App
dan App URL ke apa pun sepertihttp://example.com
. - IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan
Visual Studio Code
IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi. Git
terinstal di lingkungan lokal Anda.- Akun
ngrok
. - Versi terbaru
gcloud
diinstal dan diinisialisasi di lingkungan lokal Anda.
Java
- Versi stabil terbaru
Java SE 11's JDK
yang diinstal di lingkungan lokal Anda. - Versi terbaru
Apache Maven
yang diinstal di lingkungan lokal Anda, digunakan untuk mengelola project Java. - Aplikasi Chat HTTP yang dikonfigurasi untuk pesan. Anda dapat mengikuti bagian
Prasyarat,
Menyiapkan
lingkungan,
dan Memublikasikan aplikasi ke Google
Chat di
Panduan memulai. Satu-satunya
perbedaan adalah Anda perlu menetapkan App name ke
Debug App
dan App URL ke apa pun sepertihttp://example.com
. - IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan
Visual Studio Code
IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi. Git
terinstal di lingkungan lokal Anda.- Akun
ngrok
. - Versi terbaru
gcloud
diinstal dan diinisialisasi di lingkungan lokal Anda.
Membuat layanan localhost tersedia untuk publik
Anda perlu menghubungkan lingkungan lokal ke internet agar
aplikasi Chat dapat mengaksesnya. Aplikasi ngrok
digunakan untuk mengalihkan permintaan HTTP yang dibuat ke URL publik ke lingkungan lokal Anda.
- Pada browser di lingkungan lokal Anda, login ke akun
ngrok
Anda. - Instal aplikasi dan siapkan
authtoken
di lingkungan lokal Anda. - Buat domain statis di
akun
ngrok
, dengan referensi sebagaiNGROK_STATIC_DOMAIN
dalam petunjuk panduan ini.
Mengonfigurasi aplikasi Chat
Konfigurasikan aplikasi Chat untuk mengirim semua permintaan HTTP-nya ke domain statis Anda.
Di konsol Google Cloud, buka halaman Google Chat API:
Klik tab Configuration.
Buka Interactive features > Connection settings dan tetapkan nilai kolom teks App Url ke:
https://NGROK_STATIC_DOMAIN
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda.Klik Save.
Gambar 2. Aplikasi Chat mengirimkan semua permintaan HTTP-nya
ke domain statis. Layanan publik ngrok
bertindak sebagai jembatan antara
aplikasi Chat dan kode aplikasi yang dieksekusi
secara lokal.
Menguji aplikasi Chat
Anda dapat men-deploy, mengonfigurasi, menguji, men-debug, dan memuat ulang aplikasi Chat secara otomatis.
Node.js
Clone repositori
googleworkspace/google-chat-samples
dari GitHub ke lingkungan lokal Anda. Repositori ini berisi kode aplikasi yang akan dijalankan:git clone https://github.com/googleworkspace/google-chat-samples.git
Dari
Visual Studio Code
IDE yang diinstal di lingkungan lokal Anda, lakukan hal berikut:- Di jendela baru, buka folder
google-chat-samples/node/basic-app
. Konfigurasikan aplikasi untuk debug pemuatan ulang otomatis dengan menambahkan dua skrip dalam file
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
Dari direktori root, instal aplikasi:
npm install
Buat dan konfigurasi peluncuran bernama
Debug Watch
yang memicu skripdebug-watch
dengan membuat file.vscode/launch.json
di direktori root:{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file
index.js
, dan mulai jalankan dan lakukan proses debug dengan konfigurasiDebug Watch
yang ditambahkan sebelumnya. Aplikasi tersebut kini berjalan dan memproses permintaan HTTP pada port9000
.Gambar 3. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port
9000
.
- Di jendela baru, buka folder
Luncurkan aplikasi
ngrok
di lingkungan lokal Anda:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan melakukan pengalihan.Antarmuka web juga dimulai di localhost oleh aplikasi
ngrok
. Anda dapat memantau semua aktivitas dengan membukanya di browser.Gambar 5. Antarmuka web yang dihosting oleh aplikasi
ngrok
tidak menampilkan permintaan HTTP.Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:
Buka Google Chat.
Klik Chat baru
.Pada dialog, masukkan nama aplikasi Chat Anda.
Di hasil penelusuran, temukan aplikasi Chat Anda, klik Add > Chat.
Di ruang pesan langsung, ketik
Hello
, lalu tekanenter
. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.
Pada
Visual Studio Code
di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.Gambar 6. Eksekusi dijeda di titik henti sementara yang telah ditetapkan.
Saat Anda melanjutkan eksekusi dari debugger
Visual Studio Code
sebelum waktu tunggu Google Chat habis, aplikasi Chat akan membalasYour message : Hello
.Anda dapat memeriksa log permintaan dan respons HTTP dari antarmuka web yang dihosting oleh aplikasi
ngrok
di lingkungan lokal Anda.Gambar 7. Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi
ngrok
.Untuk mengubah perilaku aplikasi, ganti
Your message
denganHere was your message
35
inline dariindex.json
. Saat Anda menyimpan file ini,nodemon
akan otomatis memuat ulang aplikasi dengan kode sumber yang diperbarui danVisual Studio Code
tetap dalam mode debug.Gambar 8. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port
9000
dengan perubahan kode dimuat.Kali ini, daripada mengirim pesan kedua
Hello
di ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat ke dalam log di antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda, lalu klikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat melanjutkan eksekusi dari debugger
Visual Studio Code
, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal bahwa aplikasi menghasilkan respons dengan versi terbaru pesanHere was your message : Hello
.
Python
Dapatkan kredensial pengguna baru yang akan digunakan untuk Kredensial Default Aplikasi:
gcloud config set project PROJECT_ID gcloud auth application-default login
Ganti
PROJECT_ID
dengan project ID untuk project Cloud aplikasi.Clone repositori
googleworkspace/google-chat-samples
dari GitHub ke lingkungan lokal Anda. repositori ini berisi kode aplikasi:git clone https://github.com/googleworkspace/google-chat-samples.git
Dari
Visual Studio Code
IDE yang diinstal di lingkungan lokal Anda, lakukan hal berikut:- Di jendela baru, buka folder
google-chat-samples/python/avatar-app
. Buat lingkungan virtual baru untuk Python
env
dan aktifkan:virtualenv env
source env/bin/activate
Instal semua dependensi project menggunakan
pip
di lingkungan virtual:pip install -r requirements.txt
Buat file
.vscode/launch.json
di direktori utama dan konfigurasikan peluncuran bernamaDebug Watch
yang memicu aplikasi dari modulfunctions-framework
pada port9000
dalam mode debug di lingkungan virtualenv
:{ "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" ] }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file
main.py
, dan mulai jalankan dan lakukan proses debug dengan konfigurasiDebug Watch
yang ditambahkan sebelumnya. Aplikasi tersebut kini berjalan dan memproses permintaan HTTP pada port9000
.Gambar 3. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port
9000
.
- Di jendela baru, buka folder
Luncurkan aplikasi
ngrok
di lingkungan lokal Anda:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan melakukan pengalihan.Antarmuka web juga dimulai di localhost oleh aplikasi
ngrok
. Anda dapat memantau semua aktivitas dengan membukanya di browser.Gambar 5. Antarmuka web yang dihosting oleh aplikasi
ngrok
tidak menampilkan permintaan HTTP.Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:
Buka Google Chat.
Klik Chat baru
.Pada dialog, masukkan nama aplikasi Chat Anda.
Di hasil penelusuran, temukan aplikasi Chat Anda, klik Add > Chat.
Di ruang pesan langsung, ketik
Hey!
, lalu tekanenter
. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.
Pada
Visual Studio Code
di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.Gambar 6. Eksekusi dijeda di titik henti sementara yang telah ditetapkan.
Saat melanjutkan eksekusi dari debugger
Visual Studio Code
sebelum Google Chat habis waktu, aplikasi Chat akan membalas dengan nama dan foto avatar Anda dalam pesan.Anda dapat memeriksa log permintaan dan respons HTTP dari antarmuka web yang dihosting oleh aplikasi
ngrok
di lingkungan lokal Anda.Gambar 7. Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi
ngrok
.Untuk mengubah perilaku aplikasi, ganti
Hello
denganHey
inline51
dari filemain.py
. Jika Anda menyimpan file ini,Visual Studio Code
akan otomatis memuat ulang aplikasi dengan kode sumber yang diperbarui dan tetap dalam mode debug.Gambar 8. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port
9000
dengan perubahan kode dimuat.Kali ini, daripada mengirim pesan kedua
Hey!
di ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat ke dalam log di antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda, lalu klikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat melanjutkan eksekusi dari debugger
Visual Studio Code
, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal bahwa aplikasi menghasilkan respons dengan versi pesan yang diperbarui.
Java
Dapatkan kredensial pengguna baru yang akan digunakan untuk Kredensial Default Aplikasi:
gcloud config set project PROJECT_ID gcloud auth application-default login
Ganti
PROJECT_ID
dengan project ID untuk project Cloud aplikasi.Clone repositori
googleworkspace/google-chat-samples
dari GitHub di lingkungan lokal Anda. repositori ini berisi kode aplikasi:git clone https://github.com/googleworkspace/google-chat-samples.git
Dari
Visual Studio Code
IDE yang diinstal di lingkungan lokal Anda, lakukan hal berikut:- Di jendela baru, buka folder
google-chat-samples/java/avatar-app
. Konfigurasikan project Maven untuk menjalankan aplikasi
HelloChat
pada port9000
secara lokal dengan menambahkan plugin build Cloud Functions Frameworkfunction-maven-plugin
di filepom.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> ...
Sekarang, Anda dapat meluncurkannya secara lokal dalam mode debug:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
Buat file
.vscode/launch.json
di direktori utama dan konfigurasikan peluncuran bernamaRemote Debug Watch
yang dilampirkan ke aplikasi yang sebelumnya diluncurkan dengan port8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Tambahkan titik henti sementara yang menjeda pemrosesan permintaan HTTP dalam file
HelloChat.java
, dan mulai melampirkan dan melakukan proses debug dengan konfigurasiRemote Debug Watch
yang ditambahkan sebelumnya. Aplikasi tersebut sedang berjalan dan memproses permintaan HTTP di port9000
.Gambar 3. Aplikasi sedang berjalan dan memproses permintaan HTTP pada port
9000
.
- Di jendela baru, buka folder
Luncurkan aplikasi
ngrok
di lingkungan lokal Anda:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Ganti
NGROK_STATIC_DOMAIN
dengan domain statis di akunngrok
Anda. Semua permintaan kini dialihkan ke lingkungan lokal Anda dan port yang digunakan oleh aplikasi.Gambar 4. Terminal dengan server
ngrok
yang berjalan dan melakukan pengalihan.Antarmuka web juga dimulai di localhost oleh aplikasi
ngrok
. Anda dapat memantau semua aktivitas dengan membukanya di browser.Gambar 5. Antarmuka web yang dihosting oleh aplikasi
ngrok
tidak menampilkan permintaan HTTP.Uji aplikasi Chat Anda dengan mengirimkan pesan langsung:
Buka Google Chat.
Klik Chat baru
.Pada dialog, masukkan nama aplikasi Chat Anda.
Di hasil penelusuran, temukan aplikasi Chat Anda, klik Add > Chat.
Di ruang pesan langsung, ketik
Hey!
, lalu tekanenter
. Aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.
Pada
Visual Studio Code
di lingkungan lokal, Anda dapat melihat bahwa eksekusi dijeda pada titik henti sementara yang ditetapkan.Gambar 6. Eksekusi dijeda di titik henti sementara yang telah ditetapkan.
Saat melanjutkan eksekusi dari debugger
Visual Studio Code
sebelum Google Chat habis waktu, aplikasi Chat akan membalas dengan nama dan foto avatar Anda dalam pesan.Anda dapat memeriksa log permintaan dan respons HTTP dari antarmuka web yang dihosting oleh aplikasi
ngrok
di lingkungan lokal Anda.Gambar 7. Permintaan HTTP dari antarmuka web yang dihosting oleh aplikasi
ngrok
.Untuk mengubah perilaku aplikasi, ganti
Hello
denganHey
inline55
dari fileHelloChat.java
, mulai ulang prosesmvnDebug
, lalu luncurkan kembaliRemote Debug Watch
untuk melampirkan kembali dan memulai ulang proses debug.Kali ini, daripada mengirim pesan kedua
Hey!
di ruang, Anda dapat memilih permintaan HTTP terakhir yang dicatat ke dalam log di antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal Anda, lalu klikReplay
. Sama seperti terakhir kali, aplikasi Chat Anda tidak membalas karena sedang di-debug secara aktif.Saat melanjutkan eksekusi dari debugger
Visual Studio Code
, Anda dapat melihat dari antarmuka web yang dihosting oleh aplikasingrok
di lingkungan lokal bahwa aplikasi menghasilkan respons dengan versi pesan yang diperbarui.
Men-debug dari lingkungan jarak jauh
Di bagian ini, Anda akan berinteraksi dengan aplikasi Chat yang dijalankan di lingkungan jarak jauh.
Gambar 9. Men-debug dari lingkungan jarak jauh.
Prasyarat
- Ruang pesan langsung dengan aplikasi Chat Anda. Anda dapat mengikuti bagian Menguji aplikasi Chat Anda dalam Panduan memulai dan menelusuri aplikasi Chat Anda untuk memulainya.
- Aplikasi Anda yang berjalan di lingkungan jarak jauh dengan debugger
yang diaktifkan pada port tertentu disebut sebagai
REMOTE_DEBUG_PORT
dalam petunjuk panduan ini. - Lingkungan lokal Anda dapat
ssh
ke lingkungan jarak jauh. - IDE yang disiapkan di lingkungan lokal Anda yang dapat melakukan debug. Kami menggunakan
Visual Studio Code
IDE dan fitur proses debug defaultnya dalam panduan ini untuk tujuan ilustrasi.
Menghubungkan lingkungan lokal dan jarak jauh
Di lingkungan lokal tempat Anda ingin memulai koneksi klien debug, siapkan tunnel SSH:
ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS
Ganti kode berikut:
LOCAL_DEBUG_PORT
: Port debug di lingkungan lokal Anda.REMOTE_USERNAME
: Nama pengguna di lingkungan jarak jauh Anda.REMOTE_ADDRESS
: Alamat lingkungan jarak jauh Anda.REMOTE_DEBUG_PORT
: Port debug di lingkungan jarak jauh Anda.
Port debug di lingkungan lokal Anda kini ditautkan ke port debug di lingkungan jarak jauh.
Memulai proses debug
Dari Visual Studio Code
IDE yang diinstal di lingkungan lokal Anda, lakukan hal
berikut:
- Di jendela baru, buka kode sumber aplikasi Anda.
Buat file
.vscode/launch.json
di direktori utama dan konfigurasikan peluncuran bernamaDebug Remote
yang dilampirkan ke port debug di lingkungan lokal Anda: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 }] }
Ganti
LOCAL_DEBUG_PORT
dengan port debug di lingkungan lokal Anda.Tambahkan titik henti sementara dalam kode sumber aplikasi Anda yang menjeda pemrosesan permintaan HTTP, dan mulai jalankan dan proses debug dengan konfigurasi
Debug Remote
yang ditambahkan sebelumnya.
Di ruang pesan langsung dengan aplikasi Chat Anda, ketik
apa pun yang ingin Anda uji, lalu tekan enter
. Aplikasi
Chat Anda tidak membalas karena sedang
di-debug
secara aktif di IDE Visual Studio Code
.
Topik terkait
- Pelajari cara enable dan mengkueri log error.
- Pelajari cara memperbaiki error aplikasi Google Chat seperti "Aplikasi tidak merespons", "Google Chat API hanya tersedia untuk pengguna Google Workspace", atau "Pengguna dapat dikecualikan dari ruang".
- Pelajari cara memperbaiki error kartu seperti pesan kartu, dialog, atau pratinjau link yang tidak dirender atau berfungsi seperti yang diharapkan.