Visual Studio 2012'de Sayfa Denetçisini Kullanma

Web Camps Team tarafından

Bu Uygulamalı Laboratuvarda, Visual Studio'daki web sayfası sorunlarını (Sayfa Denetçisi) bulmak ve düzeltmek için yeni bir araç keşfedeceksiniz.

Sayfa Denetçisi, tarayıcı tanılama araçlarını Visual Studio'ya getiren ve tarayıcı, ASP.NET ve kaynak kodu arasında tümleşik bir deneyim sağlayan yeni bir araçtır. Web sayfasını (HTML, Web Forms, ASP.NET MVC veya Web Sayfaları) doğrudan Visual Studio IDE içinde işler ve hem kaynak kodu hem de sonuçta elde edilen çıkışı incelemenize olanak tanır. Sayfa Denetçisi, bir web sitesini kolayca ayrıştırmanıza, sıfırdan hızla sayfalar oluşturmanıza ve sorunları hızla tanılamanıza olanak tanır.

Günümüzde ASP.NET MVC ve WebForms gibi esnek ve ölçeklenebilir web sitelerini zamanında oluşturan bir dizi Web çerçevemiz vardır. Öte yandan, IDE şablon tabanlı sayfalarda ve dinamik içerikte tasarımcı görünümünü desteklemediğinden sayfalarda sorun bulmak zorlaşır. Bu nedenle, bu web sitelerinin bir kullanıcıya nasıl göründüğünü görmek için tarayıcıda açılması gerekir.

Web geliştiricileri, tarayıcıda düzenli olarak çalışan sorunları bulmak için dış araçlar kullanır. Ardından IDE'ye dönüp düzeltmeye başlarlar. IDE, tarayıcı ve profil oluşturma araçları arasındaki bu ileri geri etkinlik verimsiz olabilir ve bazen bir sorunu her yeniden oluşturmak istediğinizde yeni bir dağıtım ve önbellek temizliği gerektirir.

Sayfa Denetçisi, birleştirilmiş bir özellik kümesi kullanarak her iki dünyanın da en iyilerini bir araya getirerek istemci (tarayıcı araçları) ile sunucu (ASP.NET ve kaynak kodu) arasında Web geliştirmede bir boşluk oluşturur.

Sayfa Denetçisi'ni kullanarak, kaynak dosyalarda hangi öğelerin (sunucu tarafı kodu dahil) tarayıcıda işlenecek HTML işaretlemesini ürettiğini görebilirsiniz. Sayfa Denetçisi ayrıca CSS özelliklerini ve DOM öğesi özniteliklerini değiştirerek değişikliklerin tarayıcıda hemen yansıtılmış olduğunu görmenize olanak tanır.

Bu uygulamalı laboratuvar, Sayfa Denetçisi özelliklerinde size yol gösterir ve Bunları Web uygulamalarındaki sorunları çözmek için nasıl kullanabileceğinizi gösterir. Bu laboratuvar, benzer akışları kullanan ancak farklı teknolojileri hedefleyen iki alıştırma içerir. ASP.NET MVC Geliştiricisiyseniz alıştırmayı izleyin; WebForms geliştiricisiyseniz iki. alıştırmayı izleyin.

Bu laboratuvar, Kaynak klasöründe sağlanan örnek bir Web uygulamasına küçük değişiklikler uygulayarak daha önce açıklanan iyileştirmeler ve yeni özelliklerde size yol gösterir.

Hedefler

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:

• Sayfa Denetçisi'ni kullanarak Bir Web Sitesini Ayrıştırma
• Sayfa Denetçisi ile CSS stil değişikliklerini inceleme ve önizleme
• Sayfa Denetçisi'ni kullanarak web sayfalarınızdaki sorunları algılama ve düzeltme

Önkoşullar

Bu laboratuvarı tamamlamak için aşağıdaki öğelere sahip olmanız gerekir:

