‫Instruktur: Dalam video ini,
‫kita akan belajar tentang debugging Node.js. JS karena, mari kita hadapi itu,
‫akan selalu ada beberapa bug dalam kode kita tidak
‫peduli seberapa hati-hati kita.
‫Jadi ada baiknya memiliki alat untuk membantu
‫kami men-debug kode kami.
‫Sekarang ini bukan benar-benar tentang penanganan kesalahan dengan Express, tetapi
‫saya pikir ini adalah poin yang baik dalam
‫kursus untuk memperkenalkan Anda ke alat
‫debugging yang kemudian mungkin kita gunakan sepanjang sisa kursus.
‫Dan ada berbagai cara untuk men-debug Node.js. kode JS.
‫Misalnya, kita bisa menggunakan kode VS untuk itu.
‫Tapi, sebenarnya, Google baru-baru ini merilis alat luar biasa
‫yang dapat kita gunakan untuk men-debug yang disebut NDB, oke?
‫Jadi mari kita pindah ke terminal kita yang lain di
‫sini dan kemudian menginstal NDB.
‫Dan NDB, yang merupakan singkatan dari Node debugger,
‫sebenarnya hanyalah sebuah paket NPM.
‫Jadi NPM menginstal NDB.
‫Baiklah, dan
‫Anda harus menginstalnya sebagai paket global, oke?
‫Dan jika Anda menggunakan Mac, Anda mungkin memerlukan izin global.
‫Jadi tulis saja Sudo di sini di depan.
‫Atau jika Anda sama sekali tidak dapat menginstalnya secara
‫global, Anda selalu dapat menginstalnya secara lokal
‫sebagai dependensi kematian.
‫Jadi seperti ini, oke?
‫Bagaimanapun, silakan lanjutkan dan instal alat ini sekarang.
‫Saya tidak
‫akan melakukannya karena ini bisa menjadi unduhan yang cukup berat,
‫dan itu memakan waktu terlalu lama sekarang.
‫Bagaimanapun, segera setelah Anda menginstal alat, mari kita
‫menuju ke paket. jason dan
‫tambahkan skrip baru di sini, oke?
‫Dan saya akan menyebutnya sebagai debug.
‫Oke?
‫Jadi perintah yang ingin kita
‫jalankan di sini hanyalah NDB, jadi catatan debugger
‫dan sekali lagi titik masuk
‫kita, Jadi, server. js Oke?
‫Dan sekarang ini akan berfungsi tidak peduli
‫apakah Anda menginstal NDB secara lokal atau global.
‫Baiklah, jadi sekarang mari kita jalankan skripnya.
‫Dan agar ini berfungsi,
‫kita sebenarnya perlu menyelesaikan proses ini karena
‫pada dasarnya ini akan memulai
‫server juga dan kemudian akan mencoba melakukannya di
‫port yang sama dan itu
‫tentu saja tidak akan berhasil.
‫Jadi kita perlu menyelesaikan yang sedang berjalan
‫dan kemudian dari sini kita dapat menjalankan NPM run
‫debug Baiklah,
‫dan
‫sekarang jendela Chrome baru
‫akan terbuka jadi apa yang
‫disebut Chrome tanpa kepala, tapi itu
‫bukan Chrome asli.
‫Jadi Anda akan melihat ikon Chrome di
‫sini dan juga di sini
‫di bilah menu tetapi sebenarnya ini hanya debugger catatan.
‫Jadi apa yang kita miliki di sini?
‫Nah di sisi kiri, kami memiliki sistem file lengkap kami.
‫Kami juga memiliki akses ke skrip NPM kami di
‫sini yang sebenarnya dapat kami jalankan dari sini.
‫Kami juga memiliki konsol dan di
‫sini kami memiliki output biasa dengan aplikasi yang
‫berjalan dan koneksi database
‫dan kami juga memiliki tab kinerja dan memori,
‫yang tidak akan kami gunakan.
‫Baiklah, sekarang jika Anda sudah familiar
‫dengan proses debugging umum
‫maka semua ini akan menjadi familiar bagi Anda.
‫Baiklah, tetapi jika tidak, jangan khawatir saya
‫akan menunjukkan beberapa teknik di
‫sepanjang video ini.
‫Baiklah, sekarang mari kita buka server kita. js.
‫Dan satu hal yang benar-benar
‫menakjubkan adalah kita bisa mengedit file kita di sini,
‫jadi di debugger ini.
‫Jadi, misalnya, katakanlah kita menemukan bug
‫dan kita ingin segera memperbaikinya.
‫Kita bisa melakukannya di sini di debugger
‫dan kemudian akan memperbarui kode aslinya.
‫Jadi hanya untuk
‫mengujinya, mari tambahkan saja komentar di sini.
‫Jadi, uji lalu tekan perintah atau kontrol s untuk menyimpan dan kemudian ketika
‫kita kembali ke kode kita dan
‫membuka server. js di sana
‫Anda akan melihat bahwa komentar itu sebenarnya ada di sini.
‫Oke?
‫Dan jika sekarang kita
‫menghapusnya dari sini,
‫menyimpannya, dan kembali ke
‫debugger, maka itu juga akan hilang dari sini.
‫Oke, tapi sekarang tentang debugging itu sendiri.
‫Saya akan mengatakan bahwa aspek
‫mendasar dari debugging adalah untuk mengatur break point.
‫Jadi break point pada dasarnya adalah poin dalam kode kita
‫yang dapat kita definisikan di sini di
‫debugger, di mana kode kita kemudian akan berhenti berjalan.
‫Ini pada dasarnya akan membeku
‫dalam waktu dan kita kemudian dapat melihat semua variabel kita.
‫Oke, jadi itu akan sangat berguna untuk
‫menemukan beberapa bug.
‫Sekarang, sekarang tidak ada bug
‫di sini, tapi mari kita tambahkan break point.
‫Dan saya akan menambahkan break point itu di baris ini 21.
‫Jadi saya klik di sini pada
‫baris ini dan kemudian Anda melihat penanda hijau ini, oke?
‫Dan itu berarti kode akan berhenti pada
‫titik ini ketika kita menjalankannya, oke?
‫Dan Anda benar-benar dapat melihatnya di
‫sini di sisi kanan pada tab break point di sini juga.
‫Sekarang, aplikasi kita sebenarnya sudah
‫berjalan pada titik
‫ini dan pada dasarnya menunggu permintaan masuk.
‫Jadi yang perlu kita
‫lakukan di sini adalah klik kanan lalu klik run this script.
‫Oke, dan itu pada dasarnya akan menjalankan
‫skrip di sini lagi.
‫Baiklah?
‫Dan jadi di sini kita pergi.
‫Jadi Anda lihat di sini di
‫sisi kanan, yang dikatakan dijeda pada titik istirahat
‫dan semua kode yang ada di atas titik henti ini
‫di sini telah dieksekusi pada titik ini.
‫Jadi sekarang kita bisa melihat variabelnya.
‫Misalnya, kita dapat mengarahkan variabel port ini
‫dan kita melihat bahwa itu disetel ke 3.000.
‫Dan juga benar-benar mengenai tempat ini di sini
‫dalam kode di sini, baiklah.
‫Dan kemudian cara ketiga untuk melihatnya ada di
‫sini di sisi kanan.
‫Jadi kami pada dasarnya memiliki beberapa tab di sini
‫sehingga proses simpul, arloji, tumpukan panggilan, yang
‫tidak terlalu penting untuk saat ini.
‫Ruang lingkupnya, dan ruang lingkupnya adalah tempat semua
‫variabel kita berada, oke?
‫Jadi di sini lagi, Anda memiliki port yang disetel ke 3.000.
‫Oke, dan di sini Anda juga
‫dapat melihat lima variabel yang kami akses
‫di semua modul.
‫Ingat bahwa dari model kuliah?
‫Jadi kami memiliki nama direktori,
‫kami memiliki nama file, kami memiliki fungsi yang dibutuhkan,
‫kami memiliki modul, dan kami memiliki ekspor.
‫Jadi ingat, ini adalah lima
‫variabel yang tersedia di setiap modul.
‫Dan sebenarnya ketika kita mengeksekusi kode
‫seperti ini di debugger, kita dapat melihat bahwa seluruh kode
‫kita sebenarnya dibungkus ke dalam fungsi ini.
‫Benar?
‫Jadi fungsi pembungkus ini yang
‫memberi kita akses ke lima variabel ini.
‫Baiklah, selanjutnya saya juga ingin melihat variabel app
‫kita, jadi pada dasarnya aplikasi Express yang
‫kita ekspor dari app. j, ingat itu.
‫Dan di sini ada banyak hal,
‫tetapi yang menurut saya
‫menarik adalah melihat router ini di sini.
‫Oke, dan di router kami kemudian memiliki tumpukan.
‫Oke, jadi mari kita buka sedikit dan
‫tumpukan ini pada dasarnya
‫adalah tumpukan middleware yang kita miliki di aplikasi kita.
‫Oke, misalnya kami memiliki jsonParser kami di
‫sini, kami memiliki kode yang melayani file statis.
‫Lihatlah itu di sini di app. js jadi ekspres
‫ini. statis.
‫Kami juga memiliki logger di sini
‫yang datang ke sini dari menggunakan Morgan.
‫Kemudian Anda memiliki dua fungsi middleware
‫berikutnya, jadi
‫dua ini di sini, yang anonim, jadi yang ini dan yang
‫ini dan mungkin kita bisa melihatnya.
‫Tapi tidak benar-benar.
‫Oke, itu tidak masalah.
‫Jadi ini benar-benar hanya untuk rasa ingin
‫tahu dan menunjukkan kepada
‫Anda bahwa kami benar-benar dapat melihat tumpukan middleware kami, oke?
‫Kemudian akhirnya kami memiliki dua router kami.
‫Oke?
‫Jadi, kami memiliki router, dan Anda melihat di
‫sini sebenarnya rute yang digunakannya.
‫Jadi api/v1/tours benar dan menurut saya ini sangat menarik.
‫Tentu saja kami masih memiliki pengguna di sini juga.
‫Maka dengan ini benar-benar dapat melihat bagaimana aplikasi
‫Express bekerja di belakang layar.
‫Oke?
‫Jadi mari kita tutup semua ini.
‫Dan hal lain yang ingin saya tunjukkan
‫kepada Anda ada di sini
‫di variabel global karena di sini kita memiliki variabel proses atau
‫setidaknya kita harus memilikinya di suatu tempat di sini.
‫Ya, jadi memang di sini.
‫Jadi di sini kita memiliki
‫variabel proses yang diingat, tersedia di mana-mana.
‫Dan itulah mengapa disebut di sini sebagai variabel global.
‫Kemudian di sana kita memiliki proses. env
‫dan untuk diingat bahwa
‫ini tempat semua variabel lingkungan kita disimpan.
‫Dan memang di sini kami memiliki string database
‫kami, kami memiliki database lokal, kata sandi, dan benar-benar
‫semua variabel lingkungan lain yang kami definisikan
‫di konfigurasi kami. n berkas.
‫Baiklah?
‫Hal-hal yang sangat menarik yang bisa kita lihat di sini.
‫Tapi sekarang mari kita lanjutkan dengan debugging kita.
‫Oke?
‫Jadi kami menghentikan kodenya, kami membekukannya tepat
‫waktu di sini saat ini, jadi di baris 21.
‫Oke, jadi sekarang kita bisa klik di sini pada
‫tombol ini, untuk benar-benar terus menjalankan kodenya.
‫Dan karena kita tidak memiliki
‫break point lagi, maka kode tidak
‫akan rusak lagi, dan pada dasarnya selesai berjalan.
‫Jadi mari kita lakukan itu.
‫Dan sekarang aplikasi kita benar-benar berjalan.
‫Mari kita lihat itu.
‫Di Konsol, oke?
‫Jadi aplikasi yang berjalan pada port 3.000
‫dan koneksi DB berhasil, tentu saja.
‫Apa yang terjadi di sini?
‫Sekarang, baiklah, jadi
‫sekarang mari kita cepat melakukan permintaan di sini.
‫Jadi cukup satu untuk /tours dan sekarang
‫kita memiliki semua sampah
‫ini di sini dan saya akan membereskannya sebentar lagi.
‫Baiklah, dan jika Anda sekarang kembali ke Konsol kami
‫di sini, tentu saja kami memiliki semua kode yang kami miliki sebelumnya.
‫Halo dari middleware
‫dan kemudian berapa lama kueri sebenarnya.
‫Baiklah, dan sekarang sebelum kita melakukan
‫hal lain, mari kita singkirkan tur sampah ini.
‫Jadi saya akan memuat ulang di sini,
‫dan saya kira itu akan ada di suatu tempat di sini di akhir.
‫Jadi, uji apa pun di sini.
‫Jadi mari kita singkirkan itu.
‫Ini adalah tur rahasia dan saya benar-benar ingin menyimpannya di sini.
‫Tapi semuanya mulai dari sini tidak lagi kita inginkan.
‫Jadi ya,
‫jadi sekarang kami kembali hanya mengadakan 10
‫tur, sama seperti sebelumnya.
‫Pokoknya sekarang mari kita benar-benar menetapkan titik istirahat
‫dalam fungsi yang menangani rute ini.
‫Oke, dan jadi kami datang ke folder pengontrol kami dan
‫di sana kami memiliki pengontrol tur.
‫Oke?
‫Dan kemudian fungsi handlernya adalah ini mendapatkan semua tur.
‫Jadi untuk saat
‫ini yang ingin saya lakukan hanyalah
‫menetapkan titik istirahat di sini sehingga kita dapat melihat
‫seperti apa variabel ini setelah kueri selesai dibuat.
‫Jadi kode ini di sini akan mendapatkan tur
‫kami dan kami kemudian
‫akan menghentikan kode pada dasarnya sebelum benar-benar mengirimkannya sebagai tanggapan.
‫Oke, jadi yang perlu kita lakukan adalah benar-benar melakukan permintaan
‫karena itu akan memicu fungsi itu.
‫Benar?
‫Dan karena kita memiliki titik istirahat, kita secara otomatis
‫kembali ke jendela ini di sini, dan ke titik
‫di mana kode telah berhenti.
‫Jadi, variabel macam apa yang kita miliki di sini?
‫Jadi Anda melihat bahwa kami memiliki permintaan dan
‫tanggapan, dan kami juga memiliki
‫variabel fitur, dan tur, tentu saja.
‫Jadi mari kita lihat dulu permintaannya.
‫Dan di sini sekali lagi, Anda melihat bahwa kami memiliki
‫semua jenis barang.
‫Jadi kami memiliki, baseurl, kami memiliki metode, kami memiliki
‫misalnya, permintaan. kueri, yang saat ini
‫kosong karena kami tidak meneruskan string kueri
‫apa pun, tetapi
‫Anda melihat bahwa itu benar-benar sudah ada di sini.
‫Oke, dan sekarang Anda mulai
‫melihat betapa bergunanya ini untuk men-debug kode kita.
‫Jadi pada dasarnya untuk membekukan kode kita tepat waktu daripada
‫harus melakukan semua konsol ini. log yang biasa kami lakukan
‫hingga saat ini.
‫Jadi biasanya ketika kami ingin melihat kueri misalnya, kami
‫akan melakukan banyak konsol. log dan gunakan itu
‫untuk mencari tahu bug jika ada sesuatu yang
‫tidak berfungsi.
‫Benar, tetapi sekarang kami memiliki alat luar biasa ini yang dapat
‫membantu kami menghindari semua konsol ini. log misalnya.
‫Kemudian kita juga mendapat respon tentunya.
‫Dan sekali lagi Anda melihat semua properti dan metode yang ada di
‫sana, dan mereka tidak terlalu menarik bagi
‫kita sekarang.
‫Apa yang ingin saya tunjukkan kepada Anda tentu saja
‫saat ini kita sudah memiliki tur, oke?
‫Jadi kami memiliki sembilan tur, jadi mari kita lihat mereka.
‫Dan terlihat agak aneh di sini, jadi untuk mendapatkan
‫akses ke nilai sebenarnya, kita perlu klik di sini, oke, jadi
‫itu agak aneh.
‫Tapi itu bekerja tentu saja.
‫Jadi Anda lihat bahwa sebenarnya tur kami sudah ada di
‫sini dan tentu saja fiturnya juga.
‫Jadi Anda lihat di sini bahwa fitur-fiturnya adalah
‫turunan dari kelas fitur API seperti yang kita definisikan.
‫Dan di sana kita memiliki kueri dan string kueri.
‫Bagus, jadi beginilah cara kita melihat semua variabel.
‫Dan beginilah cara kerja bagian
‫terpenting dari debugger.
‫Sekarang untuk mempelajari sedikit tentang proses debugging itu sendiri,
‫mari kita perkenalkan bug yang sangat kecil ke dalam kode kita,
‫dan kemudian lihat bagaimana kita dapat menggunakan alat-alat
‫yang kita miliki di sini untuk melihat lebih dalam
‫pada kode kita.
‫Jadi saya tidak akan melanjutkan
‫eksekusi yang dilewati untuk menjalankan pada dasarnya sisa kode, oke?
‫Jadi itu harus dilakukan sekarang.
‫Jadi sekarang di sini kita memiliki semua tanggapan.
‫Jadi Anda lihat butuh waktu lama di sini,
‫jadi tiga menit dan 29 detik, tapi
‫itu hanya karena kami menghentikan eksekusi
‫begitu lama.
‫Oke.
‫Sekarang mari kita masuk ke kode kita di sini.
‫Mari kita tutup apa yang tidak lagi kita butuhkan.
‫Jadi sebenarnya di file fitur API kami, saya ingin
‫memperkenalkan bug kecil di sini di bidang batas.
‫Jadi katakanlah kami mencoba menerapkan metode ini
‫di sini, tetapi alih-alih bergabung dengan spasi di sini,
‫kami lupa meletakkannya di sini.
‫Jadi katakan saja kita bergabung tanpa spasi,
‫dan ini akan memberi kita hasil yang aneh, bukan?
‫Jadi mari kita benar-benar mengujinya.
‫Jadi
‫katakanlah bidang dan kami
‫hanya menginginkan nama dan durasinya, bukan?
‫Sekarang sebelum saya benar-benar dapat mengirim permintaan itu, mari kita
‫hapus breakpoint di sini.
‫Oke?
‫Mengirim permintaan, dan sekarang kami sebenarnya tidak mendapatkan
‫nama dan durasinya.
‫Jadi mari kita berpura-pura itu adalah bug
‫kita sekarang dan sekarang kita mencoba mencari tahu mengapa ini tidak berhasil.
‫Oke?
‫Jadi mari kita pergi ke debugger kami.
‫Dan kami tahu bahwa kesalahannya mungkin
‫ada di suatu tempat dalam metode bidang batas kami.
‫Jadi pada dasarnya mari kita hentikan kode agar tidak dieksekusi
‫pada saat ini, oke?
‫Karena di sinilah sebenarnya metode ini akan dipanggil dan
‫dari sini kita bisa memasukkan fungsi itu untuk
‫metode itu.
‫Oke?
‫Jadi mari kita jalankan permintaan itu
‫sekarang, dan sekarang kita kembali ke debugger kita secara otomatis.
‫Jadi pada titik ini baris ini dan baris
‫ini dan baris kode ini telah dieksekusi, jadi sekarang mari
‫kita gunakan alat langkah, oke?
‫Langkah apa yang akan dilakukan adalah pada dasarnya akan
‫mengeksekusi baris kode berikutnya.
‫Dan dalam hal ini yang akan berada
‫di dalam metode bidang batas.
‫Jadi langkah, dan kemudian akan pindah ke fungsi itu.
‫Oke jadi mari kita lihat apa yang kita miliki di sini.
‫Misalnya ini. string kueri adalah durasi
‫nama koma, jadi itu benar, kan?
‫Oke jadi mari kita melangkah ke baris berikutnya.
‫Baiklah dan di sinilah operasi ini
‫benar-benar terjadi.
‫Kemudian selanjutnya.
‫Mari kita lihat variabel kita di sini.
‫Jadi di sini kita sekarang melihat bidang, dan di sini kita memiliki bug.
‫Oke?
‫Jadi masalahnya adalah, tentu saja, kami tidak memiliki
‫ruang antara nama dan durasi.
‫Dan itulah mengapa itu tidak berhasil.
‫Jadi bidang tentu saja didefinisikan di sini, dan
‫seperti ini kami dapat menemukan bug kami dan segera memperbaikinya.
‫Jadi ingat bahwa langkah tambahan yang
‫kita lakukan di sini tercermin langsung dalam kode.
‫Jadi berikan
‫itu menyimpan, dan kemudian akan melakukannya lagi.
‫Jadi saya bisa terus melangkah.
‫Dan sekarang bidang sudah benar.
‫Jadi beri nama durasi ruang.
‫Kemudian baris kode berikutnya.
‫Dan sekarang kita masuk ke metode select pada query.
‫Tapi kami tidak tertarik sama sekali, jadi kami bisa
‫mengatakan "keluar dari fungsi saat ini. " Oke?
‫Jadi pilih yang kami pikir menjalankan fungsi
‫ini di sini, oke?
‫Tapi tentu saja kami tidak tertarik
‫dengan itu, jadi kami berhenti dan pindah ke baris berikutnya.
‫Jadi sekarang kami
‫telah mengembalikan ini, baris berikutnya, dan lagi.
‫Jadi sekarang kita kembali ke tempat kita sebelumnya tetapi di baris berikutnya.
‫Jadi mari kita terus melakukan itu.
‫Jadi sekarang kita masuk ke
‫halaman delapan, tapi kita tidak terlalu tertarik dengan
‫yang ini, jadi mari kita keluar dari fungsi saat ini.
‫Dan sekarang kita di sini di definisi wisata.
‫Yang saat ini belum dilakukan.
‫Jadi mari kita katakan lagi langkah.
‫Dan sekarang pada titik ini tur kita harus ditentukan.
‫Baiklah, jadi kami memiliki sembilan tur kami di sini.
‫Mari kita lihat mereka,
‫dan inilah mereka.
‫Dan sebenarnya mereka memiliki
‫semua data, jadi bukan hanya yang kami definisikan
‫tetapi sebenarnya tidak.
‫Jadi kami benar-benar hanya memiliki nama dan
‫durasi, jadi durasi, nama, dan yang lainnya
‫tidak ditentukan.
‫Jadi itu hanya karena kami membatasi kueri hanya pada
‫dua bidang ini, ingat?
‫Sekarang apa yang saya juga ingin tunjukkan kepada Anda
‫ada di sini dalam fitur, kita dapat melihat kueri kita dan di sini kita
‫memiliki properti bidang misalnya di mana kita melihat durasi disetel
‫ke satu dan nama disetel ke satu.
‫Dan itulah tepatnya dua nama yang kami pilih.
‫Kami juga memiliki opsi
‫ini di sini, yang pada titik ini diatur untuk membuatnya minus satu.
‫Dan itu datang dari sini.
‫Jadi ini di sini.
‫Jadi pada dasarnya apa metode ini di sini, metode pengurutan
‫ini akan dilakukan adalah bahwa ia akan menambahkan properti pengurutan ini di sini
‫ke opsi ini, oke?
‫Dan kemudian kami juga memiliki batas dan lewati yang tentu saja datang
‫ke sini dari halaman delapan.
‫Oke?
‫Jadi saya pikir ini juga menarik dan
‫ya, jadi kode kita sekarang benar-benar diperbaiki dan mari kita teruskan
‫ini.
‫Dan jadi kita sekarang harus memiliki hasil yang benar.
‫Sekarang di sini dikatakan bahwa kami tidak mendapatkan respons
‫apa pun, dan itu karena kami terlalu lama memperbaiki kode kami.
‫Jadi kami mendapat kesalahan saat menghubungkan.
‫Tapi kalau sekarang kita kirim
‫lagi, dan sekarang kita buat lebih cepat.
‫Atau sebenarnya kita bisa menghapus breakpoint kita sepenuhnya.
‫Jadi mari kita
‫tetap menjalankannya, mari kita kembali dan sekarang memang
‫kita mendapatkan durasi dan namanya juga.
‫Jadi itu karena kami baru saja memperbaiki
‫kode kami menggunakan debugger NDB.
‫Sangat bagus.
‫Itu adalah alat yang sangat luar biasa dan
‫bermanfaat yang akan terus kami gunakan sepanjang
‫sisa kursus.
‫Mungkin tidak selalu, terkadang lebih cepat memasukkan
‫log keluar konsol.
‫Tapi sungguh, dalam beberapa kasus yang lebih rumit, saya
‫suka menggunakan alat semacam ini.