Bagikan melalui

Menggunakan Pemeriksa Halaman di Visual Studio 2012

oleh Tim Perkemahan Web

Di Lab Langsung ini, Anda akan menemukan alat baru untuk menemukan dan memperbaiki masalah halaman web di Visual Studio - Pemeriksa Halaman.

Pemeriksa Halaman adalah alat baru yang membawa alat diagnostik browser ke Visual Studio dan memberikan pengalaman terintegrasi di antara browser, ASP.NET, dan kode sumber. Ini merender halaman web (HTML, Formulir Web, ASP.NET MVC, atau Halaman Web) langsung dalam IDE Visual Studio dan memungkinkan Anda memeriksa kode sumber dan output yang dihasilkan. Pemeriksa Halaman memungkinkan Anda untuk dengan mudah menguraikan situs web, membangun halaman dengan cepat dari bawah ke atas, dan mendiagnosis masalah dengan cepat.

Saat ini kami memiliki sejumlah kerangka kerja Web yang membuat situs web yang fleksibel dan dapat diskalakan secara tepat waktu, seperti ASP.NET MVC dan WebForms. Di sisi lain, semakin sulit untuk menemukan masalah di halaman karena IDE tidak mendukung tampilan perancang di halaman berbasis templat dan konten dinamis. Oleh karena itu, situs web ini harus dibuka di browser untuk melihat bagaimana mereka muncul kepada pengguna.

Pengembang web menggunakan alat eksternal untuk menemukan masalah yang berjalan secara teratur di browser. Kemudian, mereka kembali ke IDE dan mulai memperbaiki. Aktivitas bolak-balik di antara IDE, browser, dan alat pembuatan profil ini tidak efisien, dan terkadang memerlukan penyebaran baru dan pembersihan cache setiap kali Anda ingin mereproduksi masalah.

Pemeriksa Halaman menjelajah kesenjangan dalam pengembangan Web antara klien (alat browser) dan server (ASP.NET dan kode sumber) dengan menyabungkan yang terbaik dari kedua dunia menggunakan serangkaian fitur gabungan.

Dengan menggunakan Pemeriksa Halaman, Anda dapat melihat elemen mana dalam file sumber (termasuk kode sisi server) yang telah menghasilkan markup HTML yang akan dirender di browser. Pemeriksa Halaman juga memungkinkan Anda memodifikasi properti CSS dan atribut elemen DOM untuk melihat perubahan yang segera tercermin di browser.

Lab langsung ini akan memandikan Anda melalui fitur Pemeriksa Halaman dan menunjukkan kepada Anda bagaimana Anda dapat menggunakannya untuk memperbaiki masalah di aplikasi Web. Lab ini berisi dua latihan menggunakan alur serupa tetapi menargetkan teknologi yang berbeda. Jika Anda adalah Pengembang MVC ASP.NET, ikuti latihan satu; jika Anda adalah pengembang WebForms, ikuti latihan dua.

Lab ini memandu Anda melalui penyempurnaan dan fitur baru yang sebelumnya dijelaskan dengan menerapkan perubahan kecil pada sampel aplikasi Web yang disediakan di folder Sumber.

Tujuan

Di lab langsung ini, Anda akan mempelajari cara:

  • Menguraikan Situs Web menggunakan Pemeriksa Halaman
  • Memeriksa dan mempratinjau perubahan gaya CSS dengan Pemeriksa Halaman
  • Mendeteksi dan memperbaiki masalah di halaman web Anda menggunakan Pemeriksa Halaman

Prasyarat

Anda harus memiliki item berikut untuk menyelesaikan lab ini:

Latihan

Lab langsung ini mencakup latihan berikut:

  1. Latihan 1: Menggunakan Pemeriksa Halaman di Proyek MVC ASP.NET
  2. Latihan 2: Menggunakan Pemeriksa Halaman di Proyek WebForms

Catatan

Setiap latihan disertai dengan solusi awal, yang terletak di folder Mulai latihan, yang memungkinkan Anda untuk mengikuti setiap latihan secara independen dari yang lain. Di dalam kode sumber untuk latihan, Anda juga akan menemukan folder Akhir yang berisi solusi Visual Studio dengan kode yang dihasilkan dari menyelesaikan langkah-langkah dalam latihan yang sesuai. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan saat Anda bekerja melalui lab langsung ini.

Perkiraan waktu untuk menyelesaikan lab ini: 30 menit.

