Menggunakan Pemeriksa Halaman dengan Browser Terintegrasi di ASP.NET MVC

oleh Tim Ammann

Pemeriksa Halaman di Visual Studio 2012 adalah alat pengembangan web dengan browser terintegrasi. Pilih elemen apa pun di browser terintegrasi, dan Pemeriksa Halaman langsung menyoroti sumber elemen dan CSS. Anda dapat menelusuri tampilan MVC apa pun, dengan cepat menemukan sumber markup yang dirender, dan menggunakan alat browser tepat di lingkungan Visual Studio.

Tonton Video

Tutorial ini menunjukkan cara mengaktifkan Mode Inspeksi, lalu dengan cepat menemukan dan mengedit markup dan CSS dalam proyek web Anda. Tutorial ini menggunakan Proyek MVC, tetapi Anda juga dapat menggunakan Pemeriksa Halaman untuk Formulir Web dan aplikasi ASP.NET lainnya.

Tutorial ini memiliki bagian berikut:

• Prasyarat
• Membuat Aplikasi Web
• Menggunakan Pemeriksa Halaman untuk Menelusuri Tampilan
• Aktifkan Mode Inspeksi
• Menggunakan Pemeriksa Halaman untuk Membuat Perubahan pada Markup
• Mode Inspeksi dan Jendela HTML
• Pratinjau Perubahan CSS di jendela Gaya
• Sinkronisasi Otomatis CSS
• Menggunakan Pemilih Warna CSS
• Memetakan Elemen Halaman Dinamis ke JavaScript

Prasyarat

• Visual Studio 2012 atau Visual Studio Express 2012 untuk Web.

Catatan

Untuk mendapatkan versi terbaru Pemeriksa Halaman, gunakan Penginstal Platform Web untuk menginstal Windows Azure SDK untuk .NET 2.0.

Pemeriksa Halaman dibundel dengan Alat Pengembang Web Microsoft. Versi terbarunya adalah 1.3. Untuk memeriksa versi mana yang Anda miliki, jalankan Visual Studio dan pilih Tentang Microsoft Visual Studio dari menu Bantuan .

Membuat Aplikasi Web

Pertama, buat aplikasi web yang akan Anda gunakan dengan Pemeriksa Halaman. Di Visual Studio, pilih File>Proyek Baru. Di sebelah kiri, perluas Visual C#, pilih Web, lalu pilih ASP.NET Aplikasi Web MVC4.

Klik OK.

Dalam kotak dialog Proyek MVC 4 ASP.NET baru, pilih Aplikasi Internet. Biarkan Razor sebagai mesin tampilan default.

Aplikasi terbuka dalam tampilan Sumber .

Sekarang setelah Anda memiliki aplikasi untuk dikerjakan, Anda dapat menggunakan Pemeriksa Halaman untuk memeriksa dan memodifikasinya.

Menggunakan Pemeriksa Halaman untuk Menelusuri Tampilan

Di Visual Studio 2012, Anda dapat mengklik kanan tampilan apa pun di proyek Anda, pilih Tampilkan di Pemeriksa Halaman, dan Pemeriksa Halaman akan mencari tahu rute dan menampilkan halaman.

Di Penjelajah Solusi, perluas folder Tampilan lalu folder Beranda. Klik kanan file Index.cshtml dan pilih Tampilkan di Pemeriksa Halaman.

Secara default, Pemeriksa Halaman ditautkan sebagai jendela di sisi kiri lingkungan Visual Studio. Jika mau, Anda dapat merapat ke tempat lain, atau melepas tautkan jendela. Lihat Cara: Mengatur dan Dock Windows.

Panel atas jendela Pemeriksa Halaman memperlihatkan halaman saat ini di jendela browser. Panel bawah memperlihatkan halaman dalam markup HTML, bersama dengan beberapa tab yang memungkinkan Anda memeriksa berbagai aspek halaman. Panel bawah mirip dengan Alat Pengembang F12 di Internet Explorer.

Dalam tutorial ini, Anda akan menggunakan tab HTML dan Gaya untuk menavigasi dengan cepat dan membuat perubahan pada aplikasi.

EnableInspection Mode

Untuk memasukkan Pemeriksa Halaman ke dalam Mode Inspeksi, klik tombol Inspeksi . Dalam Mode Inspeksi, saat Anda menahan penunjuk mouse di bagian mana pun dari halaman yang dirender, markup sumber atau kode yang sesuai disorot.

Sekarang gerakkan mouse Anda ke bagian halaman yang berbeda dalam Pemeriksa Halaman. Seperti yang Anda lakukan, penunjuk mouse berubah menjadi tanda plus besar, dan elemen di bawahnya disorot:

Saat Anda memindahkan penunjuk mouse, Visual Studio menyoroti sintaks Razor yang sesuai dalam file sumber. Jika elemen HTML berasal dari file sumber lain, Visual Studio secara otomatis membuka file.

Di Pemeriksa Halaman, tab HTML memperlihatkan HTML yang dihasilkan dari sintaks Razor. Saat Anda memindahkan penunjuk mouse, elemen HTML disorot. Tab Gaya memperlihatkan aturan CSS untuk elemen tersebut.

