Bagikan melalui

Memahami kemampuan penelusuran kesalahan AJAX ASP.NET

oleh Scott Cate

Kemampuan untuk men-debug kode adalah keterampilan yang harus dimiliki setiap pengembang di gudang senjata mereka terlepas dari teknologi yang mereka gunakan. Meskipun banyak pengembang terbiasa menggunakan Visual Studio .NET atau Web Developer Express untuk men-debug aplikasi ASP.NET yang menggunakan kode VB.NET atau C#, beberapa tidak menyadari bahwa itu juga sangat berguna untuk men-debug kode sisi klien seperti JavaScript. Jenis teknik yang sama yang digunakan untuk men-debug aplikasi .NET juga dapat diterapkan ke aplikasi berkemampuan AJAX dan lebih khusus ASP.NET aplikasi AJAX.

Penelusuran kesalahan ASP.NET Aplikasi AJAX

Dan Wahlin

Kemampuan untuk men-debug kode adalah keterampilan yang harus dimiliki setiap pengembang di gudang senjata mereka terlepas dari teknologi yang mereka gunakan. Tidak perlu dikatakan bahwa memahami berbagai opsi debugging yang tersedia dapat menghemat banyak waktu pada proyek dan bahkan mungkin beberapa sakit kepala. Meskipun banyak pengembang terbiasa menggunakan Visual Studio .NET atau Web Developer Express untuk men-debug aplikasi ASP.NET yang menggunakan kode VB.NET atau C#, beberapa tidak menyadari bahwa itu juga sangat berguna untuk men-debug kode sisi klien seperti JavaScript. Jenis teknik yang sama yang digunakan untuk men-debug aplikasi .NET juga dapat diterapkan ke aplikasi berkemampuan AJAX dan lebih khusus ASP.NET aplikasi AJAX.

Dalam artikel ini Anda akan melihat bagaimana Visual Studio 2008 dan beberapa alat lainnya dapat digunakan untuk men-debug ASP.NET aplikasi AJAX untuk menemukan bug dan masalah lainnya dengan cepat. Diskusi ini akan mencakup informasi tentang mengaktifkan Internet Explorer 6 atau lebih tinggi untuk penelusuran kesalahan, menggunakan Visual Studio 2008 dan Script Explorer untuk menelusuri kode serta menggunakan alat gratis lainnya seperti Web Development Helper. Anda juga akan mempelajari cara men-debug ASP.NET aplikasi AJAX di Firefox menggunakan ekstensi bernama Firebug yang memungkinkan Anda menelusuri kode JavaScript langsung di browser tanpa alat lain. Terakhir, Anda akan diperkenalkan ke kelas di Pustaka AJAX ASP.NET yang dapat membantu berbagai tugas penelusuran kesalahan seperti pernyataan penelusuran dan pernyataan kode.

Sebelum Anda mencoba men-debug halaman yang ditampilkan di Internet Explorer, ada beberapa langkah dasar yang perlu Anda lakukan untuk mengaktifkannya untuk penelusuran kesalahan. Mari kita lihat beberapa persyaratan penyiapan dasar yang perlu dilakukan untuk memulai.

Mengonfigurasi Internet Explorer untuk Penelusuran Kesalahan

Sebagian besar orang tidak tertarik untuk melihat masalah JavaScript yang dihadapi di Situs Web yang dilihat dengan Internet Explorer. Bahkan, rata-rata pengguna bahkan tidak akan tahu apa yang harus dilakukan jika mereka melihat pesan kesalahan. Akibatnya, opsi penelusuran kesalahan dinonaktifkan secara default di browser. Namun, sangat mudah untuk mengaktifkan debugging dan menggunakannya saat Anda mengembangkan aplikasi AJAX baru.

Untuk mengaktifkan fungsionalitas penelusuran kesalahan, buka Alat Opsi Internet pada menu Internet Explorer dan pilih tab Tingkat Lanjut. Di dalam bagian Penjelajahan pastikan bahwa item berikut ini tidak dicentang:

  • Menonaktifkan penelusuran kesalahan skrip (Internet Explorer)
  • Menonaktifkan penelusuran kesalahan skrip (Lainnya)

Meskipun tidak diperlukan, jika Anda mencoba men-debug aplikasi, Anda mungkin ingin kesalahan JavaScript apa pun di halaman segera terlihat dan jelas. Anda dapat memaksa semua kesalahan untuk ditampilkan dengan kotak pesan dengan mencentang kotak centang "Tampilkan pemberitahuan tentang setiap kesalahan skrip". Meskipun ini adalah opsi yang bagus untuk mengaktifkan saat Anda mengembangkan aplikasi, ini dapat dengan cepat menjadi mengganggu jika Anda hanya mengganggu Situs Web lain karena kemungkinan Anda mengalami kesalahan JavaScript cukup bagus.

Gambar 1 memperlihatkan apa yang harus dilihat dialog tingkat lanjut Internet Explorer setelah dikonfigurasi dengan benar untuk penelusuran kesalahan.

Mengonfigurasi Internet Explorer untuk penelusuran kesalahan.

Gambar 1: Mengonfigurasi Internet Explorer untuk penelusuran kesalahan. (Klik untuk melihat gambar ukuran penuh)