Latihan 1: Menggunakan Pemeriksa Halaman di Proyek MVC ASP.NET

Dalam latihan ini, Anda akan mempelajari cara mempratinjau dan men-debug solusi MVC 4 ASP.NET menggunakan Pemeriksa Halaman. Pertama, Anda akan melakukan putaran singkat di sekitar alat untuk mempelajari fitur yang memfasilitasi proses penelusuran kesalahan Web. Kemudian, Anda akan bekerja di halaman web yang berisi masalah gaya. Anda akan mempelajari cara menggunakan Pemeriksa Halaman untuk menemukan kode sumber yang menghasilkan masalah dan memperbaikinya.

Tugas 1 - Menjelajahi Pemeriksa Halaman

Dalam tugas ini, Anda akan mempelajari cara menggunakan Pemeriksa Halaman dalam konteks proyek MVC 4 ASP.NET yang menampilkan galeri foto.

  1. Buka folder Mulai solusi yang terletak di Source/Ex1-MVC4/Begin/.

    1. Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.

    2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.

    3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.

      Catatan

      Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.

  2. Di Penjelajah Solusi, temukan tampilan Index.cshtml di bawah folder proyek /Views/Home, klik kanan dan pilih Tampilkan di Pemeriksa Halaman.

    Memilih file untuk dipratinjau di Pemeriksa Halaman

    Memilih file untuk dipratinjau di Pemeriksa Halaman

  3. Jendela Pemeriksa Halaman akan menampilkan URL /Beranda/Indeks yang dipetakan ke Tampilan sumber yang Anda pilih.

    Kontak pertama dengan PageInspector

    Kontak pertama dengan Pemeriksa Halaman

    Alat Pemeriksa Halaman terintegrasi di lingkungan Visual Studio Anda. Inspektur berisi browser yang disematkan, bersama dengan profiler HTML yang kuat. Perhatikan bahwa Anda tidak perlu menjalankan solusi untuk melihat tampilan halaman Anda.

    Catatan

    Ketika lebar browser Pemeriksa Halaman kurang dari lebar halaman yang dibuka, Anda tidak akan melihat halaman dengan benar. Jika itu terjadi, sesuaikan lebar Pemeriksa Halaman.

  4. Klik tab File di Pemeriksa Halaman.

    Anda akan melihat semua file sumber yang menyusun halaman Indeks. Fitur ini membantu mengidentifikasi semua elemen secara sekilas, terutama ketika Anda bekerja dengan tampilan dan templat parsial. Perhatikan bahwa Anda juga dapat membuka setiap file jika Anda mengklik tautan.

    Tab-File

    Tab File

  5. Klik tombol Alihkan Mode Inspeksi, yang terletak di sebelah kiri tab.

    Alat ini akan memungkinkan Anda memilih elemen halaman apa pun dan melihat kode HTML dan Razor-nya.

    Tombol Alihkan-Inspeksi-Mode

    Tombol Alihkan Mode Inspeksi

  6. Di browser Pemeriksa Halaman, gerakkan penunjuk mouse ke elemen halaman. Saat Anda memindahkan penunjuk mouse ke bagian mana pun dari halaman yang dirender, jenis elemen ditampilkan dan markup sumber atau kode yang sesuai disorot di editor Visual Studio.

    Cuplikan layar memperlihatkan jendela Pemeriksa Halaman dan editor Visual Studio dengan jenis elemen ditampilkan dan markup sumber terkait disorot.

    Mode inspeksi sedang beraksi

    Catatan

    Jangan maksimalkan jendela Pemeriksa Halaman atau Anda tidak akan dapat melihat tab pratinjau yang menampilkan kode sumber. Jika Anda mengklik elemen di Pemeriksa Halaman saat dimaksimalkan, kode sumber pilihan akan muncul tetapi akan menyembunyikan jendela Pemeriksa Halaman.

    Jika Anda memperhatikan file Index.cshtml , Anda akan melihat bahwa bagian kode sumber yang menghasilkan elemen yang dipilih disorot. Fitur ini memfasilitasi pengeditan file sumber panjang, menyediakan cara langsung dan cepat untuk mengakses kode.

    Cuplikan layar jendela Pemeriksa Halaman dan file Index.cshtml editor Visual Studio yang menunjukkan bahwa bagian kode sumber yang menghasilkan elemen yang dipilih disorot.

    Memeriksa elemen

  7. Klik tombol Alihkan Mode Inspeksi (Pilih tab HTML untuk menampilkan kode HTML yang dirender di browser Pemeriksa Halaman. ) untuk menonaktifkan kursor.

  8. Pilih tab HTML untuk menampilkan kode HTML yang dirender di browser Pemeriksa Halaman.

  9. Di markup HTML, temukan item daftar dengan tautan Koala dan pilih.

    Perhatikan bahwa ketika Anda memilih kode, output yang sesuai secara otomatis disorot di browser. Fitur ini berguna untuk melihat bagaimana blok HTML dirender di halaman.

    Memilih elemen HTML di halaman

    Memilih elemen HTML di halaman

  10. Klik tombol Alihkan Mode Inspeksi untuk mengaktifkan Mode Inspeksi dan klik bilah navigasi. Di sebelah kanan kode HTML, di panel Gaya, Anda akan melihat daftar dengan gaya CSS yang diterapkan ke elemen yang dipilih.

    Catatan

    Karena header adalah bagian dari tata letak situs, Pemeriksa Halaman juga akan membuka file _Layout.cshtml dan menyoroti segmen kode yang terpengaruh.

    Menemukan gaya

    Menemukan gaya dan file sumber dari elemen yang dipilih

  11. Dengan penunjuk inspeksi pengalih diaktifkan, gerakkan penunjuk mouse di bawah bilah berfungsi biru dan klik setengah lingkaran.

    Cuplikan layar jendela Pemeriksa Halaman memperlihatkan penunjuk mouse memilih setengah lingkaran di bawah bilah berfungsi biru di kiri atas layar.

    Memilih elemen

  12. Di panel Gaya, temukan item gambar latar belakang di bawah grup .main-content . Hapus centang pada gambar latar belakang dan lihat apa yang terjadi. Anda akan melihat bahwa browser akan segera mencerminkan perubahan dan lingkaran disembunyikan.

    Catatan

    Perubahan yang Anda terapkan pada tab Gaya Pemeriksa Halaman tidak memengaruhi lembar gaya asli. Anda dapat menghapus centang gaya atau mengubah nilainya sebanyak yang Anda inginkan, tetapi nilai tersebut akan dipulihkan setelah me-refresh halaman.

    Mengaktifkan dan menonaktifkan gaya CSS

    Mengaktifkan dan menonaktifkan gaya CSS

  13. Sekarang, klik teks 'logo Anda di sini' pada header menggunakan mode inspeksi.

  14. Di tab Gaya, temukan atribut CSS ukuran font di bawah grup .site-title. Klik dua kali nilai atribut dan ganti nilai 2.3 em dengan 3 em, lalu tekan ENTER. Perhatikan bahwa judulnya terlihat lebih besar.

    Mengubah nilai CSS di Pemeriksa Halaman

    Mengubah nilai CSS di Pemeriksa Halaman

  15. Klik tab Lacak Gaya , yang terletak di panel kanan Pemeriksa Halaman. Ini adalah cara alternatif untuk melihat semua gaya yang diterapkan ke pilihan, diurutkan berdasarkan nama atribut.

    Pelacakan gaya CSS

    Pelacakan gaya CSS dari elemen yang dipilih

  16. Fitur lain dari Pemeriksa Halaman adalah panel Tata Letak. Menggunakan mode inspeksi, pilih bilah navigasi lalu klik tab Tata Letak di panel kanan. Anda akan melihat ukuran yang tepat dari elemen yang dipilih, serta offset, margin, padding, dan ukuran batasnya. Perhatikan bahwa Anda juga dapat memodifikasi nilai dari tampilan ini.

    Cuplikan layar memperlihatkan bilah navigasi dengan tab Tata Letak dipilih yang menampilkan diagram tata letak elemen.

    Tata letak elemen di Pemeriksa Halaman

