Pengantar Penelusuran Kesalahan ASP.NET Situs Halaman Web (Razor)

2023-07-13

Artikel ini menjelaskan berbagai cara untuk men-debug halaman di situs web ASP.NET Web Pages (Razor). Penelusuran kesalahan adalah proses menemukan dan memperbaiki kesalahan di halaman kode Anda.

Yang akan Anda pelajari:

Cara menampilkan informasi yang membantu menganalisis dan men-debug halaman.

Cara menggunakan alat penelusuran kesalahan di Visual Studio.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

Pembantunya ServerInfo .

ObjectInfo Penolong.

Versi perangkat lunak

Halaman Web ASP.NET (Razor) 3

Visual Studio 2013

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 2. Anda dapat menggunakan WebMatrix 3 tetapi debugger terintegrasi tidak didukung.

Aspek penting dari pemecahan masalah kesalahan dan masalah dalam kode Anda adalah menghindarinya terlebih dahulu. Anda dapat melakukannya dengan menempatkan bagian kode Anda yang kemungkinan menyebabkan kesalahan ke dalam try/catch blok. Untuk informasi selengkapnya, lihat bagian tentang menangani kesalahan di Pengantar ASP.NET Pemrograman Web Menggunakan Sintaks Razor.

Pembantu ServerInfo adalah alat diagnostik yang memberi Anda gambaran umum informasi tentang lingkungan server web yang menghosting halaman Anda. Ini juga menunjukkan informasi permintaan HTTP yang dikirim ketika browser meminta halaman. Pembantu ServerInfo menampilkan identitas pengguna saat ini, jenis browser yang membuat permintaan, dan sebagainya. Informasi semacam ini dapat membantu Anda memecahkan masalah umum.

Buat halaman web baru bernama ServerInfo.cshtml.
Di akhir halaman, tepat sebelum tag penutup </body> , tambahkan @ServerInfo.GetHtml():
```
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
   @ServerInfo.GetHtml()
    </body>
</html>
```
Anda dapat menambahkan kode di ServerInfo mana saja di halaman. Tetapi menambahkannya di akhir akan menjaga outputnya terpisah dari konten halaman Anda yang lain, yang membuatnya lebih mudah dibaca.

Catatan

Penting Anda harus menghapus kode diagnostik apa pun dari halaman web sebelum memindahkan halaman web ke server produksi. Ini berlaku untuk pembantu ServerInfo serta teknik diagnostik lainnya dalam artikel ini yang melibatkan penambahan kode ke halaman. Anda tidak ingin pengunjung situs web Anda melihat informasi tentang nama server, nama pengguna, jalur di server Anda, dan detail serupa, karena jenis informasi ini mungkin berguna bagi orang-orang dengan niat jahat.
Simpan halaman dan jalankan di browser.

Pembantu ServerInfo menampilkan empat tabel informasi di halaman:
- Konfigurasi Server. Bagian ini menyediakan informasi tentang server web hosting, termasuk nama komputer, versi ASP.NET yang Anda jalankan, nama domain, dan waktu server.
- ASP.NET Variabel Server. Bagian ini menyediakan detail tentang banyak detail protokol HTTP (disebut variabel HTTP) dan nilai yang merupakan bagian dari setiap permintaan halaman web.
- Informasi Runtime HTTP. Bagian ini menyediakan detail tentang versi Microsoft .NET Framework yang dijalankan halaman web Anda, jalur, detail tentang cache, dan sebagainya. (Seperti yang Anda pelajari dalam Pengantar ASP.NET Pemrograman Web Menggunakan Sintaks Razor, ASP.NET Halaman Web menggunakan sintaks Razor dibangun pada teknologi server web ASP.NET Microsoft, yang dibangun di atas pustaka pengembangan perangkat lunak ekstensif yang disebut .NET Framework.)
- Variabel Lingkungan. Bagian ini menyediakan daftar semua variabel lingkungan lokal dan nilainya di server web.
  
  Deskripsi lengkap tentang semua server dan informasi permintaan berada di luar cakupan artikel ini, tetapi Anda dapat melihat bahwa pembantu ServerInfo mengembalikan banyak informasi diagnostik. Untuk informasi selengkapnya tentang nilai yang dikembalikan, lihat Variabel Lingkungan yang ServerInfoDikenali di situs web Microsoft TechNet dan Variabel Server IIS di situs web MSDN.

Menyematkan Ekspresi Output untuk Menampilkan Nilai Halaman

