Mencari dan mengurangi bug atau kerusakan di dalam
sebuah program komputer merupakan suatu keharusan dilakukan sebelum
mengeksekusinya sebagai aplikasi bisnis yang di distribusikan agar tidak
terjadi komplain di kemudian hari. Proses pencarian bug tersebut biasa disebut
dengan debugging.
Pada visual studio dengan projek ASP.NET MVC proses
debugging dapat dilakukan pada Visual Studio, Browser, dan SQL Server. Proses
debugging menjadi sangat rumit ketika script yang digunakan semakin kompleks.
Hal ini membuat kita sering lupa dasar-dasar debugging yang tepat. Kadang-kadang
kita terus berputar-putar di satu class atau method dengan mencari ke anehan
pada script karena terlalu cepatnya melakukan pencarian dengan menekan tombol
F10 membuat proses error tidak terlihat. Proses debugging ini harus dilakukan
secara pelan-pelan dan tidak harus secara terburu-buru.
Pada artikel kali ini, Agung Panduan akan membagi
sedikit trik proses debugging pada Visual Studio, Browser, dan SQL Server.
DEBUGGING PADA VISUAL STUDIO
Pertama,
Jika anda menggunakan AJAX pada cshtml untuk mengirimkan data ke controller
pastikan penamaan parameter pada AJAX sama dengan penamaan pada Controller dan samahalnya
dari Repositories ke SQL namun dari Controller ke Repositories bedapun tidak
masalah yang penting tipe data yang dikirim dari AJAX > Controller >
Repositories > SQL bertipe sama.
Walapun masalah tipe data dapat dilakukan convert ke type data yang
diperlukan.
Penamaan AJAX pada cshtml dan Controller.css
Penamaan Repositories dan SQL
Kedua,
Jika sudah memastikan penamaan yang digunakan sama selanjutnya. Lakukan
penandaan debugging misalnya kita akan pengecekan proses Insert Data. Lakukan
Debug pada Controller dan Repositories-nya.
Repositories RddRepo.cs
RddController.cs
Ketiga,
Lakukan CTRL + F5 untuk melakukan Running secara otomatis akan terhenti pada
bagian yang ditandai debugging. Tekan F10 untuk mengetahui value yang
dihasilkan setiap barisnya. Jika ada proses yang seharusnya masuk dalam proses
maka nilai yang didapatkan pada proses sebelumnya ada yang error.
Keempat,
Pengecekan value yang dihasilkan dapat dilakukan mengarahkan mouse ke nama
variable atau parameter yang akan dikirim ke SQL Server pada method SqlParameter
yang di debugging. Hal yang harus dicek pada parameter tersebut adalah apakah
parameter (NULL or NOT NULL or DATA TYPE) sesuai tidak dengan yang dibutuhkan
oleh kolom pada table di database.
Adapun penyebab yang sering terjadi:
1. Adanya nilai NULL
- Data yang diambil pada cshtml bukan berasal ID textboxt, select, checkbox, dan lain-lain yang terdaftar atau salah penulisan $(“#txtRdId”).val().
- Textbox atau lainnya dalam ke adaan kosong.
2. Adanya Perbedaan Data Type:
3. Adanya jumlah character (length) yang dikirim melebihi
maximum length. Harusnya varchar(10) yang dikirim varchar(30).
4. Tidak diijinkan pengambilan nilai.
5. Dan mungkin anda bisa menambahkan?
Saran: Untuk memberikan kesan baik pada saat muncul
pesan error lakukanlah proses validasai pada javascript, csharp, atau sql
server.
DEBUGGING PADA BROWSER
Untuk memudahkan dalam memahami cara debugging para
browser diperlukan sebuah contoh error misalkan muncul pesan error Alert dengan
pesan Localhost Say Object Object. Jika kita perhatikan pesan yang
tampil tidak menampilkan value yang benar harusnya value dengan type string
atau angka. Maka kita simpulkan value
tidak diperoleh atau null.
Adapun untuk pengecekannnya dapat melakukan
langkah-langkah berikut ini,
Pertama,
Klik kanan mouse pada browser lalu klik Inspect > Source.
Kedua,
Lakukan proses yang akan anda cek pada cshtml yang dimaksud misalkan pada
Appr.chtml. Sebelum melakukan pengecekan jangan lupa sorot nomor barisnya
terlebih dahulu agar proses running terhenti (pause) secara otomatis.
Ketiga, Tekan tombol F10 untuk melanjutkan proses
running per baris. Pada contoh kasus error Localhost Say Object Object, anda
dapat mengfokuskan kepada method yang menampilkan pesan yang ada pada success
dan error. Ternyata terjadi Internal Server Error.
Keempat,
Lanjutkan F10 maka akan secara otomatis pada baris tersebut akan diberi garis
bawah merah dan diberikan tanda silang merah. Arahkan mouse pada silang merah
untuk mengetahui pesan erronya yaitu Uncaught ReferenceError:
handleAjaxResponseErrorGrowlq is not defined.
Namun untuk kasus Localhost Say Object Object
itu terjadi karena kesalahan penempatan method perintah handleAjaxResultGrowl yang
seharusnya di tempatkan dalam success tetapi yang terjadi ditempatkan di error.
Jika di periksa pada method handleAjaxResultGrowl yang
merupakan dari common.js pada bootstrap, returnResult yang dihasilkan “undefined”
maka masuk dalam kondisi else yang akan menampilkan alert.
Kelima, Kembali pada pesan error Uncaught
ReferenceError: handleAjaxResponseErrorGrowlq is not defined. Bisa di cek pada inspect > Network dan
pilih dan klik pada list yang berwarna merah, akan muncul pesan error “Server
Error in '/' Application”.
Pesan error tersebut biasanya muncul karena terjadi
kesalahan pengetikan (typo) pada salah satu kata yang digunakan pada script.
Untuk contoh kasus ini perhatikan pada $.ajax({}); setiap barisnya apakah ada kata
yang salah ketik. Contoh menulis “type” tetapi yang di tulis “tpe”.
Atau penulisan url: "@Url.Content("~/App/GetByKey")" tidak sama dengan penulisan pada
file cs nya.
CARA DEBUGGING VALUE DI BROWSER DAN VISUAL STUDIO
Terkadang validasi error terlewati namun data yang
dibutuhkan tidak diperoleh atau tidak di tampilkan ada textbox atau gridview. Misalkan
data yang dicari berdasarkan parameter tertentu contohnya product_id.
Pertama, lihat apakah ada <input> yang menampung
product_id tersebut pada file AddModalEdit.cshtml.
Kedua, Lakukan proses inspect > console lalu
masukan “$(“#txtAddEditProjectId”).val();” seperti di bawah ini,
Ketiga, Apakah ada proses yang memberikan value pada <input>
dengan id=txtAddEditProjectId.
Keempat, apakah ada proses pengambilan data dari <input>
dengan id=txtAddEditProjectId.
MENDAPATKAN NAMA ELEMENT ID DI BROWSER
Jika sebelumnya anda mencari nama element id pada file cshtml di
visual studio dengan banyak baris yang dibuat membuat anda harus menggunakan
CTRL + F dan menuliskan kata kunci yang berhubungan dengan nama element id.
Cara tersebut menurut saya terlalu lama. Ada cara termudah untuk dapat langsung
mengetahui nama Element ID yaitu dengan cara klik kanan mouse pada salah satu
Textbox atau combobox lalu pilih Inspect secara otomatis akan masuk ke tab
elemet dan menunjukan Nama Element ID yang dimaksud.
EVALUATE SELECTED TEXT IN CONSOLE
Anda pernah mengecek value yang di dapat oleh sebuah
$("#...").val() di dalam Inspect > Console dengan cara mengetiknya
secara manual. Menurut saya cara itu sedikit lebih lama. Untuk mengurangi waktu
prosesnya anda dapat memanfaatkan Inspect > Source. Dimana anda cukup
mencari $("#...").val() dengan id yang dimaksud lalu sorot $("#...").val() atau nama var tertentu selanjutnya klik kanan mouse pilih Evaluate Selected Text in Console seperti
Bukalah Inspect > Console maka $("#...").val() atau nama var akan di eksekusi di Console seperti halnya gambar pada Cara Debugging Value di atas.
Share This :
0 Comments