Tugas 2 - Menemukan dan Memperbaiki Masalah Gaya di Galeri Foto

Bagaimana Anda mendiagnosis masalah halaman Web dengan versi Visual Studio sebelumnya? Anda mungkin terbiasa dengan alat penelusuran kesalahan web yang berjalan di luar VISUAL Studio IDE, seperti Alat Pengembang Internet Explorer atau Firebug. Browser hanya memahami HTML, scripting, dan gaya, sementara kerangka kerja yang mendasar menghasilkan HTML yang akan dirender. Untuk alasan itu, Anda sering kali perlu menyebarkan seluruh situs untuk melihat tampilan halaman web.

Anda mungkin telah mengikuti langkah-langkah ini ketika Anda ingin mendeteksi dan memperbaiki masalah di situs web Anda:

  1. Jalankan Solusi dari Visual Studio, atau sebarkan halaman di server web.
  2. Di browser, buka alat pengembang yang Anda gunakan, atau cukup buka kode sumber dan gaya dan cobalah untuk mencocokkan masalah. Untuk menemukan file yang terlibat, Anda akan menggunakan fitur "Cari" atau "Cari dalam file" dengan nama kelas gaya.
  3. Setelah kesalahan terdeteksi, hentikan browser Web dan server.
  4. Hapus cache browser.
  5. Kembali ke Visual Studio untuk menerapkan perbaikan. Ulangi semua langkah yang akan diuji.

Karena tidak ada WYSIWYG nyata di ASP.NET MVC 4, sebagian besar masalah gaya terdeteksi pada tahap selanjutnya, setelah menjalankan atau menyebarkan aplikasi web. Sekarang, dengan Pemeriksa Halaman, dimungkinkan untuk mempratinjau halaman apa pun tanpa menjalankan solusi.

Dalam tugas ini, Anda akan menggunakan pemeriksa Halaman dan memperbaiki beberapa masalah aplikasi Galeri Foto.

  1. Menggunakan Pemeriksa Halaman, temukan tautan Daftar dan Masuk di sisi kiri header.

    Perhatikan bahwa tautan tidak ditampilkan di tempat yang diharapkan di sebelah kanan, dan tautan ditampilkan seperti daftar berpoin. Anda sekarang akan menyelaraskan tautan ke kanan dan memulihkannya dengan sesuai.

    Menemukan tautan Daftar dan Masuk

    Menemukan tautan Daftar dan Masuk

  2. Dengan Ubah Mode Inspeksi dipilih, klik dekat dengan, tetapi tidak aktif, tautan Daftar untuk membuka kodenya.

    Perhatikan bahwa kode sumber tautan terletak di file _LoginPartial.cshtml , bukan Index.cshtml atau _Layout.cshtml, yang merupakan tempat yang mungkin Anda lihat di tempat pertama. Anda telah ditempatkan langsung dalam file sumber yang benar.

  3. Di tab Gaya, temukan dan klik bagian>< #login item, yang merupakan kontainer HTML untuk tautan ini.

    Perhatikan bahwa gaya #login secara otomatis terletak di Site.css setelah Anda mengklik. Selain itu, kode sekarang disorot.

    Cuplikan layar tab Gaya, pada bilah navigasi, gaya CSS untuk masuk dipilih dengan kode terkait yang disorot.

    Memilih gaya CSS

  4. Batalkan komentar atribut text-align dalam kode yang disorot dengan menghapus karakter buka dan tutup dan simpan file Site.css .

    Pemeriksa Halaman mengetahui semua file berbeda yang menyusun halaman saat ini, dan dapat mendeteksi kapan salah satu file ini berubah. Ini memberi tahu Anda setiap kali halaman saat ini di browser tidak sinkron dengan file sumber.

  5. Di browser Pemeriksa Halaman, klik bilah yang terletak di bawah bilah alamat untuk memuat ulang halaman.

    Cuplikan layar browser Pemeriksa Halaman yang menampilkan bilah yang terletak di bawah bilah alamat yang digunakan untuk menyimpan perubahan dan memuat ulang halaman.

    Memuat ulang halaman

    Tautan sekarang ada di sebelah kanan, tetapi masih terlihat seperti daftar berpoin. Sekarang, Anda akan menghapus poin dan meratakan tautan secara horizontal.

    Cuplikan layar kanan atas jendela Pemeriksa Halaman memperlihatkan tautan Daftar dan Masuk ditampilkan sebagai daftar berpoin.

    Halaman yang diperbarui

  6. Dengan menggunakan mode inspeksi, pilih salah <satu item li> yang berisi tautan "Daftar" dan "Masuk". Kemudian, klik bagian <> #login item untuk mengakses kode Styles.css.

    Cuplikan layar memperlihatkan jendela Pemeriksa Halaman dalam mode inspeksi dan memilih tautan Daftar dan Masuk untuk mengakses kode Styles.css.

    Menemukan gaya

  7. Di Style.css, batalkan komentar kode untuk item #login li . Gaya yang Anda tambahkan akan menyembunyikan poin dan menampilkan item secara horizontal.

    Cuplikan layar Style.css memulihkan tautan masuk untuk ditampilkan secara horizontal.

    Memulihkan tautan masuk

  8. Simpan file Style.css dan klik sekali pada bilah yang terletak di bawah alamat untuk memuat ulang halaman. Perhatikan bahwa tautan muncul dengan benar.

    Cuplikan layar kanan atas jendela Pemeriksa Halaman memperlihatkan tautan Daftar dan Masuk yang diratakan secara horizontal.

    Tautan diratakan ke sisi kanan

  9. Terakhir, Anda akan mengubah judul header. Gunakan mode inspeksi untuk mengklik logo Anda di sini teks dan masuk ke kode sumber yang menghasilkannya.

  10. Sekarang Anda berada di _Layout.cshtml, ganti teks 'logo Anda di sini' dengan 'Galeri Foto'. Simpan dan perbarui browser Pemeriksa Halaman.

    Menetapkan judul baru

    Menetapkan judul baru

    Halaman Galeri Foto

    Halaman Galeri Foto diperbarui

  11. Terakhir, pilih proyek PhotoGallery dan tekan F5 untuk menjalankan aplikasi. Lihat semua perubahan berfungsi seperti yang diharapkan.