Cara lain untuk melihat apa yang terjadi dalam kode Anda adalah dengan menyematkan ekspresi output di halaman. Seperti yang Anda ketahui, Anda dapat langsung menghasilkan nilai variabel dengan menambahkan sesuatu seperti @myVariable atau @(subTotal * 12) ke halaman. Untuk penelusuran kesalahan, Anda dapat menempatkan ekspresi output ini di titik strategis dalam kode Anda. Ini memungkinkan Anda untuk melihat nilai variabel kunci atau hasil penghitungan saat halaman Anda berjalan. Setelah selesai melakukan penelusuran kesalahan, Anda dapat menghapus ekspresi atau mengomentarinya. Prosedur ini menggambarkan cara umum untuk menggunakan ekspresi yang disematkan untuk membantu men-debug halaman.

Buat halaman WebMatrix baru yang bernama OutputExpression.cshtml.

Ganti konten halaman dengan yang berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>   

    @{
        var weekday = DateTime.Now.DayOfWeek;
        // As a test, add 1 day to the current weekday.
        if(weekday.ToString() != "Saturday") {
            // If weekday is not Saturday, simply add one day.
            weekday = weekday + 1; 
        }
        else {
            // If weekday is Saturday, reset the day to 0, or Sunday.
            weekday = 0; 
        }
        // Convert weekday to a string value for the switch statement.
        var weekdayText = weekday.ToString(); 

        var greeting = "";
        
        switch(weekdayText) 
        { 
            case "Monday":
                greeting = "Ok, it's a marvelous Monday."; 
                break; 
            case "Tuesday":
                greeting = "It's a tremendous Tuesday.";
                break; 
            case "Wednesday":
                greeting = "Wild Wednesday is here!";
                break; 
            case "Thursday":
                greeting = "All right, it's thrifty Thursday.";
                break;
            case "Friday":
                greeting = "It's finally Friday!";
                break;
            case "Saturday":
                greeting = "Another slow Saturday is here.";
                break;
            case "Sunday":
                greeting = "The best day of all: serene Sunday.";
                break;
            default:
                break; 
        }
    }
    
    <h2>@greeting</h2>

    </body>
</html>

Contohnya menggunakan switch pernyataan untuk memeriksa nilai weekday variabel dan kemudian menampilkan pesan output yang berbeda tergantung pada hari dalam seminggu. Dalam contoh, if blok dalam blok kode pertama secara acak mengubah hari dalam seminggu dengan menambahkan satu hari ke nilai hari kerja saat ini. Ini adalah kesalahan yang diperkenalkan untuk tujuan ilustrasi.

Simpan halaman dan jalankan di browser.

Halaman menampilkan pesan untuk hari yang salah dalam seminggu. Hari apa pun dalam seminggu itu sebenarnya, Anda akan melihat pesan untuk satu hari kemudian. Meskipun dalam hal ini Anda tahu mengapa pesan tidak aktif (karena kode sengaja menetapkan nilai hari yang salah), pada kenyataannya sering sulit untuk mengetahui di mana hal-hal yang salah dalam kode. Untuk men-debug, Anda perlu mencari tahu apa yang terjadi pada nilai objek dan variabel kunci seperti weekday.

Tambahkan ekspresi output dengan menyisipkan @weekday seperti yang ditunjukkan di dua tempat yang ditunjukkan oleh komentar dalam kode. Ekspresi output ini akan menampilkan nilai variabel pada saat itu dalam eksekusi kode.

var weekday = DateTime.Now.DayOfWeek;
// DEBUG: Display the initial value of weekday. 
@weekday

// As a test, add 1 day to the current weekday.
if(weekday.ToString() != "Saturday") {
    // If weekday is not Saturday, simply add one day.
    weekday = weekday + 1; 
}
else {
    // If weekday is Saturday, reset the day to 0, or Sunday.
    weekday = 0; 
}

// DEBUG: Display the updated test value of weekday.
@weekday

// Convert weekday to a string value for the switch statement.
var weekdayText = weekday.ToString();

Simpan dan jalankan halaman di browser.

Halaman menampilkan hari nyata dalam seminggu terlebih dahulu, lalu hari yang diperbarui dalam seminggu yang dihasilkan dari penambahan satu hari, lalu pesan yang dihasilkan dari switch pernyataan. Output dari dua ekspresi variabel (@weekday) tidak memiliki spasi di antara hari-hari karena Anda tidak menambahkan tag HTML <p> apa pun ke output; ekspresi hanya untuk pengujian.

Sekarang Anda dapat melihat di mana kesalahannya berada. Ketika Anda pertama kali weekday menampilkan variabel dalam kode, itu menunjukkan hari yang benar. Saat Anda menampilkannya untuk kedua kalinya, setelah if blok dalam kode, hari libur satu per satu. Jadi Anda tahu bahwa sesuatu telah terjadi antara penampilan pertama dan kedua dari variabel hari kerja. Jika ini adalah bug nyata, pendekatan semacam ini akan membantu Anda mempersempit lokasi kode yang menyebabkan masalah.

