ASP.NET MVC'de Tümleşik Tarayıcı ile Sayfa Denetçisi Kullanma

Tim Ammann tarafından

Visual Studio 2012'deki Sayfa Denetçisi, tümleşik bir tarayıcıya sahip bir web geliştirme aracıdır. Tümleşik tarayıcıdaki herhangi bir öğeyi seçtiğinizde Sayfa Denetçisi öğenin kaynağını ve CSS'sini anında vurgular. Herhangi bir MVC görünümüne göz atabilir, işlenmiş işaretleme kaynaklarını hızla bulabilir ve tarayıcı araçlarını doğrudan Visual Studio ortamında kullanabilirsiniz.

Videoyu izleyin

Bu öğretici, İnceleme Modu'nu etkinleştirmeyi ve ardından web projenizde işaretleme ve CSS'yi hızla bulup düzenlemeyi gösterir. Öğreticide bir MVC Projesi kullanılır, ancak Web Forms ve diğer ASP.NET uygulamaları için Sayfa Denetçisi'ni de kullanabilirsiniz.

Öğreticide aşağıdaki bölümler yer almaktadır:

• Önkoşullar
• Web Uygulaması Oluşturma
• Görünüme Göz Atmak için Sayfa Denetçisi Kullanma
• denetleme modunu etkinleştirme
• Biçimlendirmede Değişiklik Yapmak için Sayfa Denetçisi Kullanma
• Denetleme Modu ve HTML Penceresi
• Stiller penceresinde CSS Değişikliklerini Önizleme
• CSS Otomatik Eşitleme
• CSS Renk Seçiciyi Kullanma
• Dinamik Sayfa Öğelerini JavaScript'e Eşleme

Önkoşullar

• Web için Visual Studio 2012 veya Visual Studio Express 2012.

Not

Sayfa Denetçisi'nin en son sürümünü almak için Web Platformu Yükleyicisi'ni kullanarak .NET 2.0 için Windows Azure SDK'sını yükleyin.

Sayfa Denetçisi Microsoft Web Geliştirici Araçları ile birlikte gelir. En son sürüm 1.3'dür. Hangi sürüme sahip olduğunuzu denetlemek için Visual Studio'yu çalıştırın ve Yardımmenüsünden Microsoft Visual Studio Hakkında'yı seçin.

Web Uygulaması Oluşturma

İlk olarak, Sayfa Denetçisi'ni birlikte kullanacağınız bir web uygulaması oluşturun. Visual Studio'da Dosya>Yeni Proje'yi seçin. Sol tarafta Visual C# öğesini genişletin, Web'i seçin ve ardından ASP.NET MVC4 Web Uygulaması'nı seçin.

Tamam'a tıklayın.

Yeni ASP.NET MVC 4 Projesi iletişim kutusunda İnternet Uygulaması'nı seçin. Razor'ı varsayılan görünüm altyapısı olarak bırakın.

Uygulama Kaynak görünümünde açılır.

Artık üzerinde çalışabileceğiniz bir uygulamanız olduğuna göre Sayfa Denetçisi'ni kullanarak uygulamayı inceleyebilir ve değiştirebilirsiniz.

Görünüme Göz Atmak için Sayfa Denetçisi Kullanma

Visual Studio 2012'de projenizdeki herhangi bir görünüme sağ tıklayabilir, Sayfa Denetçisinde Görüntüle'yi seçebilirsiniz; Sayfa Denetçisi yolu belirler ve sayfayı görüntüler.

Çözüm Gezgini'daGörünümler klasörünü ve ardından Giriş klasörünü genişletin. Index.cshtml dosyasına sağ tıklayın ve Sayfa Denetçisinde Görüntüle'yi seçin.

Varsayılan olarak, Sayfa Denetçisi Visual Studio ortamının sol tarafında bir pencere olarak yerleşiktir. İsterseniz başka bir yere sabitleyebilir veya pencereyi çıkarabilirsiniz. Bkz . Nasıl yapılır: Pencereleri Düzenleme ve Yerleştirme.