Latihan 2: Menggunakan Pemeriksa Halaman di Proyek WebForms

Dalam latihan ini, Anda akan mempelajari cara mempratinjau dan men-debug solusi WebForms menggunakan Pemeriksa Halaman. Pertama-tama Anda akan melakukan putaran singkat di sekitar alat untuk mempelajari fitur Pemeriksa Halaman yang memfasilitasi proses penelusuran kesalahan Web. Kemudian, Anda akan bekerja di halaman web yang berisi masalah gaya. Anda akan mempelajari cara menggunakan Pemeriksa Halaman untuk menemukan kode sumber yang menghasilkan masalah dan memperbaikinya.

Tugas 1 - Menjelajahi Pemeriksa Halaman

Dalam tugas ini, Anda akan mempelajari cara menggunakan fitur Pemeriksa Halaman dalam konteks proyek WebForms yang memperlihatkan galeri foto.

  1. Buka folder Mulai solusi yang terletak di Sumber/Ex2-WebForms/Begin/.

    1. Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.

    2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.

    3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.

      Catatan

      Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.

  2. Di halaman Penjelajah Solusi, temukan Default.aspx, klik kanan dan pilih Tampilkan di Pemeriksa Halaman.

    Membuka Default.aspx dengan Pemeriksa Halaman

    Membuka Default.aspx dengan Pemeriksa Halaman

  3. Jendela Pemeriksa Halaman akan menampilkan Default.aspx.

    Menampilkan Default.aspx di Pemeriksa Halaman

    Menampilkan Default.aspx di Pemeriksa Halaman

    Alat Pemeriksa Halaman terintegrasi di lingkungan Visual Studio Anda. Inspektur berisi browser yang disematkan, bersama dengan profiler HTML canggih yang akan menampilkan kode yang dipilih. Perhatikan bahwa Anda tidak perlu menjalankan solusi untuk melihat tampilan halaman Anda.

    Catatan

    Ketika lebar browser Pemeriksa Halaman kurang dari lebar halaman yang dibuka, Anda tidak akan melihat halaman dengan benar. Jika itu terjadi, sesuaikan lebar Pemeriksa Halaman.

  4. Klik tab File di Pemeriksa Halaman.

    Anda akan melihat semua file sumber yang menyusun halaman Default yang dirender. Ini adalah fitur yang berguna untuk mengidentifikasi semua elemen secara sekilas, terutama ketika Anda bekerja dengan Kontrol Pengguna dan Halaman Master. Perhatikan bahwa Anda juga dapat menavigasi ke setiap file.

    Tab File

    Tab File

  5. Klik tombol Alihkan Mode Inspeksi, yang terletak di sebelah kiri tab.

    Alat ini akan memungkinkan Anda memilih elemen halaman apa pun dan melihat kode HTML dan sumber .aspx.

    Tombol Alihkan Mode Inspeksi

    Tombol Alihkan Mode Inspeksi

  6. Di browser Pemeriksa Halaman, gerakkan mouse di atas elemen halaman. Saat Anda memindahkan penunjuk mouse ke bagian mana pun dari halaman yang dirender, jenis elemen ditampilkan dan markup sumber atau kode yang sesuai disorot di editor Visual Studio.

    Cuplikan layar jendela Pemeriksa Halaman dan editor Visual Studio dengan jenis elemen ditampilkan dan kode yang sesuai disorot.

    Mode inspeksi sedang beraksi

    Catatan

    Jangan maksimalkan jendela Pemeriksa Halaman atau Anda tidak akan dapat melihat tab pratinjau yang menampilkan kode sumber. Jika Anda mengklik elemen di Pemeriksa Halaman saat dimaksimalkan, kode sumber pilihan akan muncul tetapi akan menyembunyikan jendela Pemeriksa Halaman.

    Jika Anda memperhatikan file Default.aspx , Anda akan melihat bahwa bagian kode sumber yang menghasilkan elemen yang dipilih disorot. Fitur ini memfasilitasi edisi file sumber panjang, menyediakan cara langsung dan cepat untuk mengakses kode.

    Cuplikan layar jendela Pemeriksa Halaman dan file Default.aspx editor Visual Studio yang menunjukkan bahwa bagian kode sumber yang menghasilkan elemen yang dipilih disorot.

    Memeriksa elemen

  7. Klik tombol Alihkan Mode Inspeksi (Select-the-HTML-tab-to-display-the-HTML-code-rendered-in-the-Page-Inspector-browser. ), yang terletak di tab Pemeriksa Halaman, untuk menonaktifkan kursor.

  8. Pilih tab HTML untuk menampilkan kode HTML yang dirender di browser Pemeriksa Halaman.

  9. Dalam kode HTML, temukan item daftar dengan tautan Koala dan pilih.

    Perhatikan bahwa ketika Anda memilih kode, output yang sesuai secara otomatis disorot browser. Fitur ini berguna untuk melihat bagaimana blok HTML dirender di halaman.

    Memilih elemen HTML di halaman

    Memilih elemen HTML di halaman

  10. Klik tombol Alihkan Mode Inspeksi untuk mengaktifkan Mode Inspeksi dan klik bilah navigasi. Di sebelah kanan kode HTML, di panel Gaya, Anda akan melihat daftar dengan gaya CSS yang diterapkan ke elemen yang dipilih.

    Catatan

    karena header adalah bagian dari tata letak situs, Pemeriksa Halaman juga akan membuka file Site.Master dan menyoroti segmen kode yang terpengaruh.

    Menemukan gaya WebForms

    Menemukan gaya dan file sumber dari elemen yang dipilih

  11. Dengan penunjuk inspeksi pengalih diaktifkan, gerakkan penunjuk mouse di bawah bilah menu dan klik lingkaran setengah kosong.

    Cuplikan layar kiri atas jendela Pemeriksa Halaman memperlihatkan penunjuk mouse memilih setengah lingkaran di bawah bilah berfungsi biru.

    Memilih elemen

  12. Di panel Gaya, temukan item gambar latar belakang di bawah grup .main-content . Hapus centang pada gambar latar belakang dan lihat apa yang terjadi. Anda akan melihat bahwa browser akan segera mencerminkan perubahan dan lingkaran disembunyikan.

    Catatan

    Perubahan yang Anda terapkan pada tab Gaya Pemeriksa Halaman tidak memengaruhi lembar gaya asli. Anda dapat menghapus centang gaya atau mengubah nilainya sebanyak yang Anda inginkan, tetapi nilai tersebut akan dipulihkan setelah me-refresh halaman.

    Mengaktifkan dan menonaktifkan gaya CSS2

    Mengaktifkan dan menonaktifkan gaya CSS

  13. Sekarang, klik teks 'logo Anda di sini' pada header menggunakan mode inspeksi.

  14. Di tab Gaya, temukan atribut CSS ukuran font di bawah grup .site-title. Klik dua kali atribut sekali untuk mengedit nilainya. Ganti nilai 2,3em dengan 3em, lalu tekan ENTER. Perhatikan bahwa judulnya terlihat lebih besar.

    Mengubah nilai CSS di Pemeriksa Halaman2

    Mengubah nilai CSS di Pemeriksa Halaman

  15. Klik tab Lacak Gaya , yang terletak di panel kanan Pemeriksa Halaman. Ini adalah cara alternatif untuk melihat semua gaya yang diterapkan ke pilihan, diurutkan berdasarkan nama atribut.

    Pelacakan gaya CSS dari elemen yang dipilih

    Pelacakan gaya CSS dari elemen yang dipilih

  16. Fitur lain dari Pemeriksa Halaman adalah panel Tata Letak. Menggunakan mode inspeksi, pilih bilah navigasi lalu klik tab Tata Letak di panel kanan. Anda akan melihat ukuran yang tepat dari elemen yang dipilih, serta offset, margin, padding, dan ukuran batasnya. Perhatikan bahwa Anda juga dapat memodifikasi nilai dari tampilan ini.

    Cuplikan layar bilah navigasi dengan tab Tata Letak dipilih menampilkan diagram tata letak elemen.

    Tata letak elemen di Pemeriksa Halaman

