ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Cara Debug Visual Studio Dan Debug Di Browser

1/21/2020
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

Controller dan AJAX JSON

Penamaan Repositories dan SQL

Visual Studio 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

Debugging Visual Studio

RddController.cs

Debugging Visual Studio
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.

Debugging Visual Studio

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. 
Debugging Browser
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.

Debugging Browser
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”.
Debugging Browser
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