Sayfa Denetçisi penceresinin üst bölmesi, tarayıcı penceresinde geçerli sayfayı gösterir. Alt bölme, sayfayı HTML işaretlemesinde ve sayfanın farklı yönlerini incelemenize olanak sağlayan bazı sekmelerle birlikte gösterir. Alt bölme, Internet Explorer'daki F12 Geliştirici Araçları'na benzer.

Bu öğreticide, hızla gezinmek ve uygulamada değişiklik yapmak için HTML ve Stiller sekmelerini kullanacaksınız.

EnableInspection Modu

Sayfa Denetçisi'ni Denetleme Moduna almak için İncele düğmesine tıklayın. İnceleme Modu'nda, fare işaretçisini işlenen sayfanın herhangi bir bölümünün üzerinde tuttuğunuzda, ilgili kaynak işaretlemesi veya kod vurgulanır.

Şimdi farenizi Sayfa Denetçisi'nin içindeki sayfanın farklı bölümleri üzerinde hareket ettirin. Yaptığınız gibi, fare işaretçisi büyük bir artı işaretine dönüşür ve altındaki öğe vurgulanır:

Siz fare işaretçisini hareket ettirdikçe, Visual Studio kaynak dosyada ilgili Razor söz dizimini vurgular. HTML öğesi başka bir kaynak dosyadan geliyorsa, Visual Studio dosyayı otomatik olarak açar.

Sayfa Denetçisi'nde , HTML sekmesi Razor söz diziminden oluşturulan HTML'yi gösterir. Fare işaretçisini hareket ettirdiğinizde HTML öğeleri vurgulanır. Stiller sekmesi, öğenin CSS kurallarını gösterir.

Biçimlendirmede Değişiklik Yapmak için Sayfa Denetçisi Kullanma

Sayfa Denetçisi, konumu belirgin olmayabilecek işaretlemeleri bulmanızı sağlar. Ardından işaretlemeyi değiştirebilir ve sonuçta elde edilen değişiklikleri görebilirsiniz.

Bunu görmek için İncele'ye tıklayın ve Sayfa Denetçisi penceresinde sayfanın en altına kaydırın.

Fare işaretçisini alt bilgi alanına getirdiğinizde, Sayfa Denetçisi _Layout.cshtml dosyasını açar ve seçtiğiniz düzen sayfasının bölümünü vurgular. Gördüğünüz gibi, alt bilgi alanı görünümün kendisini değil düzen dosyasında tanımlanır.

Şimdi telif hakkı bildirimiyle fare işaretçinizi çizginin üzerine getirin. _Layout.cshtml sayfasında ilgili satır vurgulanır.

_Layout.cshtml dosyasında satırın sonuna metin ekleyin.

<p>&kopya; @DateTime.Now.Year - ASP.NET MVC Uygulama Taşlarım!</P>

Şimdi, Sayfa Denetçisi tarayıcı penceresinde sonuçları görmek için Ctrl+Alt+Enter tuşlarına basın veya Güncelleştirme Çubuğu'na tıklayın.

Index.cshtml'de tanımlanan alt bilginin _Layout.cshtml'de olduğu ortaya çıktı ve Sayfa Denetçisi bunu sizin için buldu.

Denetleme Modu ve HTML Penceresi

Ardından, HTML penceresine ve öğeleri sizin için nasıl eşlediğinize hızlıca göz atacaksınız.

Sayfa Denetçisi'ni Denetleme Moduna almak için İncele'ye tıklayın.

Sayfanın "Logonuz burada" yazan üst kısmına tıklayın. Belirli bir öğeyi daha ayrıntılı bir şekilde incelediğinizden, fare işaretçisini hareket ettirdikçe tarayıcı penceresindeki görüntü artık değişmez.

Şimdi fare işaretçisini HTML penceresine taşıyın. Siz fare işaretçisini hareket ettirdikçe, Sayfa Denetçisi html penceresindeki öğeyi özetler ve tarayıcı penceresinde ilgili öğeyi vurgular.

Daha önce olduğu gibi, Sayfa Denetçisi sizin için _Layout.cshtml dosyasını geçici bir sekmede açar. _Layout.cshtml geçici sekmesine tıkladığınızda ilgili işaretleme sizin için üst bilgi> bölümünde vurgulanır<:

Stiller Penceresinde CSS Değişikliklerini Önizleme