Tugas 2 - Menemukan dan Memperbaiki Masalah Gaya di Galeri Foto

Bagaimana Anda mendiagnosis masalah halaman Web dengan versi Visual Studio sebelumnya? Anda mungkin terbiasa dengan alat penelusuran kesalahan web yang berjalan di luar VISUAL Studio IDE, seperti Alat Pengembang Internet Explorer atau Firebug. Browser hanya memahami HTML, scripting, dan gaya, sementara kerangka kerja yang mendasar menghasilkan HTML yang akan dirender. Untuk alasan itu, Anda sering kali perlu menyebarkan seluruh situs untuk melihat tampilan halaman web.

Anda mungkin telah mengikuti langkah-langkah ini ketika Anda ingin mendeteksi dan memperbaiki masalah di situs web Anda:

  1. Jalankan Solusi dari Visual Studio, atau sebarkan halaman di server web.
  2. Di browser, buka alat pengembang yang Anda gunakan, atau cukup buka kode sumber dan gaya dan cobalah untuk mencocokkan masalah. Untuk menemukan file yang terlibat, Anda akan menggunakan fitur "Cari" atau "Cari dalam file" dengan nama kelas gaya.
  3. Setelah kesalahan terdeteksi, hentikan browser Web dan server.
  4. Hapus cache browser.
  5. Kembali ke Visual Studio untuk menerapkan perbaikan. Ulangi semua langkah yang akan diuji.