Menggunakan Pemeriksa Halaman untuk Membuat Perubahan pada Markup

Pemeriksa Halaman memungkinkan Anda menemukan markup yang lokasinya mungkin tidak jelas. Kemudian Anda dapat mengubah markup dan melihat perubahan yang dihasilkan.

Untuk melihat ini, klik Periksa lalu gulir ke bagian bawah halaman di jendela Pemeriksa Halaman.

Saat Anda memindahkan penunjuk mouse ke area footer, Pemeriksa Halaman membuka file _Layout.cshtml dan menyoroti bagian halaman tata letak yang telah Anda pilih. Seperti yang Anda lihat, area footer didefinisikan dalam file tata letak, dan bukan tampilan itu sendiri.

Sekarang gerakkan penunjuk mouse Anda ke garis dengan pemberitahuan hak cipta . Di halaman _Layout.cshtml, baris terkait disorot.

Tambahkan beberapa teks ke akhir baris dalam file _Layout.cshtml.

<p>© @DateTime.Now.Year - Aplikasi ASP.NET MVC Saya Rocks!</p>

Sekarang, tekan Ctrl+Alt+Enter atau klik Bilah Pembaruan untuk melihat hasilnya di jendela browser Pemeriksa Halaman.

Anda mungkin berpikir bahwa footer yang ditentukan dalam Index.cshtml, tetapi ternyata ada di _Layout.cshtml, dan Pemeriksa Halaman menemukannya untuk Anda.

Mode Inspeksi dan Jendela HTML

Selanjutnya, Anda akan melihat sekilas jendela HTML dan bagaimana hal itu memetakan elemen untuk Anda.

Klik Periksa untuk menempatkan Pemeriksa Halaman dalam Mode Inspeksi.

Klik bagian atas halaman yang berjudul "Logo Anda di sini". Anda memeriksa elemen tertentu secara lebih rinci, sehingga tampilan di jendela browser tidak lagi berubah saat Anda memindahkan penunjuk mouse.

Sekarang pindahkan penunjuk mouse ke jendela HTML . Saat Anda memindahkan penunjuk mouse, Pemeriksa Halaman menguraikan elemen dalam jendela HTML dan menyoroti elemen yang sesuai di jendela browser.

Seperti sebelumnya, Pemeriksa Halaman membuka file _Layout.cshtml untuk Anda di tab sementara. Klik tab sementara _Layout.cshtml, dan markup terkait akan disorot di <bagian header> untuk Anda:

Pratinjau Perubahan CSS di Jendela Gaya

Selanjutnya, Anda akan menggunakan jendela Gaya Pemeriksa Halaman untuk mempratinjau perubahan pada CSS.

Klik Periksa untuk menempatkan Pemeriksa Halaman dalam Mode Inspeksi.

Di jendela browser Pemeriksa Halaman, gerakkan penunjuk mouse ke bagian "Halaman Beranda" hingga label div.content-wrapper muncul.

Klik di dalam bagian div.content-wrapper sekali, lalu pindahkan penunjuk mouse ke jendela Gaya . Jendela Gaya memperlihatkan semua aturan CSS untuk elemen ini. Gulir ke bawah untuk menemukan pemilih kelas .content-wrapper . Sekarang kosongkan kotak centang untuk properti warna latar belakang.

Perhatikan bagaimana perubahan dipratinjau secara instan di jendela browser Pemeriksa Halaman.

Pilih lagi kotak centang, lalu klik dua kali nilai properti dan ubah menjadi merah. Perubahan segera menunjukkan:

Jendela Gaya memudahkan pengujian dan pratinjau perubahan CSS sebelum Anda menerapkan perubahan pada lembar gaya itu sendiri.

Sinkronisasi Otomatis CSS

Catatan

Fitur ini memerlukan Pemeriksa Halaman versi 1.3.

Fitur Sinkronisasi Otomatis CSS memungkinkan Anda mengedit file CSS secara langsung, dan melihat perubahan segera di browser Pemeriksa Halaman.

Klik Periksa untuk menempatkan Pemeriksa Halaman dalam Mode Inspeksi.

Di browser Pemeriksa Halaman, pindahkan penunjuk mouse ke bagian "Halaman Beranda" hingga label div.content-wrapper muncul. Klik sekali untuk memilih elemen ini.

Jendela Gaya memperlihatkan semua aturan CSS untuk elemen ini. Gulir ke bawah untuk menemukan pemilih kelas .content-wrapper . Klik ".featured .content-wrapper". Pemeriksa Halaman membuka file CSS yang menentukan gaya ini (Site.css) dan menyoroti gaya CSS yang sesuai.

Sekarang ubah nilai untuk background-color menjadi "merah". Perubahan segera muncul di browser Pemeriksa Halaman.

Menggunakan Pemilih Warna CSS

Editor CSS di Visual Studio 2012 memiliki pemilih warna yang memudahkan untuk memilih dan menyisipkan warna. Pemilih warna mencakup palet warna standar, mendukung nama warna standar, kode hash, RGB, RGBA, HSL, dan warna HSLA, dan mempertahankan daftar warna yang terakhir Anda gunakan dalam dokumen.

Di bagian sebelumnya, Anda mengubah nilai background-color properti . Untuk memanggil pemilih warna, tempatkan titik penyisipan setelah nama properti dan ketik # atau rgb(.

Klik warna untuk memilihnya, atau tekan tombol panah bawah lalu gunakan tombol panah kiri dan kanan untuk melintasi warna. Saat Anda mengunjungi warna, nilai heksa yang sesuai akan dipratinjau:

Jika bilah warna tidak memiliki warna yang Anda inginkan, Anda dapat menggunakan pop-down pemilih warna. Untuk membukanya, klik chevron ganda di ujung kanan bilah warna, atau tekan Panah Bawah sekali atau dua kali pada keyboard.

Klik warna dari bilah vertikal di sebelah kanan. Ini menunjukkan gradien untuk warna tersebut di jendela utama. Pilih warna langsung dari bilah vertikal dengan menekan Enter, atau klik titik mana pun di jendela utama untuk memilih dengan presisi yang lebih besar.

Jika ada warna di layar komputer yang ingin Anda gunakan (tidak harus berada di dalam antarmuka pengguna Visual Studio), Anda dapat menangkap nilainya dengan menggunakan alat eyedropper di kanan bawah.

Anda juga dapat mengubah keburaman warna dengan memindahkan penggiser di bagian bawah pemilih warna. Melakukannya mengubah nilai warna menjadi nilai RGBA, karena format RGBA dapat mewakili opasitas.

Setelah Anda memilih warna, tekan Enter, lalu ketik titik koma untuk menyelesaikan entri warna latar belakang dalam file Site.css .

Bilah Pembaruan Pemeriksa Halaman

Pemeriksa Halaman segera mendeteksi perubahan pada file Site.css dan menampilkan pemberitahuan di bilah pembaruan.

Untuk menyimpan semua file Anda dan menyegarkan browser Pemeriksa Halaman, tekan Ctrl+Alt+Enter atau klik bilah pembaruan. Perubahan warna sorotan muncul di browser.

Memetakan Elemen Halaman Dinamis ke JavaScript

Dalam aplikasi web modern, elemen di halaman sering dihasilkan secara dinamis dengan JavaScript. Itu berarti tidak ada markup statis (baik HTML atau Razor) yang sesuai dengan elemen halaman ini.

Dengan versi 1.3, Pemeriksa Halaman sekarang dapat memetakan item yang ditambahkan secara dinamis ke halaman kembali ke kode JavaScript yang sesuai. Untuk menunjukkan fitur ini, kita akan menggunakan templat Aplikasi Halaman Tunggal (SPA).

Catatan

Templat SPA memerlukan pembaruan ASP.NET dan Web Tools 2012.2 .

Di Visual Studio, pilih File>Proyek Baru. Di sebelah kiri, perluas Visual C#, pilih Web, lalu pilih ASP.NET Aplikasi Web MVC4. Klik OK.

Dalam dialog Proyek MVC 4 ASP.NET baru, pilih Aplikasi Halaman Tunggal.

Di Penjelajah Solusi, perluas folder Tampilan lalu folder Beranda. Klik kanan file Index.cshtml dan pilih Tampilkan di Pemeriksa Halaman.

Hal pertama yang ditampilkan di browser Pemeriksa Halaman adalah halaman masuk. Klik "Daftar" dan buat nama pengguna dan kata sandi. Setelah Anda mendaftar, aplikasi akan memasukkan Anda dan membuat daftar tugas dengan beberapa item sampel.

Klik Periksa untuk menempatkan Pemeriksa Halaman dalam Mode Inspeksi. Di browser Pemeriksa Halaman, klik salah satu item yang harus dilakukan. Perhatikan bahwa alih-alih disorot dengan warna biru, elemen disorot dengan warna oranye, dengan "JS" di samping nama elemen. Ini menunjukkan bahwa elemen dibuat secara dinamis melalui skrip.

Selain itu, garis bawah oranye muncul pada tab Tumpukan Panggilan. Ini menunjukkan bahwa panel Tumpukan Panggilan memiliki informasi selengkapnya tentang elemen .

Klik tab Tumpukan Panggilan. Panel Tumpukan Panggilan memperlihatkan tumpukan panggilan untuk panggilan JavaScript yang membuat elemen . Panggilan ke pustaka eksternal seperti jQuery diciutkan, sehingga Anda dapat dengan mudah melihat panggilan ke skrip aplikasi Anda.

Untuk melihat tumpukan penuh, termasuk panggilan ke pustaka eksternal, Anda dapat memperluas simpul berlabel "Pustaka Eksternal":

Jika Anda mengklik item di tumpukan panggilan, Visual Studio akan membuka file kode dan menyoroti skrip yang sesuai.

Lihat Juga

Penganali ASP.NET MVC 4 dengan Visual Studio (situs web ASP.net)

Memperkenalkan Pemeriksa Halaman (video Saluran 9)

Pesan Kesalahan Pemeriksa Halaman (MSDN)