Setelah penelusuran kesalahan diaktifkan, Anda akan melihat item menu baru muncul di menu Tampilan bernama Script Debugger. Ini memiliki dua opsi yang tersedia termasuk Buka dan Hentikan pada Pernyataan Berikutnya. Saat Buka dipilih, Anda akan diminta untuk men-debug halaman di Visual Studio 2008 (perhatikan bahwa Visual Web Developer Express juga dapat digunakan untuk penelusuran kesalahan). Jika Visual Studio .NET saat ini sedang berjalan, Anda dapat memilih untuk menggunakan instans tersebut atau untuk membuat instans baru. Saat Berhenti di Pernyataan Berikutnya dipilih, Anda akan diminta untuk men-debug halaman saat kode JavaScript dijalankan. Jika kode JavaScript dijalankan dalam peristiwa onLoad halaman, Anda dapat me-refresh halaman untuk memicu sesi debug. Jika kode JavaScript dijalankan setelah tombol diklik maka debugger akan berjalan segera setelah tombol diklik.

Catatan

Jika Anda menjalankan Windows Vista dengan Access Control Pengguna (UAC) diaktifkan, dan Anda memiliki Visual Studio 2008 yang diatur untuk dijalankan sebagai administrator, Visual Studio akan gagal melampirkan ke proses saat Anda diminta untuk melampirkan. Untuk mengatasi masalah ini, mulai Visual Studio terlebih dahulu, dan gunakan instans tersebut untuk men-debug.

Meskipun bagian berikutnya akan menunjukkan cara men-debug halaman AJAX ASP.NET langsung dari dalam Visual Studio 2008, menggunakan opsi Internet Explorer Script Debugger berguna ketika halaman sudah terbuka dan Anda ingin memeriksanya lebih lengkap.

Penelusuran kesalahan dengan Visual Studio 2008

Visual Studio 2008 menyediakan fungsi debugging yang diandalkan pengembang di seluruh dunia setiap hari untuk men-debug aplikasi .NET. Debugger bawaan memungkinkan Anda menelusuri kode, melihat data objek, watch untuk variabel tertentu, memantau tumpukan panggilan ditambah banyak lagi. Selain men-debug VB.NET atau kode C#, debugger juga berguna untuk penelusuran kesalahan ASP.NET aplikasi AJAX dan akan memungkinkan Anda untuk melangkah melalui baris demi baris kode JavaScript. Detail yang mengikuti fokus pada teknik yang dapat digunakan untuk men-debug file skrip sisi klien daripada memberikan wacana tentang proses keseluruhan aplikasi penelusuran kesalahan menggunakan Visual Studio 2008.

Proses penelusuran kesalahan halaman di Visual Studio 2008 dapat dimulai dengan beberapa cara berbeda. Pertama, Anda dapat menggunakan opsi Debugger Skrip Internet Explorer yang disebutkan di bagian sebelumnya. Ini berfungsi dengan baik ketika halaman sudah dimuat di browser dan Anda ingin mulai men-debugnya. Atau, Anda dapat mengklik kanan halaman .aspx di Penjelajah Solusi dan memilih Atur Sebagai Halaman Mulai dari menu. Jika Anda terbiasa men-debug halaman ASP.NET maka Anda mungkin telah melakukan ini sebelumnya. Setelah F5 ditekan, halaman dapat di-debug. Namun, meskipun Anda umumnya dapat mengatur titik henti di mana saja yang Anda inginkan dalam kode VB.NET atau C#, itu tidak selalu terjadi dengan JavaScript seperti yang akan Anda lihat berikutnya.

Skrip Tersemat Versus Eksternal

Debugger Visual Studio 2008 memperlakukan JavaScript yang disematkan di halaman yang berbeda dari file JavaScript eksternal. Dengan file skrip eksternal, Anda dapat membuka file dan mengatur titik henti pada baris apa pun yang Anda pilih. Titik henti dapat diatur dengan mengklik di area baki abu-abu di sebelah kiri jendela editor kode. Saat JavaScript disematkan langsung ke halaman menggunakan <script> tag , mengatur titik henti dengan mengklik di area baki abu-abu bukanlah pilihan. Upaya untuk mengatur titik henti pada baris skrip yang disematkan akan menghasilkan peringatan yang menyatakan "Ini bukan lokasi yang valid untuk titik henti".

Anda dapat mengatasi masalah ini dengan memindahkan kode ke file .js eksternal dan mereferensikannya menggunakan atribut <src tag skrip> :

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Bagaimana jika memindahkan kode ke file eksternal bukanlah opsi atau memerlukan lebih banyak pekerjaan daripada yang layak? Meskipun Anda tidak dapat mengatur titik henti menggunakan editor, Anda dapat menambahkan pernyataan debugger langsung ke dalam kode tempat Anda ingin memulai penelusuran kesalahan. Anda juga dapat menggunakan kelas Sys.Debug yang tersedia di pustaka AJAX ASP.NET untuk memaksa penelusuran kesalahan dimulai. Anda akan mempelajari selengkapnya tentang kelas Sys.Debug nanti di artikel ini.

Contoh penggunaan debugger kata kunci ditampilkan di Daftar 1. Contoh ini memaksa debugger untuk memutuskan tepat sebelum panggilan ke fungsi pembaruan dilakukan.

Daftar 1. Menggunakan kata kunci debugger untuk memaksa debugger Visual Studio .NET rusak.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