Karena tidak ada WYSIWYG nyata dalam ASP.NET WebForms, beberapa masalah gaya terdeteksi pada tahap selanjutnya, setelah berjalan atau menyebarkan. Sekarang, dengan Pemeriksa Halaman, dimungkinkan untuk mempratinjau halaman apa pun tanpa menjalankan solusi.

Dalam tugas ini, Anda akan menggunakan pemeriksa Halaman untuk memperbaiki beberapa masalah aplikasi Galeri Foto. Dalam langkah-langkah berikut, Anda akan mendeteksi dan dengan cepat memperbaiki beberapa masalah gaya sederhana di header.

  1. Menggunakan Inspeksi Halaman, temukan tautan Daftar dan Masuk di sisi kiri header.

    Perhatikan bahwa tautan tidak ditampilkan di tempat yang diharapkan di sebelah kanan. Anda sekarang akan menyelaraskan tautan ke kanan dan memulihkannya dengan sesuai.

    Tautan masuk diposisikan di sebelah kiri

    Tautan Masuk diposisikan di sebelah kiri

  2. Dengan Beralih Mode Inspeksi dipilih, pilih tautan Masuk untuk membuka kodenya.

    Perhatikan bahwa kode sumber tautan terletak di file Site.Master , bukan di halaman Default.aspx yang merupakan tempat yang mungkin Anda cari di tempat pertama; Anda telah ditempatkan langsung di file sumber yang benar.

  3. Di tab Gaya, temukan dan klik bagian>< #login item, yang merupakan kontainer HTML untuk tautan ini.

    Perhatikan bahwa gaya #login secara otomatis terletak di Site.css setelah Anda mengklik. Selain itu, kode sekarang disorot.

    Cuplikan layar memperlihatkan tab Gaya pada bilah navigasi, gaya CSS untuk masuk dipilih dengan kode terkait yang disorot.

    Memilih gaya CSS

  4. Batalkan komentar atribut text-align dalam kode yang disorot dengan menghapus karakter buka dan tutup dan simpan file Site.css .

    Pemeriksa Halaman mengetahui semua file berbeda yang menyusun halaman saat ini, dan dapat mendeteksi kapan salah satu file ini berubah. Ini memberi tahu Anda setiap kali halaman saat ini di browser tidak sinkron dengan file sumber.

  5. Di browser Pemeriksa Halaman, klik bilah yang terletak di bawah bilah alamat untuk menyimpan perubahan dan memuat ulang halaman.

    Cuplikan layar browser Pemeriksa Halaman memperlihatkan bilah yang terletak di bawah bilah alamat yang digunakan untuk menyimpan perubahan dan memuat ulang halaman.

    Memuat ulang halaman

    Tautan sekarang ada di sebelah kanan, tetapi masih terlihat seperti daftar berpoin. Sekarang, Anda akan menghapus poin dan meratakan tautan secara horizontal.

    Cuplikan layar yang menampilkan kanan atas jendela Pemeriksa Halaman memperlihatkan tautan Daftar dan Masuk sebagai daftar berpoin.

    Halaman yang diperbarui

  6. Dengan menggunakan mode inspeksi, pilih salah <satu item li> yang berisi tautan "Daftar" dan "Masuk". Kemudian, klik bagian <> #login item untuk mengakses kode Styles.css.

    Cuplikan layar jendela Pemeriksa Halaman dalam mode inspeksi dan memilih tautan Daftar dan Masuk untuk mengakses kode Styles.css.

    Menemukan gaya

  7. Di Style.css, batalkan komentar kode untuk item #login li . Gaya yang Anda tambahkan akan menyembunyikan poin dan menampilkan item secara horizontal.

    Cuplikan layar Style.css menambahkan gaya sehingga tautan masuk akan ditampilkan secara horizontal.

    Memulihkan tautan masuk

  8. Simpan file Style.css dan klik sekali pada bilah yang terletak di bawah alamat untuk memuat ulang halaman. Perhatikan bahwa tautan muncul dengan benar.

    Cuplikan layar memperlihatkan kanan atas jendela Pemeriksa Halaman yang menampilkan tautan Daftar dan Masuk selaras secara horizontal.

    Tautan diratakan ke sisi kanan

  9. Terakhir, Anda akan mengubah judul header. Alih-alih mencari teks 'logo Anda di sini' di semua file, gunakan mode inspeksi untuk mengklik teks dan mendapatkan kode sumber yang menghasilkannya.

    Menemukan judul situs

    Menemukan judul situs

  10. Sekarang Anda berada di Site.Master, ganti teks 'logo Anda di sini' dengan 'Galeri Foto'. Simpan dan perbarui browser Pemeriksa Halaman.

    Halaman Galeri Foto diperbarui

    Halaman Galeri Foto diperbarui

  11. Akhirnya tekan F5 untuk menjalankan aplikasi, lihat semua perubahan berfungsi seperti yang diharapkan.