Ardından, CSS'de yapılan değişiklikleri önizlemek için Sayfa Denetçisi Stilleri penceresini kullanacaksınız.

Sayfa Denetçisi'ni Denetleme Moduna almak için İncele'ye tıklayın.

Sayfa Denetçisi tarayıcı penceresinde, div.content-wrapper etiketi görünene kadar fare işaretçisini "Giriş Sayfası" bölümünün üzerine getirin.

div.content-wrapper bölümünün içine bir kez tıklayın ve fare işaretçisini Stiller penceresine getirin. Stiller penceresi bu öğenin tüm CSS kurallarını gösterir. .featured .content-wrapper sınıf seçicisini bulmak için aşağı kaydırın. Şimdi arka plan rengi özelliğinin onay kutusunu temizleyin.

Sayfa Denetçisi tarayıcı penceresinde değişikliğin anında nasıl önizlemeye alınıp alınmadığını görebilirsiniz.

Onay kutusunu yeniden seçin, ardından özellik değerine çift tıklayın ve kırmızı olarak değiştirin. Değişiklik hemen gösterilir:

Stiller penceresi, değişiklikleri stil sayfasının kendisine işlemeden önce CSS değişikliklerini test etme ve önizlemeyi kolaylaştırır.

CSS Otomatik Eşitleme

Not

Bu özellik, Sayfa Denetçisi'nin 1.3 sürümünü gerektirir.

CSS Otomatik Eşitleme özelliği, bir CSS dosyasını doğrudan düzenlemenize ve değişiklikleri sayfa denetçisi tarayıcısında hemen görmenize olanak tanır.

Sayfa Denetçisi'ni Denetleme Moduna almak için İncele'ye tıklayın.

Sayfa Denetçisi tarayıcısında , div.content-wrapper etiketi görünene kadar fare işaretçisini "Giriş Sayfası" bölümünün üzerine getirin. Bu öğeyi seçmek için bir kez tıklayın.

Stiller penceresi bu öğenin tüm CSS kurallarını gösterir. .featured .content-wrapper sınıf seçicisini bulmak için aşağı kaydırın. ".featured .content-wrapper" öğesine tıklayın. Sayfa Denetçisi, bu stili (Site.css) tanımlayan CSS dosyasını açar ve ilgili CSS stilini vurgular.

Şimdi değerini background-color "kırmızı" olarak değiştirin. Değişiklik, Sayfa Denetçisi tarayıcısında hemen görünür.

CSS Renk Seçiciyi Kullanma

Visual Studio 2012'deki CSS düzenleyicisi, renk seçmeyi ve eklemeyi kolaylaştıran bir renk seçiciye sahiptir. Renk seçici standart bir renk paleti içerir, standart renk adlarını, karma kodlarını, RGB, RGBA, HSL ve HSLA renklerini destekler ve belgede en son kullandığınız renklerin listesini tutar.

Önceki bölümde özelliğin background-color değerini değiştirdiniz. Renk seçiciyi çağırmak için ekleme noktasını özellik adının arkasına yerleştirin ve veya rgb() yazın#.

Seçmek için bir renge tıklayın veya aşağı ok tuşuna basın ve ardından renkleri çapraz geçiş yapmak için sol ve sağ ok tuşlarını kullanın. Bir rengi ziyaret ettiğinizde, karşılık gelen onaltılık değerin önizlemesi görüntülenir:

Renk çubuğunda istediğiniz tam renk yoksa, renk seçici açılır penceresini kullanabilirsiniz. Açmak için, renk çubuğunun sağ ucundaki çift köşeli çift ayraç tıklatın veya klavyede Aşağı Ok tuşuna bir veya iki kez basın.

Sağ taraftaki dikey çubuktan bir renge tıklayın. Bu, ana pencerede bu renk için bir gradyan gösterir. Enter tuşuna basarak doğrudan dikey çubuktan bir renk seçin veya daha yüksek hassasiyetle seçmek için ana penceredeki herhangi bir noktaya tıklayın.

Bilgisayar ekranınızda kullanmak istediğiniz bir renk varsa (Visual Studio kullanıcı arabiriminde olması gerekmez), sağ alt taraftaki damlalık aracını kullanarak değerini yakalayabilirsiniz.