Setelah pernyataan debugger terpukul, Anda akan diminta untuk men-debug halaman menggunakan Visual Studio .NET dan dapat mulai melangkah melalui kode. Saat melakukan ini, Anda mungkin mengalami masalah dengan mengakses ASP.NET file skrip pustaka AJAX yang digunakan di halaman sehingga mari kita lihat menggunakan Visual Studio . Penjelajah Skrip NET.

Menggunakan Visual Studio .NET Windows untuk Debug

Setelah sesi debug dimulai dan Anda mulai menelusuri kode menggunakan kunci F11 default, Anda mungkin mengalami dialog kesalahan yang ditampilkan di lihat Gambar 2 kecuali semua file skrip yang digunakan di halaman terbuka dan tersedia untuk penelusuran kesalahan.

Dialog kesalahan ditampilkan ketika tidak ada kode sumber yang tersedia untuk penelusuran kesalahan.

Gambar 2: Dialog kesalahan ditampilkan ketika tidak ada kode sumber yang tersedia untuk penelusuran kesalahan. (Klik untuk melihat gambar ukuran penuh)

Dialog ini ditampilkan karena Visual Studio .NET tidak yakin cara masuk ke kode sumber beberapa skrip yang dirujuk oleh halaman. Meskipun ini bisa sangat membuat frustrasi pada awalnya, ada perbaikan sederhana. Setelah Anda memulai sesi debug dan mencapai titik henti, buka jendela Debug Windows Script Explorer di menu Visual Studio 2008 atau gunakan tombol hotkey Ctrl+Alt+N.

Catatan

Jika Anda tidak dapat melihat menu Penjelajah Skrip tercantum, buka Alat>Kustomisasi>Perintah pada menu Visual Studio .NET. Temukan entri Debug di bagian Kategori dan klik untuk menampilkan semua entri menu yang tersedia. Di daftar Perintah, gulir ke bawah ke Penjelajah Skrip lalu seret ke atas ke menu Debug Windows yang disebutkan sebelumnya. Melakukan ini akan membuat entri menu Script Explorer tersedia setiap kali Anda menjalankan Visual Studio .NET.

Penjelajah Skrip dapat digunakan untuk melihat semua skrip yang digunakan dalam halaman dan membukanya di editor kode. Setelah Script Explorer terbuka, klik dua kali pada halaman .aspx yang saat ini sedang di-debug untuk membukanya di jendela editor kode. Lakukan tindakan yang sama untuk semua skrip lain yang ditampilkan di Penjelajah Skrip. Setelah semua skrip terbuka di jendela kode, Anda dapat menekan F11 (dan menggunakan hotkey debug lainnya) untuk menelusuri kode Anda. Gambar 3 memperlihatkan contoh Penjelajah Skrip. Ini mencantumkan file saat ini yang sedang di-debug (Demo.aspx) serta dua skrip kustom dan dua skrip yang disuntikkan secara dinamis ke halaman oleh ASP.NET AJAX ScriptManager.

Penjelajah Skrip menyediakan akses mudah ke skrip yang digunakan dalam halaman.

Gambar 3. Penjelajah Skrip menyediakan akses mudah ke skrip yang digunakan dalam halaman. (Klik untuk melihat gambar ukuran penuh)

Beberapa jendela lain juga dapat digunakan untuk memberikan informasi yang berguna saat Anda menelusuri kode di halaman. Misalnya, Anda dapat menggunakan jendela Lokal untuk melihat nilai variabel berbeda yang digunakan di halaman, jendela Langsung untuk mengevaluasi variabel atau kondisi tertentu dan melihat output. Anda juga dapat menggunakan jendela Output untuk melihat pernyataan jejak yang ditulis menggunakan fungsi Sys.Debug.trace (yang akan dibahas nanti dalam artikel ini) atau fungsi Debug.writeln Internet Explorer.

Saat Anda menelusuri kode menggunakan debugger, Anda dapat menelusuri variabel dalam kode untuk melihat nilai yang ditetapkan. Namun, debugger skrip kadang-kadang tidak akan menampilkan apa pun saat Anda mouse di atas variabel JavaScript tertentu. Untuk melihat nilainya, sorot pernyataan atau variabel yang coba Anda lihat di jendela editor kode lalu arahkan mouse ke atasnya. Meskipun teknik ini tidak berfungsi dalam setiap situasi, sering kali Anda akan dapat melihat nilai tanpa harus melihat di jendela debug yang berbeda seperti jendela Lokal.

Tutorial video yang menunjukkan beberapa fitur yang dibahas di sini dapat dilihat di http://www.xmlforasp.net.

Penelusuran kesalahan dengan Pembantu Pengembangan Web

Meskipun Visual Studio 2008 (dan Visual Web Developer Express 2008) adalah alat debugging yang sangat mampu, ada opsi tambahan yang dapat digunakan juga yang lebih ringan. Salah satu alat terbaru yang akan dirilis adalah Web Development Helper. Nikhil Kothari microsoft (salah satu kunci ASP.NET arsitek AJAX di Microsoft) menulis alat luar biasa ini yang dapat melakukan banyak tugas berbeda mulai dari penelusuran kesalahan sederhana hingga melihat permintaan HTTP dan pesan respons.