Ringkasan

Dengan menyelesaikan Lab Langsung ini, Anda telah mempelajari cara menggunakan Pemeriksa Halaman untuk mempratinjau aplikasi Web Anda tanpa harus membangun kembali dan menjalankan situs Web di browser. Selain itu, Anda telah mempelajari cara menemukan dan memperbaiki bug dengan cepat dengan mengakses langsung dari output yang dirender ke kode sumber.

Lampiran A: Menginstal Visual Studio Express 2012 untuk Web

Anda dapat menginstal Microsoft Visual Studio Express 2012 untuk Web atau versi "Ekspres" lainnya menggunakan Microsoft Web Platform Installer. Instruksi berikut memandu Anda melalui langkah-langkah yang diperlukan untuk menginstal Visual studio Express 2012 untuk Web menggunakan Microsoft Web Platform Installer.

  1. Buka [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Atau, jika Anda sudah menginstal Penginstal Platform Web, Anda dapat membukanya dan mencari produk "Visual Studio Express 2012 untuk Web dengan Windows Azure SDK".

  2. Klik Instal Sekarang. Jika Anda tidak memiliki Penginstal Platform Web, Anda akan diarahkan untuk mengunduh dan menginstalnya terlebih dahulu.

  3. Setelah Penginstal Platform Web terbuka, klik Instal untuk memulai penyiapan.

    Menginstal Visual Studio Express

    Menginstal Visual Studio Express

  4. Baca semua lisensi dan ketentuan produk dan klik Saya Terima untuk melanjutkan.

    Menerima persyaratan lisensi

    Menerima persyaratan lisensi

  5. Tunggu hingga proses pengunduhan dan penginstalan selesai.

    Kemajuan instalasi

    Kemajuan penginstalan

  6. Setelah penginstalan selesai, klik Selesai.

    Penginstalan selesai

    Penginstalan selesai

  7. Klik Keluar untuk menutup Penginstal Platform Web.

  8. Untuk membuka Visual Studio Express for Web, buka layar Mulai dan mulai menulis "VS Express", lalu klik petak VS Express untuk Web .

    Vs Express untuk petak web

    Vs Express untuk petak web

  • Last updated on