Renk seçicinin altındaki kaydırıcıyı hareket ettirerek rengin opaklığını da değiştirebilirsiniz. Bunun yapılması, RGBA biçimi opaklığı temsil ettiğinden renk değerlerini RGBA değerlerine dönüştürür.

Bir renk seçtikten sonra Enter tuşuna basın ve ardından Site.css dosyasındaki arka plan rengi girdisini tamamlamak için noktalı virgül yazın.

Sayfa Denetçisi Güncelleştirme Çubuğu

Sayfa Denetçisi , Site.css dosyasındaki değişikliği hemen algılar ve güncelleştirme çubuğunda bir uyarı görüntüler.

Tüm dosyalarınızı kaydetmek ve Sayfa Denetçisi tarayıcısını yenilemek için Ctrl+Alt+Enter tuşlarına basın veya güncelleştirme çubuğuna tıklayın. Vurgu rengindeki değişiklik tarayıcıda görünür.

Dinamik Sayfa Öğelerini JavaScript'e Eşleme

Modern web uygulamalarında, sayfadaki öğeler genellikle JavaScript ile dinamik olarak oluşturulur. Bu, bu sayfa öğelerine karşılık gelen statik işaretleme (HTML veya Razor) olmadığı anlamına gelir.

Sürüm 1.3 ile Sayfa Denetçisi artık sayfaya dinamik olarak eklenen öğeleri ilgili JavaScript koduna geri eşleyebilir. Bu özelliği göstermek için Tek Sayfalı Uygulama (SPA) şablonunu kullanacağız.

Not

SPA şablonu için ASP.NET and Web Tools 2012.2 güncelleştirmesi gerekir.

Visual Studio'da Dosya>Yeni Proje'yi seçin. Sol tarafta Visual C# öğesini genişletin, Web'i seçin ve ardından ASP.NET MVC4 Web Uygulaması'nı seçin. Tamam'a tıklayın.

Yeni ASP.NET MVC 4 Projesi iletişim kutusunda Tek Sayfalı Uygulama'yı seçin.

Çözüm Gezgini'da Görünümler klasörünü ve ardından Giriş klasörünü genişletin. Index.cshtml dosyasına sağ tıklayın ve Sayfa Denetçisinde Görüntüle'yi seçin.

Sayfa Denetçisi tarayıcısında görüntülenen ilk şey bir oturum açma sayfasıdır. "Kaydol"a tıklayın ve bir kullanıcı adı ve parola oluşturun. Kaydolduğunuz zaman uygulama oturum açar ve bazı örnek öğeler içeren bir yapılacaklar listesi oluşturur.

Sayfa Denetçisi'ni Denetleme Moduna almak için İncele'ye tıklayın. Sayfa Denetçisi tarayıcısında yapılacaklar öğelerinden birine tıklayın. Öğenin mavi renkle vurgulanmasının yerine, öğe adının yanında "JS" ile turuncu renkle vurgulandığına dikkat edin. Bu, öğenin betik aracılığıyla dinamik olarak oluşturulduğunu gösterir.

Buna ek olarak, Çağrı Yığını sekmesinde turuncu bir alt çizgi görüntülenir. Bu, Çağrı Yığını bölmesinin öğe hakkında daha fazla bilgi olduğunu gösterir.

Çağrı Yığını sekmesine tıklayın. Çağrı Yığını bölmesi, öğesini oluşturan JavaScript çağrısının çağrı yığınını gösterir. Uygulama betiğinize yapılan çağrıları kolayca görebilmeniz için jQuery gibi dış kitaplıklara yapılan çağrılar daraltılır.

Dış kitaplıklara yapılan çağrılar da dahil olmak üzere tam yığını görmek için "Dış Kitaplıklar" etiketli düğümleri genişletebilirsiniz:

Çağrı yığınındaki bir öğeye tıklarsanız Visual Studio kod dosyasını açar ve ilgili betiği vurgular.

Ayrıca Bkz.

Visual Studio ile ASP.NET MVC 4'e giriş (ASP.net web sitesi)

Sayfa Denetçisi tanıtımı (Kanal 9 videosu)

Sayfa Denetçisi Hata İletileri (MSDN)