Bagikan melalui


Menggunakan Pemeriksa Halaman untuk Visual Studio 2012 di ASP.NET Web Forms

oleh Tim Ammann

Pemeriksa Halaman untuk 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 halaman apa pun di aplikasi Anda, menemukan sumber markup yang dirender dengan cepat, dan menggunakan alat browser langsung di dalam lingkungan Visual Studio.

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

Tutorial ini memiliki bagian berikut:

Prasyarat

Membuat Aplikasi Web

Menggunakan Pemeriksa Halaman untuk Melihat Aplikasi

Aktifkan Mode Inspeksi

Gunakan 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

Prasyarat

Catatan

Untuk mendapatkan versi terbaru Pemeriksa Halaman, gunakan Penginstal Platform Web untuk menginstal 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, Anda akan membuat 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 aplikasi ASP.NET Web Forms.

Aplikasi Formulir Web Baru

Klik OK.

Aplikasi terbuka dalam tampilan Sumber .

Aplikasi Formulir Web Baru dalam Tampilan Sumber

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

Menggunakan Pemeriksa Halaman untuk Melihat Aplikasi

Selanjutnya, Anda akan melihat aplikasi dengan Pemeriksa Halaman. Di Penjelajah Solusi, klik kanan proyek, lalu pilih Tampilkan di Pemeriksa Halaman.

Tampilkan di Pemeriksa Halaman

Secara default, saat Inspektur Halaman diluncurkan untuk pertama kalinya, Pemeriksa Halaman ditambatkan sebagai jendela sempit di sisi kiri lingkungan Visual Studio. Biarkan merapat di sisi kiri dan atur ke lebar yang nyaman untuk Anda, atau dok di salah satu area alat di bagian atas, bawah, atau kanan:

Posisi docking Pemeriksa Halaman

Jika Anda melepas tato jendela Pemeriksa Halaman, Anda dapat menempatkannya di luar Visual Studio, atau bahkan di monitor kedua jika Anda memilikinya. Namun, untuk ALT+TAB antara Pemeriksa Halaman dan Visual Studio saat jendela Pemeriksa Halaman dilepas, buka TabLingkungan>Opsi>Alat>dan Windows, dan di bawah Tab Yah, kosongkan kotak centang yang disebut Jendela alat Mengambang selalu berada di atas jendela utama:

Kosongkan kotak centang jendela alat mengambang ke ALT+TAB antara Visual Studio dan jendela Pemeriksa Halaman yang tidak di-tack

Panel atas jendela Pemeriksa Halaman memperlihatkan halaman saat ini di jendela browser. Panel bawah memperlihatkan halaman dalam markup HTML di sebelah kiri, dan beberapa tab di sebelah kanan yang memungkinkan Anda memeriksa berbagai aspek halaman. Panel bawah mirip dengan Alat Pengembang F12 di Internet Explorer. (Namun, tidak seperti alat pengembang, Anda dapat menggunakan Pemeriksa Halaman langsung dalam Visual Studio.)

Pemeriksa Halaman

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

Aktifkan Mode Inspeksi

Selanjutnya, Anda akan melihat cara kerja Mode Inspeksi Inspektur Halaman. Di jendela Pemeriksa Halaman, klik tombol Inspeksi .

Cuplikan layar memperlihatkan cara memilih tombol Inspeksi dari jendela browser Pemeriksa Halaman untuk mengaktifkan Mode Inspeksi.

Untuk melihat mode inspeksi dalam tindakan, gerakkan mouse Anda ke berbagai bagian halaman dalam jendela browser Pemeriksa Halaman. Seperti yang Anda lakukan, penunjuk mouse berubah menjadi tanda plus besar, dan elemen di bawahnya disorot:

Mengarahkan kubah ke div.content-wrapper

Saat Anda menggerakkan penunjuk mouse, perhatikan bahwa

  • Konten dalam tampilan Sumber berubah untuk memperlihatkan markup yang sesuai dengan elemen yang dipilih pada halaman. Markup yang relevan disorot. Jika sumber berada di file lain, file tersebut dibuka dalam tampilan Sumber dengan markup yang relevan disorot.

  • Markup yang ditampilkan di tab HTML di Pemeriksa Halaman juga berubah sesuai dengan elemen yang dipilih di halaman. Di tab HTML , markup yang relevan diuraikan.

  • Tab Gaya memperlihatkan aturan CSS yang relevan dengan pilihan saat ini.

Gunakan Pemeriksa Halaman untuk Membuat Perubahan pada Markup

Sekarang Anda akan melihat bagaimana Anda dapat menggunakan Pemeriksa Halaman untuk menemukan dan membuat perubahan pada markup atau teks yang lokasinya mungkin tidak segera jelas.

Letakkan Pemeriksa Halaman dalam Mode Inspeksi lalu gulir ke bagian bawah halaman beranda.

Segera setelah Anda memasuki area footer, Pemeriksa Halaman membuka file tata letak Site.Master dalam tampilan Sumber di tab sementara di sebelah kanan tab lain dan menyoroti bagian halaman master yang telah Anda pilih. Ini menunjukkan kepada Anda bagaimana Pemeriksa Halaman dapat menemukan dan menampilkan konten di halaman yang mungkin benar-benar berasal dari file yang berbeda dari yang awalnya Anda buka.

Sorotan footer dalam Mode Inspeksi

Di jendela browser Pemeriksa Halaman, gerakkan penunjuk mouse Anda ke garis dengan pemberitahuan hak cipta .

Di halaman Site.Master , baris terkait disorot.

Baris hak cipta footer disorot

Tambahkan beberapa teks ke akhir baris dalam file Site.Master .

<salinan p>&; <%: DateTime.Now.Year %> - My ASP.NET Application Rocks!</P>

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

My ASP.NET Application Rocks!

Anda mungkin telah berpikir bahwa footer berada di halaman Default.aspx , tetapi ternyata berada di halaman tata letak master, 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.

Letakkan Pemeriksa Halaman dalam Mode Inspeksi.

Cuplikan layar memperlihatkan cara memilih tombol Inspeksi dari jendela browser Pemeriksa Halaman untuk menggunakan Mode Inspeksi.

Klik bagian atas halaman yang bertuliskan "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.

Jendela HTML

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

Markup yang disorot

Pratinjau Perubahan CSS di Jendela Gaya

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

Klik tombol Inspeksi 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.

Melayang di atas elemen

Klik di dalam bagian div.content-wrapper sekali, lalu pindahkan penunjuk mouse ke jendela Gaya . Di bawah pemilih kelas .content-wrapper .featured, kosongkan dan pilih kotak centang untuk properti warna latar belakang.

Warna latar belakang yang jelas

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

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

Warna latar belakang merah

Jendela Gaya memudahkan untuk menguji dan mempratinjau perubahan CSS sebelum Anda menerapkan perubahan pada lembar gaya itu sendiri.

Sinkronisasi Otomatis CSS

Catatan

Fitur ini memerlukan Inspektur Halaman versi 1.3.

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

Klik Inspeksi untuk menempatkan Pemeriksa Halaman dalam Mode Inspeksi.

Di browser Pemeriksa Halaman, gerakkan 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.

File CSS

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

Browser Pemeriksa Halaman

Menggunakan Pemilih Warna CSS

Selanjutnya, Anda akan mempelajari cara menggunakan Pemeriksa Halaman untuk menemukan dan mengubah CSS dengan cepat untuk teks yang disorot di aplikasi default. Dalam contoh ini, Anda telah memutuskan bahwa Anda tidak menyukai penyorotan biru dan ingin mengubahnya ke warna lain.

Klik tombol Inspeksi .

Cuplikan layar memperlihatkan cara memilih tombol Inspeksi dari jendela browser Pemeriksa Halaman untuk menggunakan CSS.

Di jendela browser Pemeriksa Halaman, gerakkan penunjuk mouse ke teks "video, tutorial, dan sampel" yang disorot sehingga label "tanda" CSS muncul.

Mengarahkan mouse ke atas elemen tanda

Klik teks untuk memilihnya. Pemilih tanda CSS terkait muncul di bagian bawah jendela Gaya .

tandai pemilih di jendela Gaya

Klik pemilih tanda. Ini membuka file Site.css untuk aplikasi web. Klik tab Site.css, dan CSS terkait untuk pemilih disorot:

tandai pemilih dalam lembar gaya

Pilih dan hapus garis dengan properti warna latar belakang.

Sekarang Anda akan menggunakan pemilih warna Visual Studio 2012 CSS baru untuk memilih warna baru untuk properti tandai warna latar belakang.

Menggunakan Pemilih Warna Visual Studio 2012 CSS

Editor CSS di Visual Studio 2012 memiliki pemilih warna yang memudahkan untuk memilih dan menyisipkan warna. Ini memiliki bilah warna sederhana dan pemilih "pop-down" yang menawarkan kontrol yang lebih halus.

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.

Pada garis tempat properti warna latar belakang berada, ketik "bc" dan tekan panah bawah sekali.

Saat Anda mengetik karakter pertama setiap kata dalam properti yang dipisahkan tanda hubung seperti "warna latar belakang", IntelliSense memfilter daftar agar Anda hanya menampilkan properti yang cocok:

Nilai yang difilter Intellisense

Sekarang ketik titik dua. Saat Anda melakukannya, nama properti warna latar belakang penuh disisipkan. Ketik # atau rgb(, dan bilah pemilih warna muncul:

Bilah pemilih warna CSS

Untuk melihat cara kerja bilah pemilih warna, klik warnanya dengan penunjuk mouse, atau tekan tombol panah bawah lalu gunakan tombol panah kiri dan kanan untuk melintasi warna. Saat Anda mengunjungi warna, nilai yang sesuai untuk properti warna latar belakang dipratinjau:

nilai properti warna latar belakang dipratinjau

Pada titik ini, Anda dapat menekan Enter untuk memilih nilai lalu titik koma (;) untuk menyelesaikan entri CSS. Untuk saat ini, lanjutkan ke bagian berikutnya sehingga Anda dapat melihat cara kerja pop-down pemilih warna.

Menggunakan Pop-Down Pemilih Warna

Saat bilah warna tidak memiliki warna persis yang Anda cari, 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.

Pop-down Pemilih Warna CSS

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 mengambil nilainya dengan menggunakan alat eyedropper di kanan bawah.

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

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 (atau ke file apa pun dalam aplikasi) dan menampilkan pemberitahuan di bilah pembaruan.

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:

Warna sorot diubah

Perhatikan bahwa Anda dengan mudah menyegarkan browser Pemeriksa Halaman langsung dari dalam lingkungan Visual Studio. Menggunakan Pemeriksa Halaman alih-alih browser eksternal memungkinkan Anda tetap berada di editor saat mengembangkan aplikasi web Anda.

Lihat juga

Memperkenalkan Pemeriksa Halaman (video Saluran 9)

Pesan Kesalahan Pemeriksa Halaman (MSDN)