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

tarafından Tim Ammann

Visual Studio 2012'deki Sayfa Denetçisi, tümleşik 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'yi anında vurgular. Herhangi bir MVC görünümüne göz atabilir, işlenmiş işaretleme kaynaklarını hızla bulabilir ve doğrudan Visual Studio ortamında tarayıcı araçlarını kullanabilirsiniz.

Videoyu izleyin

Bu öğretici, İnceleme Modu'nu etkinleştirmeyi ve ardından işaretleme ve CSS'yi web projenizde hızlı bir şekilde 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
• İşaretlemeyi Değiştirmek için Sayfa Denetçisini Kullanma
• Denetleme Modu ve HTML Penceresi
• Stiller penceresinde CSS Değişikliklerini Önizleme
• CSS Otomatik Eşitleme
• CSS Renk Seçici'yi 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ım menü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 ve ardından MVC4 Web Uygulaması'nı ASP.NET 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 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.

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

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. Denetleme 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çinde 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 ettirdikçe HTML öğeleri vurgulanır. Stiller sekmesi, öğenin CSS kurallarını gösterir.

İşaretlemeyi Değiştirmek için Sayfa Denetçisini Kullanma

Sayfa Denetçisi, konumu belirgin olmayabilecek işaretlemeleri bulmanıza olanak tanır. 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 taşıdığınızda, 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 kendisinde değil düzen dosyasında tanımlanır.

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

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

<p>© @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ğinden hızlı bir şekilde 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 bölümüne tıklayın. Belirli bir öğeyi daha ayrıntılı olarak 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 penceresi içindeki öğeyi ana hatlarıyla özetler ve tarayıcı penceresinde ilgili öğeyi vurgular.

Daha önce olduğu gibi, Sayfa Denetçisi geçici bir sekmede sizin için _Layout.cshtml dosyasını 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 taşıyın. Stiller penceresinde bu öğenin tüm CSS kuralları gösterilir. .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ıp 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 edip ö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 penceresinde bu öğenin tüm CSS kuralları gösterilir. .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 tanımlayan CSS dosyasını açar (Site.css) 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çici'yi 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ı, 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 sol ve sağ ok tuşlarını kullanarak renkler arasında geçiş yapın. Bir rengi ziyaret ettiğinizde, karşılık gelen onaltılık değer ön izlemesi yapılır:

Renk çubuğunda tam olarak istediğiniz renk yoksa, renk seçici açılır penceresini kullanabilirsiniz. Açmak için, renk çubuğunun sağ ucundaki çift köşeli çift köşeli çift ayraç tıklayı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 fazla 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. Bunu yaptığınızda, RGBA biçimi opaklığı temsil ettiğinden renk değerleri RGBA değerlerine dönüşü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 bir 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 ve Web Araçları 2012.2 güncelleştirmesi gerekir.

Visual Studio'da Dosya Yeni Proje'yi seçin>. Sol tarafta Visual C# öğesini genişletin, Web'i ve ardından MVC4 Web Uygulaması'nı ASP.NET 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 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" seçeneğine 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 öğesi 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. jQuery gibi dış kitaplıklara yapılan çağrılar daraltılır, böylece uygulama betiğinize yapılan çağrıları kolayca görebilirsiniz.

Dış kitaplıklara yapılan çağrılar da dahil olmak üzere tüm 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 ile tanışın (Kanal 9 videosu)

Sayfa Denetçisi Hata İletileri (MSDN)