Pembantu Pengembangan Web dapat digunakan langsung di dalam Internet Explorer yang membuatnya nyaman digunakan. Ini dimulai dengan memilih Alat Bantuan Pengembangan Web dari menu Internet Explorer. Ini akan membuka alat di bagian bawah browser yang bagus karena Anda tidak perlu meninggalkan browser untuk melakukan beberapa tugas seperti permintaan HTTP dan pengelogan pesan respons. Gambar 4 memperlihatkan seperti apa Web Development Helper dalam tindakan.

Pembantu Pengembangan Web

Gambar 4: Pembantu Pengembangan Web (Klik untuk melihat gambar ukuran penuh)

Pembantu Pengembangan Web bukanlah alat yang akan Anda gunakan untuk menelusuri baris kode menurut baris seperti halnya Visual Studio 2008. Namun, ini dapat digunakan untuk melihat output jejak, dengan mudah mengevaluasi variabel dalam skrip atau menjelajahi data berada di dalam objek JSON. Ini juga sangat berguna untuk melihat data yang diteruskan ke dan dari halaman AJAX ASP.NET dan server.

Setelah Pembantu Pengembangan Web terbuka di Internet Explorer, penelusuran kesalahan skrip harus diaktifkan dengan memilih Skrip Aktifkan Penelusuran Kesalahan Skrip dari menu pembantu Pengembangan Web seperti yang ditunjukkan sebelumnya di Gambar 4. Ini memungkinkan alat untuk mencegat kesalahan yang terjadi saat halaman dijalankan. Ini juga memungkinkan akses mudah untuk melacak pesan yang merupakan output di halaman. Untuk melihat informasi pelacakan atau menjalankan perintah skrip untuk menguji fungsi yang berbeda dalam halaman, pilih Skrip Tampilkan Konsol Skrip dari menu Bantuan Pengembangan Web. Ini menyediakan akses ke jendela perintah dan jendela langsung sederhana.

Menampilkan Lacak Pesan dan Data Objek JSON

Jendela langsung dapat digunakan untuk menjalankan perintah skrip atau bahkan memuat atau menyimpan skrip yang digunakan untuk menguji fungsi yang berbeda di halaman. Jendela perintah menampilkan pesan jejak atau debug yang ditulis oleh halaman yang sedang dilihat. Daftar 2 memperlihatkan cara menulis pesan pelacakan menggunakan fungsi Debug.writeln Internet Explorer.

Daftar 2. Menulis pesan pelacakan sisi klien menggunakan kelas Debug.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

Jika properti LastName berisi nilai Doe, Web Development Helper akan menampilkan pesan "Nama orang: Doe" di jendela perintah konsol skrip (dengan asumsi bahwa penelusuran kesalahan telah diaktifkan). Web Development Helper juga menambahkan objek debugService tingkat atas ke dalam halaman yang dapat digunakan untuk menulis informasi pelacakan atau melihat konten objek JSON. Daftar 3 menunjukkan contoh penggunaan fungsi pelacakan kelas debugService.

Daftar 3. Menggunakan kelas debugService Bantuan Pengembangan Web untuk menulis pesan pelacakan.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

Fitur bagus dari kelas debugService adalah bahwa itu akan berfungsi bahkan jika debugging tidak diaktifkan di Internet Explorer sehingga mudah untuk selalu mengakses data pelacakan saat Web Development Helper berjalan. Ketika alat tidak digunakan untuk men-debug halaman, pernyataan jejak akan diabaikan karena panggilan ke window.debugService akan mengembalikan false.

Kelas debugService juga memungkinkan data objek JSON dilihat menggunakan jendela inspektur Pembantu Pengembangan Web. Daftar 4 membuat objek JSON sederhana yang berisi data orang. Setelah objek dibuat, panggilan dilakukan ke fungsi inspeksi kelas debugService untuk memungkinkan objek JSON diperiksa secara visual.

Daftar 4. Menggunakan fungsi debugService.inspect untuk melihat data objek JSON.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

Memanggil fungsi GetPerson() di halaman atau melalui jendela langsung akan mengakibatkan jendela dialog Pemeriksa Objek muncul seperti yang ditunjukkan pada Gambar 5. Properti dalam objek dapat diubah secara dinamis dengan menyorotinya, mengubah nilai yang diperlihatkan dalam kotak teks Nilai lalu mengklik tautan Perbarui. Menggunakan Object Inspector memudahkan untuk melihat data objek JSON dan bereksperimen dengan menerapkan nilai yang berbeda ke properti.

Kesalahan Penelusuran Kesalahan

Selain mengizinkan data pelacakan dan objek JSON ditampilkan, pembantu Pengembangan Web juga dapat membantu dalam men-debug kesalahan di halaman. Jika terjadi kesalahan, Anda akan diminta untuk melanjutkan ke baris kode berikutnya atau men-debug skrip (lihat Gambar 6). Jendela dialog Kesalahan Skrip memperlihatkan tumpukan panggilan lengkap serta nomor baris sehingga Anda dapat dengan mudah mengidentifikasi di mana masalah berada dalam skrip.

Menggunakan jendela Pemeriksa Objek untuk melihat objek JSON.

Gambar 5: Menggunakan jendela Object Inspector untuk melihat objek JSON. (Klik untuk melihat gambar ukuran penuh)