Perbaiki kode di halaman dengan menghapus dua ekspresi output yang Anda tambahkan, dan menghapus kode yang mengubah hari dalam seminggu. Blok kode lengkap yang tersisa terlihat seperti contoh berikut:

@{
    var weekday = DateTime.Now.DayOfWeek;
    var weekdayText = weekday.ToString(); 

    var greeting = "";
        
    switch(weekdayText) 
    { 
        case "Monday":
            greeting = "Ok, it's a marvelous Monday."; 
            break; 
        case "Tuesday":
            greeting = "It's a tremendous Tuesday.";
            break; 
        case "Wednesday":
            greeting = "Wild Wednesday is here!";
            break; 
        case "Thursday":
            greeting = "All right, it's thrifty Thursday.";
            break;
        case "Friday":
            greeting = "It's finally Friday!";
            break;
        case "Saturday":
            greeting = "Another slow Saturday is here.";
            break;
        case "Sunday":
            greeting = "The best day of all: serene Sunday.";
            break;
        default:
            break; 
    }
}

Jalankan halaman di browser. Kali ini Anda melihat pesan yang benar ditampilkan untuk hari aktual dalam seminggu.

Menggunakan ObjectInfo Helper untuk Menampilkan Nilai Objek

Pembantu ObjectInfo menampilkan jenis dan nilai setiap objek yang Anda berikan padanya. Anda dapat menggunakannya untuk melihat nilai variabel dan objek dalam kode Anda (seperti yang Anda lakukan dengan ekspresi output dalam contoh sebelumnya), ditambah Anda dapat melihat informasi jenis data tentang objek.

Buka file bernama OutputExpression.cshtml yang Anda buat sebelumnya.

Ganti semua kode di halaman dengan blok kode berikut:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    @{
      var weekday = DateTime.Now.DayOfWeek;
      @ObjectInfo.Print(weekday)
      var weekdayText = weekday.ToString(); 
  
      var greeting = "";
  
      switch(weekdayText) 
      { 
          case "Monday":
              greeting = "Ok, it's a marvelous Monday."; 
              break; 
          case "Tuesday":
              greeting = "It's a tremendous Tuesday.";
              break; 
          case "Wednesday":
              greeting = "Wild Wednesday is here!";
              break; 
          case "Thursday":
              greeting = "All right, it's thrifty Thursday.";
              break;
          case "Friday":
              greeting = "It's finally Friday!";
              break;
           case "Saturday":
              greeting = "Another slow Saturday is here.";
              break;
           case "Sunday":
              greeting = "The best day of all: serene Sunday.";
              break;
          default:
              break; 
      }
    }
    @ObjectInfo.Print(greeting)
    <h2>@greeting</h2>

    </body>
</html>

Simpan dan jalankan halaman di browser.

Dalam contoh ini, pembantu ObjectInfo menampilkan dua item:
- Jenisnya. Untuk variabel pertama, jenisnya adalah DayOfWeek. Untuk variabel kedua, jenisnya adalah String.
- Nilainya. Dalam hal ini, karena Anda sudah menampilkan nilai variabel salam di halaman, nilai ditampilkan lagi ketika Anda meneruskan variabel ke ObjectInfo.
  
  Untuk objek yang lebih kompleks, pembantu ObjectInfo dapat menampilkan lebih banyak informasi — pada dasarnya, ia dapat menampilkan jenis dan nilai semua properti objek.

Menggunakan Alat Penelusuran Kesalahan di Visual Studio

Untuk pengalaman penelusuran kesalahan yang lebih komprehensif, gunakan Visual Studio. Dengan Visual Studio, Anda dapat mengatur titik henti dalam kode Anda di baris yang ingin Anda periksa.

atur titik henti

Ketika Anda menguji situs web, kode yang dieksekusi berhenti di titik henti.

mencapai titik henti

Anda dapat memeriksa nilai variabel saat ini, dan menelusuri kode baris demi baris.

lihat nilai

Untuk informasi tentang menggunakan debugger terintegrasi di Visual Studio untuk men-debug halaman ASP.NET Razor, lihat Memprogram ASP.NET Halaman Web (Razor) Menggunakan Visual Studio.

Sumber Daya Tambahan

Memprogram ASP.NET Halaman Web (Razor) Menggunakan Visual Studio
Variabel Server IIS (MSDN)
Variabel Lingkungan yang Dikenali (TechNet)

Bagikan melalui

Pengantar Penelusuran Kesalahan ASP.NET Situs Halaman Web (Razor)

Versi perangkat lunak

Menyematkan Ekspresi Output untuk Menampilkan Nilai Halaman

Menggunakan ObjectInfo Helper untuk Menampilkan Nilai Objek

Menggunakan Alat Penelusuran Kesalahan di Visual Studio

Sumber Daya Tambahan

Saran dan Komentar

Sumber Daya Tambahan: