Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
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:
Menggunakan Pemeriksa Halaman untuk Melihat Aplikasi
Gunakan Pemeriksa Halaman untuk Membuat Perubahan pada Markup
Mode Inspeksi dan Jendela HTML
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.
Klik OK.
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 Melihat Aplikasi
Selanjutnya, Anda akan melihat aplikasi dengan Pemeriksa Halaman. Di Penjelajah Solusi, klik kanan proyek, lalu pilih 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:
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:
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.)
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 .
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:
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.
Di jendela browser Pemeriksa Halaman, gerakkan penunjuk mouse Anda ke garis dengan pemberitahuan hak cipta .
Di halaman Site.Master , baris terkait 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.
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.
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.
Seperti sebelumnya, Pemeriksa Halaman membuka file Site.Master untuk Anda di tab sementara. Klik tab Site.Master, dan markup terkait disorot di bagian <header> :
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.
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.
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:
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.
Sekarang ubah nilai untuk background-color
menjadi "merah". Perubahan segera muncul di 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 .
Di jendela browser Pemeriksa Halaman, gerakkan penunjuk mouse ke teks "video, tutorial, dan sampel" yang disorot sehingga label "tanda" CSS muncul.
Klik teks untuk memilihnya. Pemilih tanda CSS terkait muncul di bagian bawah jendela Gaya .
Klik pemilih tanda. Ini membuka file Site.css untuk aplikasi web. Klik tab Site.css, dan CSS terkait untuk pemilih disorot:
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:
Sekarang ketik titik dua. Saat Anda melakukannya, nama properti warna latar belakang penuh disisipkan. Ketik # atau rgb(, dan bilah pemilih warna muncul:
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:
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.
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.
Untuk menyimpan semua file Anda dan menyegarkan browser Pemeriksa Halaman, tekan Ctrl+Alt+Enter atau klik bilah pembaruan. Perubahan warna sorotan muncul di browser:
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)