• Microsoft Visual Studio Express 2012 for Web veya superior (yükleme yönergeleri için Ek A'ya bakın).
• Internet Explorer 9 veya üzeri

---

Egzersiz

Bu uygulamalı laboratuvar aşağıdaki alıştırmaları içerir:

1. Alıştırma 1: ASP.NET MVC Projelerinde Sayfa Denetçisi Kullanma
2. Alıştırma 2: WebForms Projelerinde Sayfa Denetçisi Kullanma

Not

Her alıştırmaya, alıştırmanın Begin klasöründe bulunan ve her alıştırmayı diğerlerinden bağımsız olarak izlemenizi sağlayan bir başlangıç çözümü eşlik eder. Bir alıştırmanın kaynak kodunun içinde, ilgili alıştırmadaki adımların tamamlanmasıyla sonuçlanacak kodu içeren bir Visual Studio çözümü içeren bir End klasörü de bulacaksınız. Bu uygulamalı laboratuvarda çalışırken ek yardıma ihtiyacınız varsa bu çözümleri rehberlik olarak kullanabilirsiniz.

Bu laboratuvarın tamamlanması için tahmini süre: 30 dakika.

Alıştırma 1: ASP.NET MVC Projelerinde Sayfa Denetçisi Kullanma

Bu alıştırmada, Sayfa Denetçisi'ni kullanarak bir ASP.NET MVC 4 çözümünün önizlemesini ve hatalarını ayıklamayı öğreneceksiniz. İlk olarak, Web hata ayıklama işlemini kolaylaştıran özellikleri öğrenmek için aracın etrafında kısa bir tur yapacaksınız. Ardından, stil oluşturma sorunları içeren bir web sayfasında çalışacaksınız. Sorunu oluşturan kaynak kodu bulmak ve düzeltmek için Sayfa Denetçisi'ni kullanmayı öğreneceksiniz.

Görev 1 - Sayfa Denetçisini Keşfetme

Bu görevde, Bir fotoğraf galerisini gösteren bir ASP.NET MVC 4 projesi bağlamında Sayfa Denetçisi'ni kullanmayı öğreneceksiniz.

1. Source/Ex1-MVC4/Begin/ klasöründe bulunan Begin çözümünü açın.

   1. Devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet'i seçin.

   2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

   3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarakçözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunun küçültülmesidir. NuGet Power Tools ile, Packages.config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

2. Çözüm Gezgini,/Views/Home proje klasörünün altında Index.cshtml görünümünü bulun, sağ tıklayın ve Sayfa Denetçisinde Görüntüle'yi seçin.

   

   Sayfa Denetçisi'nde önizlemek için bir dosya seçme

3. Sayfa Denetçisi penceresinde seçtiğiniz kaynak Görünüme eşlenmiş /Home/Index URL'si gösterilir.

   

   Sayfa Denetçisi ile ilk kişi

   Sayfa Denetçisi aracı Visual Studio ortamınızla tümleşiktir. Denetçi, güçlü bir HTML profil oluşturucu ile birlikte eklenmiş bir tarayıcı içerir. Sayfalarınızın nasıl göründüğünü görmek için çözümü çalıştırmanız gerekmediğine dikkat edin.

   Not

   Sayfa Denetçisi tarayıcısının genişliği açılan sayfanın genişliğinden küçükse, sayfayı düzgün görmezsiniz. Böyle bir durumda, Sayfa Denetçisi'nin genişliğini ayarlayın.

4. Sayfa Denetçisi'nde Dosyalar sekmesine tıklayın.

   Dizin sayfasını oluşturan tüm kaynak dosyaları görürsünüz. Bu özellik, özellikle kısmi görünümler ve şablonlarla çalışırken tüm öğeleri bir bakışta tanımlamaya yardımcı olur. Bağlantılara tıklarsanız dosyaların her birini de açabileceğinize dikkat edin.

   

   Dosyalar sekmesi

5. Sekmelerin sol tarafındaki Denetleme Modunu Aç/Kapat düğmesine tıklayın.

   Bu araç, sayfanın herhangi bir öğesini seçmenize ve HTML ile Razor kodunu görmenize olanak verir.

   

   denetleme modunu aç/kapat düğmesi

6. Sayfa Denetçisi tarayıcısında fare işaretçisini sayfa öğelerinin üzerine getirin. Fare işaretçisini işlenen sayfanın herhangi bir bölümünün üzerine getirdiğinizde, öğe türü görüntülenir ve Visual Studio düzenleyicisinde ilgili kaynak işaretleme veya kod vurgulanır.

   

   İnceleme modu iş başında

   Not

   Sayfa Denetçisi penceresini ekranı kaplamayın, aksi takdirde kaynak kodu gösteren önizleme sekmesini göremezsiniz. Sayfa Denetçisi'nde öğe ekranı kapladığında öğeye tıklarsanız, seçimin kaynak kodu görünür ancak Sayfa Denetçisi penceresini gizler.

   Index.cshtml dosyasına dikkat ederseniz, kaynak kodun seçili öğeyi oluşturan bölümünün vurgulandığını fark edeceksiniz. Bu özellik, koda erişmek için doğrudan ve hızlı bir yol sağlayarak uzun kaynak dosyalarının düzenlenmesini kolaylaştırır.

   

   Öğeleri inceleme

7. İnceleme Modunu Aç/Kapat düğmesine tıklayın ( ) öğesini seçin.

8. Sayfa Denetçisi tarayıcısında işlenen HTML kodunu görüntülemek için HTML sekmesini seçin .

9. HTML işaretlemesinde, Koala bağlantısını içeren liste öğesini bulun ve seçin.

   Kodu seçtiğinizde ilgili çıkışın tarayıcıda otomatik olarak vurgulandığına dikkat edin. Bu özellik, bir HTML bloğunun sayfada nasıl işlendiğini görmek için kullanışlıdır.

   

   Sayfada HTML öğesini seçme

10. Denetleme Modunu Aç/Kapat düğmesine tıklayarak Denetleme Modu'nu etkinleştirin ve gezinti çubuğuna tıklayın. HTML kodunun sağ tarafındaki Stiller bölmesinde, seçili öğeye CSS stillerinin uygulandığı bir liste görürsünüz.

    Not

    Üst bilgi site düzeninin bir parçası olduğundan, Sayfa Denetçisi _Layout.cshtml dosyasını da açar ve etkilenen kod kesimini vurgular.

    

    Seçili öğenin stillerini ve kaynak dosyalarını bulma

11. geçiş denetimi işaretçisi etkinleştirildiğinde, fare işaretçisini mavi öne çıkan çubuğun altına getirin ve yarım daireye tıklayın.

    

    Öğe seçme

12. Stiller bölmesinde, .main-content grubunun altındaki arka plan görüntüsü öğesini bulun. Arka plan görüntüsününişaretini kaldırın ve ne olduğunu görün. Tarayıcının değişiklikleri hemen yansıtacağını ve dairenin gizlendiğini fark edeceksiniz.

    Not

    Sayfa Denetçisi Stilleri sekmesinde uyguladığınız değişiklikler özgün stil sayfasını etkilemez. Stillerin işaretini kaldırabilirsiniz veya değerlerini istediğiniz kadar değiştirebilirsiniz, ancak sayfa yenilendikten sonra geri yüklenirler.

    

    CSS stillerini etkinleştirme ve devre dışı bırakma

13. Şimdi inceleme modunu kullanarak üst bilgideki 'burada logonuz' metnine tıklayın.

14. Stiller sekmesinde, .site-title grubunun altında font-size CSS özniteliğini bulun. Öznitelik değerine çift tıklayın, 2,3 em değerini 3 em ile değiştirin ve ENTER tuşuna basın. Başlığın daha büyük göründüğüne dikkat edin.

    

    Sayfa Denetçisi'nde CSS değerlerini değiştirme

15. Sayfa Denetçisi'nin sağ bölmesinde bulunan İzleme Stilleri sekmesine tıklayın. Bu, seçime uygulanan tüm stilleri öznitelik adına göre sıralanmış olarak görmenin alternatif bir yoludur.

    

    Seçili öğenin CSS stilleri izlemesi

16. Sayfa Denetçisi'nin bir diğer özelliği de Düzen bölmesidir. denetleme modunu kullanarak gezinti çubuğunu seçin ve ardından sağ bölmedeki Düzen sekmesine tıklayın. Seçili öğenin tam boyutunun yanı sıra uzaklık, kenar boşluğu, doldurma ve kenarlık boyutunu görürsünüz. Bu görünümdeki değerleri de değiştirebileceğinize dikkat edin.

    

    Sayfa Denetçisi'nde öğe düzeni

Görev 2 - Fotoğraf Galerisinde Stil Sorunlarını Bulma ve Düzeltme

Visual Studio'nun önceki sürümleriyle ilgili Web sayfaları sorunlarını nasıl tanılarsınız? Internet Explorer Geliştirici Araçları veya Firebug gibi Visual Studio IDE dışında çalışan web hata ayıklama araçlarını muhtemelen biliyorsunuz. Tarayıcılar yalnızca HTML, betik ve stilleri anlarken, temel alınan bir çerçeve işlenecek HTML'yi oluşturur. Bu nedenle, web sayfalarının nasıl göründüğünü görmek için genellikle tüm siteyi dağıtmanız gerekir.

Web sitenizdeki bir sorunu algılamak ve düzeltmek istediğinizde büyük olasılıkla şu adımları izlemişsinizdir:

1. Visual Studio'dan Çözümü çalıştırın veya sayfayı web sunucusunda dağıtın.
2. Tarayıcıda, kullandığınız geliştirici araçlarını açın veya kaynak kodu ve stilleri açıp sorunu eşleştirmeyi deneyin. İlgili dosyaları bulmak için stil sınıflarının adıyla "Arama" veya "Dosyalarda ara" özelliklerini kullanmış olursunuz.
3. Hata algılandıktan sonra Web tarayıcısını ve sunucuyu durdurun.
4. Tarayıcı önbelleğini temizleyin.
5. Bir düzeltme uygulamak için Visual Studio'ya dönün. Test etmek için tüm adımları yineleyin.

ASP.NET MVC 4'te gerçek WYSIWYG olmadığından, stil sorunlarının çoğu web uygulamasını çalıştırdıktan veya dağıtıldıktan sonra sonraki bir aşamada algılanır. Artık Sayfa Denetçisi ile çözümü çalıştırmadan herhangi bir sayfayı önizlemek mümkündür.

Bu görevde, Sayfa denetçisini kullanacak ve Fotoğraf Galerisi uygulamasındaki bazı sorunları düzelteceksiniz.

1. Sayfa Denetçisi'ni kullanarak üst bilginin sol tarafındaki Kaydet ve Oturum aç bağlantılarını bulun.

   Bağlantıların sağ tarafta beklenen yerde görüntülenmediğini ve madde işaretli liste gibi gösterildiğine dikkat edin. Şimdi bağlantıları sağa hizalar ve uygun şekilde restyle yaparsınız.

   

   Kaydet ve Oturum Aç bağlantılarını bulma

2. denetleme modunu değiştir seçiliyken, kodunu açmak için Kaydet bağlantısına yakın ancak açık değil seçeneğine tıklayın.

   Bağlantıların kaynak kodunun index.cshtml veya _Layout.cshtml dosyasında değil _LoginPartial.cshtml dosyasında bulunduğuna dikkat edin. Doğrudan doğru kaynak dosyaya yerleştirildiniz.

3. Stiller sekmesinde, bu bağlantıların <HTML kapsayıcısı olan öğe #login bölümünü> bulun ve tıklayın.

   tıkladıktan sonra #login stilinin otomatik olarak Site.css'de bulunduğuna dikkat edin. Ayrıca kod artık vurgulanmış durumdadır.

   

   CSS stillerini seçme

4. Açma ve kapatma karakterlerini kaldırarak vurgulanan koddaki metin hizalama özniteliğinin açıklamasını kaldırın ve Site.css dosyasını kaydedin.

   Sayfa Denetçisi geçerli sayfayı oluşturan tüm farklı dosyaların farkındadır ve bu dosyalardan herhangi birinin ne zaman değiştiğini algılayabilir. Tarayıcıdaki geçerli sayfa kaynak dosyalarla eşitlenmediği her durumda sizi uyarır.

5. Sayfa Denetçisi tarayıcısında, sayfayı yeniden yüklemek için adres çubuğunun altındaki çıtaya tıklayın.

   

   Sayfayı yeniden yükleme

   Bağlantılar artık sağ taraftadır, ancak yine de madde işaretli bir liste gibi görünür. Şimdi madde işaretlerini kaldıracak ve bağlantıları yatay olarak hizalaacaksınız.

   

   Güncelleştirilmiş sayfa

6. Denetleme modunu kullanarak "Kaydol" ve "Oturum aç" bağlantılarını içeren li> öğelerinden herhangi birini< seçin. Ardından, Styles.css koduna <erişmek için öğe #login bölümüne> tıklayın.

   

   Stili bulma

7. Style.css dosyasında, #login li öğelerinin kodunun açıklamasını kaldırın. Eklediğiniz stil madde işaretini gizler ve öğeleri yatay olarak görüntüler.

   

   Oturum açma bağlantılarının dinlenmesi

8. Style.css dosyasını kaydedin ve sayfayı yeniden yüklemek için adresin altındaki çıtaya bir kez tıklayın. Bağlantıların doğru göründüğüne dikkat edin.

   

   Sağ tarafa hizalanmış bağlantılar

9. Son olarak üst bilgi başlığını değiştireceksiniz. İnceleme modunu kullanarak buradaki logonuza tıklayın ve bunu oluşturan kaynak koduna ulaşın.

10. Şimdi _Layout.cshtml'desiniz, 'burada logonuz' metnini 'Fotoğraf Galerisi' ile değiştirin. Sayfa Denetçisi tarayıcısını kaydedin ve güncelleştirin.

    

    Yeni başlık atama

    

    Fotoğraf Galerisi sayfası güncelleştirildi

11. Son olarak , PhotoGallery projesini seçin ve uygulamayı çalıştırmak için F5 tuşuna basın. Tüm değişikliklerin beklendiği gibi çalıştığını gözden geçirin.

---

Alıştırma 2: WebForms Projelerinde Sayfa Denetçisi Kullanma

Bu alıştırmada, Sayfa Denetçisi'ni kullanarak bir WebForms çözümünün önizlemesini görüntülemeyi ve hatalarını ayıklamayı öğreneceksiniz. Web hata ayıklama işlemini kolaylaştıran Sayfa Denetçisi özelliklerini öğrenmek için önce aracın etrafında kısa bir tur atacaksınız. Ardından, stil oluşturma sorunları içeren bir web sayfasında çalışacaksınız. Sorunu oluşturan kaynak kodu bulmak ve düzeltmek için Sayfa Denetçisi'ni kullanmayı öğreneceksiniz.

Görev 1 - Sayfa Denetçisini Keşfetme

Bu görevde, bir fotoğraf galerisini gösteren bir WebForms projesi bağlamında Sayfa Denetçisi özelliklerini kullanmayı öğreneceksiniz.

1. Source/Ex2-WebForms/Begin/ klasöründe bulunan Begin çözümünü açın.

   1. Devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet'i seçin.

   2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

   3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarakçözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunun küçültülmesidir. NuGet Power Tools ile, Packages.config dosyasında paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

2. Çözüm Gezgini Default.aspx sayfasını bulun, sağ tıklayın ve Sayfa Denetçisinde Görüntüle'yi seçin.

   

   Default.aspx'i Sayfa Denetçisi ile açma

3. Sayfa Denetçisi penceresinde Default.aspx gösterilir.

   

   Sayfa Denetçisi'nde Default.aspx'i görüntüleme

   Sayfa Denetçisi aracı Visual Studio ortamınızla tümleşiktir. Denetçi, seçili kodu gösterecek güçlü bir HTML profil oluşturucuyla birlikte eklenmiş bir tarayıcı içerir. Sayfalarınızın nasıl göründüğünü görmek için çözümü çalıştırmanız gerekmediğine dikkat edin.

   Not

   Sayfa Denetçisi tarayıcısının genişliği açılan sayfanın genişliğinden küçükse, sayfayı düzgün görmezsiniz. Böyle bir durumda Sayfa Denetçisi'nin genişliğini ayarlayın.

4. Sayfa Denetçisi'nde Dosyalar sekmesine tıklayın.

   İşlenen Varsayılan sayfasını oluşturan tüm kaynak dosyaları görürsünüz. Bu, özellikle Kullanıcı Denetimleri ve Ana Sayfalar ile çalışırken tüm öğeleri bir bakışta tanımlamak için kullanışlı bir özelliktir. Dosyaların her birine de gidebilirsiniz.

   

   Dosyalar sekmesi

5. Sekmelerin sol tarafındaki Denetleme Modunu Aç/Kapat düğmesine tıklayın.

   Bu araç, sayfanın herhangi bir öğesini seçmenize ve HTML kodunu ve .aspx kaynağını görmenize olanak verir.

   

   denetleme modunu aç/kapat düğmesi

6. Sayfa Denetçisi tarayıcısında fareyi sayfa öğelerinin üzerine getirin. Fare işaretçisini işlenen sayfanın herhangi bir bölümünün üzerine getirdiğinizde, öğe türü görüntülenir ve Visual Studio düzenleyicisinde ilgili kaynak işaretlemesi veya kod vurgulanır.

   

   İnceleme modu iş başında

   Not

   Sayfa Denetçisi penceresini ekranı kaplamayın, aksi takdirde kaynak kodu gösteren önizleme sekmesini göremezsiniz. Sayfa Denetçisi ekranı kapladığında öğeye tıklarsanız, seçimin kaynak kodu görünür ancak Sayfa Denetçisi penceresini gizler.

   Default.aspx dosyasına dikkat ederseniz, kaynak kodun seçili öğeyi oluşturan bölümünün vurgulandığını fark edeceksiniz. Bu özellik, koda erişmek için doğrudan ve hızlı bir yol sağlayarak uzun kaynak dosyaların yayınını kolaylaştırır.

   

   Öğeleri inceleme

7. denetleme modunu aç/kapat düğmesine tıklayın ( ), imleci devre dışı bırakmak için Sayfa Denetçisi sekmelerinde bulunur.

8. Sayfa Denetçisi tarayıcısında işlenen HTML kodunu görüntülemek için HTML sekmesini seçin .

9. HTML kodunda, Koala bağlantısına sahip liste öğesini bulun ve seçin.

   Kodu seçtiğinizde ilgili çıkışın otomatik olarak vurgulandığına dikkat edin. Bu özellik, sayfada html bloğunun nasıl işlendiğini görmek için kullanışlıdır.

   

   Sayfada html öğesi seçme

10. denetleme modunu etkinleştirmek için denetleme modunu aç/kapat düğmesine tıklayın ve gezinti çubuğuna tıklayın. HTML kodunun sağ tarafındaki Stiller bölmesinde, seçili öğeye CSS stillerinin uygulandığı bir liste görürsünüz.

    Not

    Üst bilgi site düzeninin bir parçası olduğundan, Sayfa Denetçisi Site.Master dosyasını da açar ve etkilenen kod kesimini vurgular.

    

    Seçili öğenin stillerini ve kaynak dosyalarını bulma

11. geçiş denetimi işaretçisi etkinleştirildiğinde, fare işaretçisini menü çubuğunun altına getirin ve boş yarım daireye tıklayın.

    

    Öğe seçme

12. Stiller bölmesinde, .main-content grubunun altındaki arka plan resmi öğesini bulun. Arka plan resmininişaretini kaldırın ve ne olduğunu görün. Tarayıcının değişiklikleri hemen yansıtacağını ve dairenin gizlendiğini fark edeceksiniz.

    Not

    Sayfa Denetçisi Stilleri sekmesinde uyguladığınız değişiklikler özgün stil sayfasını etkilemez. Stillerin işaretini kaldırabilirsiniz veya değerlerini istediğiniz kadar değiştirebilirsiniz, ancak bunlar sayfa yenilendikten sonra geri yüklenir.

    

    CSS stillerini etkinleştirme ve devre dışı bırakma

13. Şimdi, inceleme modunu kullanarak üst bilgideki 'logonuzburada' metnine tıklayın.

14. Stiller sekmesinde, .site-title grubunun altında font-size CSS özniteliğini bulun. Özniteliğin değerini düzenlemek için özniteliğine bir kez çift tıklayın. 2,3em değerini 3em ile değiştirin ve ENTER tuşuna basın. Başlığın daha büyük göründüğüne dikkat edin.

    

    Sayfa Denetçisi'nde CSS değerlerini değiştirme

15. Sayfa Denetçisi'nin sağ bölmesinde bulunan İzleme Stilleri sekmesine tıklayın. Bu, seçime uygulanan tüm stilleri öznitelik adına göre sıralanmış olarak görmenin alternatif bir yoludur.

    

    Seçili öğenin CSS stilleri izlemesi

16. Sayfa Denetçisi'nin bir diğer özelliği de Düzen bölmesidir. Denetleme modunu kullanarak gezinti çubuğunu seçin ve ardından sağ bölmedeki Düzen sekmesine tıklayın. Seçili öğenin tam boyutunun yanı sıra uzaklığı, kenar boşluğu, doldurma ve kenarlık boyutunu görürsünüz. Bu görünümdeki değerleri de değiştirebileceğinize dikkat edin.

    

    Sayfa Denetçisi'nde öğe düzeni

Görev 2 - Fotoğraf Galerisinde Stil Sorunlarını Bulma ve Düzeltme

Visual Studio'nun önceki sürümleriyle ilgili Web sayfaları sorunlarını nasıl tanılarsınız? Büyük olasılıkla Internet Explorer Geliştirici Araçları veya Firebug gibi Visual Studio IDE dışında çalışan web hata ayıklama araçlarını biliyorsunuz. Tarayıcılar yalnızca HTML, betik ve stilleri anlarken, temel alınan bir çerçeve işlenecek HTML'yi oluşturur. Bu nedenle, web sayfalarının nasıl göründüğünü görmek için genellikle tüm siteyi dağıtmanız gerekir.

Büyük olasılıkla web sitenizdeki bir sorunu algılamak ve düzeltmek istediğinizde bu adımları izlemişsinizdir:

1. Visual Studio'dan Çözümü çalıştırın veya sayfayı web sunucusuna dağıtın.
2. Tarayıcıda, kullandığınız geliştirici araçlarını açın veya kaynak kodu ve stilleri açıp sorunu eşleştirmeyi deneyin. İlgili dosyaları bulmak için stil sınıflarının adıyla "Dosyalarda ara" veya "Dosyalarda ara" özelliklerini kullanırdınız.
3. Hata algılandıktan sonra Web tarayıcısını ve sunucuyu durdurun.
4. Tarayıcı önbelleğini temizleyin.
5. Bir düzeltme uygulamak için Visual Studio'ya dönün. Test etmek için tüm adımları yineleyin.

ASP.NET WebForms'da gerçek WYSIWYG olmadığından, çalıştırıldıktan veya dağıtıldıktan sonra sonraki bir aşamada bazı stil sorunları algılanır. Artık Sayfa Denetçisi ile çözümü çalıştırmadan herhangi bir sayfayı önizlemek mümkündür.

Bu görevde, Fotoğraf Galerisi uygulamasının bazı sorunlarını gidermek için Sayfa denetçisini kullanacaksınız. Aşağıdaki adımlarda, üst bilgideki bazı basit stil sorunlarını algılayacak ve hızlı bir şekilde düzeltirsiniz.

1. Sayfa İncelemesi'ni kullanarak üst bilginin sol tarafındaki Kaydet ve Oturum Aç bağlantılarını bulun.

   Bağlantının sağ tarafta beklenen yerde görüntülenmediğini görebilirsiniz. Şimdi bağlantıyı sağa hizalayacak ve uygun şekilde dinlendirebilirsiniz.

   

   Oturum Aç bağlantısı sola konumlandırıldı

2. Denetleme Modunu Aç/Kapat seçiliyken Oturum Aç bağlantısını seçerek kodunu açın.

   Bağlantı kaynak kodunun, ilk sırada bakabileceğiniz Default.aspx sayfasında değil, Site.Master dosyasında bulunduğuna dikkat edin; doğrudan doğru kaynak dosyaya yerleştirildiniz.

3. Stiller sekmesinde, bu bağlantıların HTML kapsayıcısı <olan öğe #login bölümünü> bulun ve tıklatın.

   tıkladıktan sonra #login stilinin otomatik olarak Site.css'de bulunduğuna dikkat edin. Ayrıca, kod artık vurgulanır.

   

   CSS stillerini seçme

4. Vurgulanan kodda açma ve kapatma karakterlerini kaldırıp Site.css dosyasını kaydederek metin hizalama özniteliğinin açıklamasını kaldırın.

   Sayfa Denetçisi geçerli sayfayı oluşturan tüm farklı dosyaların farkındadır ve bu dosyalardan herhangi birinin ne zaman değiştiğini algılayabilir. Tarayıcıdaki geçerli sayfa kaynak dosyalarla eşitlenmediği her durumda sizi uyarır.

5. Sayfa Denetçisi tarayıcısında, değişiklikleri kaydetmek ve sayfayı yeniden yüklemek için adres çubuğunun altındaki çıtaya tıklayın.

   

   Sayfayı yeniden yükleme

   Bağlantılar artık sağ taraftadır, ancak yine de madde işaretli bir liste gibi görünür. Şimdi madde işaretlerini kaldıracak ve bağlantıları yatay olarak hizalayacaksınız.

   

   Sayfa güncelleştirildi

6. Denetleme modunu kullanarak "Kaydol" ve "Oturum aç" bağlantılarını içeren li> öğelerden< herhangi birini seçin. Ardından, Styles.css koduna <erişmek için öğe #login bölüme> tıklayın.

   

   Stili bulma

7. Style.css dosyasında, #login li öğelerinin kodunun açıklamasını kaldırın. Eklediğiniz stil madde işaretini gizler ve öğeleri yatay olarak görüntüler.

   

   Oturum açma bağlantılarını restyling

8. Style.css dosyasını kaydedin ve sayfayı yeniden yüklemek için adresin altında bulunan çıtaya bir kez tıklayın. Bağlantıların doğru göründüğüne dikkat edin.

   

   Sağ tarafa hizalanmış bağlantılar

9. Son olarak, üst bilgi başlığını değiştireceksiniz. Tüm dosyalarda 'logonuz burada' metnini aramak yerine inceleme modunu kullanarak metne tıklayın ve bunu oluşturan kaynak koduna ulaşın.

   

   Site başlığını bulma

10. Şimdi Site.Master'dasınız, 'burada logonuz' metnini 'Fotoğraf Galerisi' ile değiştirin. Sayfa Denetçisi tarayıcısını kaydedin ve güncelleştirin.

    

    Fotoğraf Galerisi sayfası güncelleştirildi

11. Son olarak, uygulamayı çalıştırmak için F5 tuşuna basın ve tüm değişiklikleri kullanıma alma işlemi beklendiği gibi çalışır.

---

Özet

Bu Hands-On Laboratuvarını tamamlayarak, Web sitesini bir tarayıcıda yeniden derlemek ve çalıştırmak zorunda kalmadan Web uygulamanızı önizlemek için Sayfa Denetçisi'ni kullanmayı öğrendiniz. Ayrıca, doğrudan işlenen çıkıştan kaynak koda erişerek hataları hızlı bir şekilde bulmayı ve düzeltmeyi öğrendiniz.

Ek A: Web için Visual Studio Express 2012'yi yükleme

Microsoft Web Platformu Yükleyicisi kullanarak Web için Microsoft Visual Studio Express 2012 veya başka bir "Express" sürümü yükleyebilirsiniz. Aşağıdaki yönergeler, Microsoft Web Platformu Yükleyicisi kullanarak Web için Visual Studio Express 2012'yi yüklemek için gereken adımlarda size yol gösterir.

1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169 adresine gidin. Alternatif olarak, Web Platformu Yükleyicisi'ni zaten yüklediyseniz, bunu açabilir ve "Windows Azure SDK ile Web için Visual Studio Express 2012" ürününü arayabilirsiniz.

2. Şimdi Yükle'ye tıklayın. Web Platformu Yükleyiciniz yoksa, önce indirip yüklemeye yönlendirilirsiniz.

3. Web Platformu Yükleyicisi açıldıktan sonra kurulumu başlatmak için Yükle'ye tıklayın.

   

   Visual Studio Express yükleme

4. Tüm ürünlerin lisanslarını ve koşullarını okuyun ve devam etmek için Kabul Ediyorum'a tıklayın.

   

   Lisans koşullarını kabul etme

5. İndirme ve yükleme işlemi tamamlanana kadar bekleyin.

   

   Yükleme ilerleme durumu

6. Yükleme tamamlandığında Son'a tıklayın.

   

   Yükleme tamamlandı

7. Web Platformu Yükleyicisi'nin kapatılması için Çıkış'a tıklayın.

8. Web için Visual Studio Express açmak için Başlangıç ekranına gidin ve "VS Express" yazmaya başlayın, ardından Web için VS Express kutucuğuna tıklayın.

   

   Web için VS Express kutucuğu