Memilih opsi debug memungkinkan Anda untuk menjalankan pernyataan skrip langsung di jendela langsung Bantuan Pengembangan Web untuk melihat nilai variabel, menulis objek JSON, ditambah lebih banyak lagi. Jika tindakan yang sama yang memicu kesalahan dilakukan lagi dan Visual Studio 2008 tersedia di komputer, Anda akan diminta untuk memulai sesi debug sehingga Anda dapat menelusuri baris demi baris kode seperti yang dibahas di bagian sebelumnya.

Dialog Kesalahan Skrip Pembantu Pengembangan Web

Gambar 6: Dialog Kesalahan Skrip Pembantu Pengembangan Web (Klik untuk melihat gambar ukuran penuh)

Memeriksa Pesan Permintaan dan Respons

Meskipun penelusuran kesalahan ASP.NET halaman AJAX, sering kali berguna untuk melihat pesan permintaan dan respons yang dikirim antara halaman dan server. Menampilkan konten dalam pesan memungkinkan Anda melihat apakah data yang tepat sedang diteruskan serta ukuran pesan. Web Development Helper menyediakan fitur pencatat pesan HTTP yang sangat baik yang memudahkan untuk melihat data sebagai teks mentah atau dalam format yang lebih mudah dibaca.

Untuk melihat ASP.NET pesan permintaan dan respons AJAX, pencatat HTTP harus diaktifkan dengan memilih HTTP Aktifkan Pengelogan HTTP dari menu Pembantu Pengembangan Web. Setelah diaktifkan, semua pesan yang dikirim dari halaman saat ini dapat dilihat di penampil log HTTP yang dapat diakses dengan memilih HTTP Tampilkan Log HTTP.

Meskipun melihat teks mentah yang dikirim di setiap pesan permintaan/respons tentu berguna (dan opsi di Web Development Helper), sering kali lebih mudah untuk melihat data pesan dalam format yang lebih grafis. Setelah pengelogan HTTP diaktifkan dan pesan dicatat, data pesan dapat dilihat dengan mengklik dua kali pada pesan di penampil log HTTP. Melakukan ini memungkinkan Anda untuk melihat semua header yang terkait dengan pesan serta konten pesan aktual. Gambar 7 memperlihatkan contoh pesan permintaan dan pesan respons yang ditampilkan di jendela Penampil Log HTTP.

Menggunakan Penampil Log HTTP untuk melihat data pesan permintaan dan respons.

Gambar 7: Menggunakan Penampil Log HTTP untuk melihat data pesan permintaan dan respons. (Klik untuk melihat gambar ukuran penuh)

Penampil Log HTTP secara otomatis mengurai objek JSON dan menampilkannya menggunakan tampilan pohon sehingga cepat dan mudah untuk melihat data properti objek. Saat UpdatePanel digunakan di halaman AJAX ASP.NET, penampil memecah setiap bagian pesan menjadi bagian individual seperti yang ditunjukkan pada Gambar 8. Ini adalah fitur hebat yang membuatnya jauh lebih mudah untuk melihat dan memahami apa yang ada dalam pesan dibandingkan dengan melihat data pesan mentah.

Pesan respons UpdatePanel ditampilkan menggunakan Penampil Log HTTP.

Gambar 8: Pesan respons UpdatePanel ditampilkan menggunakan Penampil Log HTTP. (Klik untuk melihat gambar ukuran penuh)

Ada beberapa alat lain yang dapat digunakan untuk melihat pesan permintaan dan respons selain Bantuan Pengembangan Web. Pilihan bagus lainnya adalah Fiddler yang tersedia secara gratis di http://www.fiddlertool.com. Meskipun Fiddler tidak akan dibahas di sini, ini juga merupakan opsi yang baik ketika Anda perlu memeriksa header pesan dan data secara menyeluruh.

Penelusuran kesalahan dengan Firefox dan Firebug

Sementara Internet Explorer masih merupakan browser yang paling banyak digunakan, browser lain seperti Firefox telah menjadi cukup populer dan sedang digunakan semakin banyak. Akibatnya, Anda mungkin ingin melihat dan men-debug halaman AJAX ASP.NET Anda di Firefox serta Internet Explorer untuk memastikan bahwa aplikasi Anda berfungsi dengan baik. Meskipun Firefox tidak dapat mengikat langsung ke Visual Studio 2008 untuk penelusuran kesalahan, Firefox memiliki ekstensi yang disebut Firebug yang dapat digunakan untuk men-debug halaman. Firebug dapat diunduh secara gratis dengan membuka http://www.getfirebug.com.

Firebug menyediakan lingkungan penelusuran kesalahan berfitur lengkap yang dapat digunakan untuk menelusuri baris demi baris kode, mengakses semua skrip yang digunakan dalam halaman, melihat struktur DOM, menampilkan gaya CSS, dan bahkan melacak peristiwa yang terjadi di halaman. Setelah diinstal, Firebug dapat diakses dengan memilih Alat Firebug Open Firebug dari menu Firefox. Seperti Web Development Helper, Firebug digunakan langsung di browser meskipun juga dapat digunakan sebagai aplikasi yang berdiri sendiri.

Setelah Firebug berjalan, titik henti dapat diatur pada baris file JavaScript apa pun apakah skrip disematkan di halaman atau tidak. Untuk mengatur titik henti, muat terlebih dahulu halaman yang sesuai yang ingin Anda debug di Firefox. Setelah halaman dimuat, pilih skrip untuk di-debug dari daftar drop-down Skrip Firebug. Semua skrip yang digunakan oleh halaman akan ditampilkan. Titik henti diatur dengan mengklik area baki abu-abu Firebug pada baris tempat titik henti harus dilakukan seperti yang akan Anda lakukan di Visual Studio 2008.

Setelah titik henti diatur di Firebug, Anda dapat melakukan tindakan yang diperlukan untuk menjalankan skrip yang perlu di-debug seperti mengklik tombol atau menyegarkan browser untuk memicu peristiwa onLoad. Eksekusi akan secara otomatis berhenti pada baris yang berisi titik henti. Gambar 9 memperlihatkan contoh titik henti yang telah dipicu di Firebug.

Menangani titik henti di Firebug.

Gambar 9: Menangani titik henti di Firebug. (Klik untuk melihat gambar ukuran penuh)

Setelah titik henti terpukul, Anda dapat melangkah ke, melangkahi atau keluar dari kode menggunakan tombol panah. Saat Anda menelusuri kode, variabel skrip ditampilkan di bagian kanan debugger yang memungkinkan Anda melihat nilai dan menelusuri paling detail ke dalam objek. Firebug juga menyertakan daftar drop-down Call Stack untuk melihat langkah-langkah eksekusi skrip yang mengarah ke baris saat ini yang sedang di-debug.

Firebug juga menyertakan jendela konsol yang dapat digunakan untuk menguji pernyataan skrip yang berbeda, mengevaluasi variabel, dan melihat output jejak. Ini diakses dengan mengklik tab Konsol di bagian atas jendela Firebug. Halaman yang di-debug juga dapat "diperiksa" untuk melihat struktur dan konten DOM-nya dengan mengklik tab Inspeksi. Saat Anda menunjuk elemen DOM yang berbeda yang ditampilkan di jendela inspektur, bagian halaman yang sesuai akan disorot sehingga mudah untuk melihat di mana elemen digunakan di halaman. Nilai atribut yang terkait dengan elemen tertentu dapat diubah "langsung" untuk bereksperimen dengan menerapkan lebar, gaya, dll yang berbeda. ke elemen . Ini adalah fitur bagus yang menyelamatkan Anda dari harus terus beralih antara editor kode sumber dan browser Firefox untuk melihat bagaimana perubahan sederhana memengaruhi halaman.

Gambar 10 memperlihatkan contoh penggunaan pemeriksa DOM untuk menemukan kotak teks bernama txtCountry di halaman. Pemeriksa Firebug juga dapat digunakan untuk melihat gaya CSS yang digunakan dalam halaman serta peristiwa yang terjadi seperti pelacakan gerakan mouse, klik tombol, ditambah banyak lagi.

Menggunakan inspektur DOM Firebug.

Gambar 10: Menggunakan inspektur DOM Firebug. (Klik untuk melihat gambar ukuran penuh)

Firebug menyediakan cara ringan untuk dengan cepat men-debug halaman langsung di Firefox serta alat yang sangat baik untuk memeriksa elemen yang berbeda di dalam halaman.

Dukungan Debugging di AJAX ASP.NET

Pustaka AJAX ASP.NET mencakup berbagai kelas yang dapat digunakan untuk menyederhanakan proses penambahan kemampuan AJAX ke halaman Web. Anda dapat menggunakan kelas ini untuk menemukan elemen dalam halaman dan memanipulasinya, menambahkan kontrol baru, memanggil Layanan Web, dan bahkan menangani peristiwa. Pustaka AJAX ASP.NET juga berisi kelas yang dapat digunakan untuk meningkatkan proses halaman penelusuran kesalahan. Di bagian ini Anda akan diperkenalkan ke kelas Sys.Debug dan melihat bagaimana hal itu dapat digunakan dalam aplikasi.

Menggunakan kelas Sys.Debug

Kelas Sys.Debug (kelas JavaScript yang terletak di namespace layanan Sys) dapat digunakan untuk melakukan beberapa fungsi berbeda termasuk menulis output pelacakan, melakukan pernyataan kode dan memaksa kode gagal sehingga dapat di-debug. Ini digunakan secara ekstensif dalam file debug pustaka AJAX ASP.NET (diinstal di C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 secara default) untuk melakukan pengujian bersyarat (disebut pernyataan) yang memastikan parameter diteruskan dengan benar ke fungsi, objek tersebut berisi data yang diharapkan dan untuk menulis pernyataan jejak.

Kelas Sys.Debug mengekspos beberapa fungsi berbeda yang dapat digunakan untuk menangani pelacakan, pernyataan kode, atau kegagalan seperti yang ditunjukkan dalam Tabel 1.

Tabel 1. Fungsi kelas Sys.Debug.

Nama fungsi Deskripsi
assert(condition, message, displayCaller) Menegaskan bahwa parameter kondisi benar. Jika kondisi yang sedang diuji salah, kotak pesan akan digunakan untuk menampilkan nilai parameter pesan. Jika parameter displayCaller benar, metode ini juga menampilkan informasi tentang pemanggil.
clearTrace() Menghapus output pernyataan dari operasi pelacakan.
fail(message) Menyebabkan program menghentikan eksekusi dan masuk ke debugger. Parameter pesan dapat digunakan untuk memberikan alasan kegagalan.
trace(message) Menulis parameter pesan ke output jejak.
traceDump(object, name) Mengeluarkan data objek dalam format yang dapat dibaca. Parameter nama dapat digunakan untuk menyediakan label untuk dump pelacakan. Setiap sub-objek dalam objek yang dicadangkan akan ditulis secara default.

