Dalam tutorial ini, saya akan menunjukkan kepada Anda cara men-debug aplikasi TypeScript sederhana yang mensimulasikan kalkulator. Tujuannya adalah untuk mengidentifikasi kesalahan mengapa penjumlahan dua angka tidak memberikan hasil yang diharapkan. Latihan praktis ini menggunakan Chrome Developer Tools untuk menganalisis kode dan menemukan kesalahan dengan cepat. Panduan ini akan membantu Anda memahami pentingnya debugging dan alat apa saja yang dapat membantu Anda dalam hal ini.
Temuan utama
- Dengan menggunakan Chrome Developer Tools, Anda dapat dengan mudah menganalisis kondisi aplikasi Anda.
- Pemeriksaan tipe di TypeScript membantu mendeteksi kesalahan sejak awal sebelum kode dieksekusi.
- Arti tipe dan penanganan nilai yang benar sangat penting untuk menghindari kesalahan.
Petunjuk langkah demi langkah
Pertama, jalankan peramban Chrome dan muat aplikasi web dengan implementasi TypeScript kalkulator. Proyek seharusnya sudah berjalan di server sehingga Anda dapat membuka file HTML di Chrome.
Sekarang Anda harus memastikan bahwa file TypeScript dan file JavaScript (file yang di-transpile) telah tersedia di dalam proyek Anda. File TypeScript berisi komentar dan informasi tipe, sedangkan file JavaScript yang telah di-transpile tidak berisi informasi ini.
Buka Chrome Developer Tools dengan mengklik kanan pada halaman dan memilih "Explore" atau menekan F12. Buka tab "Elements" untuk melihat kode HTML halaman dan memastikan bahwa bidang input dan tombol telah diatur dengan benar.
Kalkulator memiliki dua bidang input untuk angka dan tombol untuk memicu penambahan. Anda dapat memasukkan beberapa nilai uji dan mengklik tombol. Anda akan melihat bahwa penjumlahan tidak dihitung dengan benar; Anda mungkin mendapatkan 22, bukannya 4. Debugging diperlukan untuk mengklarifikasi penyimpangan ini.
Sekarang tetapkan breakpoint pada kode Anda dengan mengklik fungsi pendengar peristiwa. Hal ini dilakukan di bagian yang bertanggung jawab untuk penambahan. Ketika Anda memasukkan nilai di kolom input dan menekan tombol, Anda akan masuk ke debugger.
Anda dapat memeriksa variabel dalam tampilan debugger. Secara khusus, penting untuk memeriksa teks bagian dalam dan nilai dari kolom input untuk melihat nilai mana yang dilewatkan. Anda akan melihat bahwa nilai dari kolom input bertipe String, dan bukan bertipe Number seperti yang Anda harapkan.
Konflik tipe ini berarti bahwa penambahan tidak bekerja dengan benar. Alih-alih menambahkan angka-angka tersebut, mereka digabungkan. Contohnya adalah: input "1" dan "6" menghasilkan "16", yang bukan merupakan hasil yang diinginkan. Kesalahan logika ini mudah dipahami, tetapi penting untuk diidentifikasi.
Sekarang Anda harus memperbaiki kesalahan tersebut. Kembali ke file TypeScript Anda di Visual Studio Code dan ubah cara nilai diproses. Alih-alih n1.value + n2.value, Anda harus menggunakan n1.valueAsNumber + n2.valueAsNumber untuk memastikan bahwa nilai tersebut adalah angka dan bukan string.
Setelah Anda melakukan perubahan, simpan file dan muat ulang halaman di Chrome. Anda kemudian harus melihat kembali nilai di kolom input sebelum menambahkannya. Kali ini, jumlah yang benar dari dua angka akan ditampilkan.
Jika semuanya telah dilakukan dengan benar, jumlah sekarang akan ditampilkan sebagai "10" ketika Anda menekan tombol jika Anda memasukkan nilai "2" dan "8", misalnya. Anda sekarang telah berhasil memperbaiki kesalahan dan mempelajari betapa pentingnya ketepatan pengetikan dalam TypeScript.
Selain itu, Anda dapat memanfaatkan TypeScript dengan mendefinisikan tipe variabel dengan jelas. Hal ini secara signifikan mengurangi kemungkinan terjadinya kesalahan pada saat runtime. Selalu pastikan untuk menentukan tipe untuk mempermudah debugging.
Terakhir, Anda juga telah melihat betapa pentingnya Chrome Developer Tools untuk menganalisis kode dan perilaku aplikasi secara real time. Debugging dengan alat ini dapat berkontribusi secara signifikan untuk meningkatkan proses pengembangan Anda.
Rangkuman
Dalam panduan ini, Anda telah mempelajari cara men-debug aplikasi TypeScript sederhana. Perhatian khusus diberikan pada penggunaan Chrome Developer Tools, dengan mempertimbangkan tipe-tipe dalam TypeScript. Pada akhirnya, Anda menyadari betapa pentingnya mendeteksi kesalahan sejak dini dan betapa pentingnya pemeriksaan tipe dalam TypeScript.