Pelacakan sisi klien dapat digunakan dengan cara yang sama seperti fungsionalitas pelacakan yang tersedia di ASP.NET. Ini memungkinkan pesan yang berbeda untuk dengan mudah dilihat tanpa mengganggu alur aplikasi. Daftar 5 menunjukkan contoh penggunaan fungsi Sys.Debug.trace untuk menulis ke log jejak. Fungsi ini hanya mengambil pesan yang harus ditulis sebagai parameter.

Daftar 5. Menggunakan fungsi Sys.Debug.trace.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

Jika Anda menjalankan kode yang ditampilkan di Listing 5, Anda tidak akan melihat output jejak apa pun di halaman. Satu-satunya cara untuk melihatnya adalah dengan menggunakan jendela konsol yang tersedia di Visual Studio .NET, Web Development Helper, atau Firebug. Jika Anda ingin melihat output jejak di halaman maka Anda harus menambahkan tag TextArea dan memberinya id TraceConsole seperti yang ditunjukkan berikutnya:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Setiap pernyataan Sys.Debug.trace di halaman akan ditulis ke TraceConsole TextArea.

Dalam kasus di mana Anda ingin melihat data yang terkandung dalam objek JSON, Anda dapat menggunakan fungsi traceDump kelas Sys.Debug. Fungsi ini mengambil dua parameter termasuk objek yang harus dicadangkan ke konsol jejak dan nama yang dapat digunakan untuk mengidentifikasi objek dalam output jejak. Daftar 6 menunjukkan contoh penggunaan fungsi traceDump.

Daftar 6. Menggunakan fungsi Sys.Debug.traceDump.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Gambar 11 menunjukkan output dari memanggil fungsi Sys.Debug.traceDump. Perhatikan bahwa selain menulis data objek Orang, ia juga menuliskan data sub-objek Alamat.

Selain melacak, kelas Sys.Debug juga dapat digunakan untuk melakukan pernyataan kode. Pernyataan digunakan untuk menguji bahwa kondisi tertentu terpenuhi saat aplikasi sedang berjalan. Versi debug dari skrip pustaka AJAX ASP.NET berisi beberapa pernyataan pernyataan untuk menguji berbagai kondisi.

Daftar 7 menunjukkan contoh penggunaan fungsi Sys.Debug.assert untuk menguji kondisi. Kode menguji apakah objek Alamat null sebelum memperbarui objek Orang atau tidak.

Output fungsi Sys.Debug.traceDump.

Gambar 11: Output fungsi Sys.Debug.traceDump. (Klik untuk melihat gambar ukuran penuh)

Daftar 7. Menggunakan fungsi debug.assert.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Tiga parameter diteruskan termasuk kondisi untuk dievaluasi, pesan yang akan ditampilkan jika pernyataan mengembalikan false dan apakah informasi tentang pemanggil harus ditampilkan atau tidak. Dalam kasus di mana pernyataan gagal, pesan akan ditampilkan serta informasi pemanggil jika parameter ketiga benar. Gambar 12 memperlihatkan contoh dialog kegagalan yang muncul jika pernyataan yang diperlihatkan di Daftar 7 gagal.

Fungsi akhir untuk menutupi adalah Sys.Debug.fail. Ketika Anda ingin memaksa kode untuk gagal pada baris tertentu dalam skrip, Anda dapat menambahkan panggilan Sys.Debug.fail daripada pernyataan debugger yang biasanya digunakan dalam aplikasi JavaScript. Fungsi Sys.Debug.fail menerima parameter string tunggal yang mewakili alasan kegagalan seperti yang ditunjukkan berikutnya:

Sys.Debug.fail("My forced failure of script.");

Pesan kegagalan Sys.Debug.assert.

Gambar 12: Pesan kegagalan Sys.Debug.assert. (Klik untuk melihat gambar ukuran penuh)

Ketika pernyataan Sys.Debug.fail ditemui saat skrip dijalankan, nilai parameter pesan akan ditampilkan di konsol aplikasi debug seperti Visual Studio 2008 dan Anda akan diminta untuk men-debug aplikasi. Satu kasus di mana ini bisa sangat berguna adalah ketika Anda tidak dapat mengatur titik henti dengan Visual Studio 2008 pada skrip sebaris tetapi ingin kode berhenti pada baris tertentu sehingga Anda dapat memeriksa nilai variabel.

Memahami Properti ScriptMode Kontrol ScriptManager

Pustaka AJAX ASP.NET menyertakan versi skrip debug dan rilis yang diinstal di C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 secara default. Skrip debug diformat dengan baik, mudah dibaca dan memiliki beberapa panggilan Sys.Debug.assert yang tersebar di seluruhnya sementara skrip rilis memiliki spasi kosong yang dilucuti dan menggunakan kelas Sys.Debug dengan hemat untuk meminimalkan ukuran keseluruhannya.

Kontrol ScriptManager yang ditambahkan ke halaman AJAX ASP.NET membaca atribut debug elemen kompilasi di web.config untuk menentukan versi skrip pustaka mana yang akan dimuat. Namun, Anda dapat mengontrol apakah skrip debug atau rilis dimuat (skrip pustaka atau skrip kustom Anda sendiri) dengan mengubah properti ScriptMode. ScriptMode menerima enumerasi ScriptMode yang anggotanya termasuk Auto, Debug, Release, dan Inherit.

ScriptMode default ke nilai Auto yang berarti bahwa ScriptManager akan memeriksa atribut debug di web.config. Ketika debug salah, ScriptManager akan memuat versi rilis skrip pustaka AJAX ASP.NET. Ketika debug benar, versi debug skrip akan dimuat. Mengubah properti ScriptMode menjadi Rilis atau Debug akan memaksa ScriptManager memuat skrip yang sesuai terlepas dari nilai apa yang dimiliki atribut debug dalam web.config. Daftar 8 memperlihatkan contoh penggunaan kontrol ScriptManager untuk memuat skrip debug dari pustaka AJAX ASP.NET.

Daftar 8. Memuat skrip debug menggunakan ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

Anda juga dapat memuat versi yang berbeda (debug atau rilis) dari skrip kustom Anda sendiri dengan menggunakan properti Skrip ScriptManager bersama dengan komponen ScriptReference seperti yang ditunjukkan dalam Daftar 9.

Daftar 9. Memuat skrip kustom menggunakan ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

Catatan

Jika Anda memuat skrip kustom menggunakan komponen ScriptReference, Anda harus memberi tahu ScriptManager ketika skrip telah selesai dimuat dengan menambahkan kode berikut di bagian bawah skrip:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Kode yang ditampilkan di Listing 9 memberi tahu ScriptManager untuk mencari versi debug skrip Orang sehingga akan secara otomatis mencari Person.debug.js alih-alih Person.js. Jika file Person.debug.js tidak ditemukan, kesalahan akan muncul.

Dalam kasus di mana Anda ingin versi debug atau rilis skrip kustom dimuat berdasarkan nilai properti ScriptMode yang diatur pada kontrol ScriptManager, Anda dapat mengatur properti ScriptMode kontrol ScriptReference ke Warisan. Ini akan menyebabkan versi skrip kustom yang tepat dimuat berdasarkan properti ScriptMode ScriptManager seperti yang ditunjukkan dalam Daftar 10. Karena properti ScriptMode kontrol ScriptManager diatur ke Debug, skrip Person.debug.js akan dimuat dan digunakan di halaman.

Daftar 10. Mewarisi ScriptMode dari ScriptManager untuk skrip kustom.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

Dengan menggunakan properti ScriptMode dengan tepat, Anda dapat dengan lebih mudah men-debug aplikasi dan menyederhanakan proses keseluruhan. Skrip rilis pustaka AJAX ASP.NET agak sulit untuk dilalui dan dibaca karena pemformatan kode telah dihapus saat skrip debug diformat khusus untuk tujuan penelusuran kesalahan.

Kesimpulan

Teknologi AJAX ASP.NET Microsoft menyediakan fondasi yang kuat untuk membangun aplikasi berkemampuan AJAX yang dapat meningkatkan pengalaman pengguna akhir secara keseluruhan. Namun, seperti halnya teknologi pemrograman, bug, dan masalah aplikasi lainnya tentu akan muncul. Mengetahui tentang berbagai opsi penelusuran kesalahan yang tersedia dapat menghemat banyak waktu dan menghasilkan produk yang lebih stabil.

Dalam artikel ini, Anda telah diperkenalkan dengan beberapa teknik berbeda untuk penelusuran kesalahan ASP.NET halaman AJAX termasuk Internet Explorer dengan Visual Studio 2008, Web Development Helper, dan Firebug. Alat-alat ini dapat menyederhanakan proses penelusuran kesalahan secara keseluruhan karena Anda dapat mengakses data variabel, menelusuri baris kode menurut baris dan melihat pernyataan pelacakan. Selain berbagai alat penelusuran kesalahan yang dibahas, Anda juga melihat bagaimana kelas Sys.Debug pustaka AJAX ASP.NET dapat digunakan dalam aplikasi dan bagaimana kelas ScriptManager dapat digunakan untuk memuat debug atau merilis versi skrip.

Bio

Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET dan XML Web Services) adalah instruktur pengembangan .NET dan konsultan arsitektur di Pelatihan Teknis Antarmuka (www.interfacett.com). Dan mendirikan XML untuk situs Web Pengembang ASP.NET (www.XMLforASP.NET), ada di Biro Pembicara INETA dan berbicara di beberapa konferensi. Dan menulis bersama Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorial dan Kode (Sams), ASP.NET 1.1 Solusi Insider, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks dan XML yang ditulis untuk pengembang ASP.NET (Sams). Ketika dia tidak menulis kode, artikel atau buku, Dan menikmati menulis dan merekam musik dan bermain golf dan basket dengan istri dan anak-anaknya.

Scott Cate telah bekerja dengan teknologi Microsoft Web sejak 1997 dan merupakan Presiden myKB.com (www.myKB.com) di mana ia mengkhususkan diri dalam menulis aplikasi berbasis ASP.NET yang berfokus pada solusi Perangkat Lunak Pangkalan Pengetahuan. Scott dapat dihubungi melalui email di scott.cate@myKB.com atau blognya di ScottCate.com

Sebelumnya

  • Last updated on