Sayfa Denetçisi (Visual Studio)

 

Sayfa denetçisi tümleşik bir tarayıcı ile web geliştirme aracı ve tarayıcı Araçlar ' dir.  Tarayıcı doğrudan Visual Studio IDE içinde web sayfası (html, Web formları, ASP mvc veya Web sayfaları) çizer.  Tarayıcı IDE içinde olması, işlenmiş çıktı ve onun kaynak-yan görmenizi sağlar.  Sayfa Denetçisi'nın tümleşik tarayıcıda herhangi bir öğe seçmek için sayfa denetçisi incelemek özelliğini kullandığınızda, kaynak öğesi ve karşılık gelen, basamaklı stil sayfalarını (css) vurgulanır.  Bu özellik, bulmak ve aksi takdirde zor olabilir html ve css kodunda hataları düzeltmek yardımcı olabilir.  Sayfa denetçisi ayrıca doğrudan Visual Studio ortamında kullanabileceğiniz tarayıcı araçlara sahiptir.  

Gereksinimler

Gereksinimler

Daha fazla bilgi için bkz. Sayfa Denetçisi Hata İletileri.

Temel görevleri

Bunun için

Bunu yapmak

Daha fazla bilgi için bkz. .

Proje veya dosya Solution Explorer'da sağ tıklatın ve sonra seçim görünümünde sayfa denetçisi kısayol menüsünden.

Bunun için

Solution Explorer'da projeyi seçin.  Visual Studio menü tarayıcılarda aşağı açılan listeden seçin Sayfa denetçisi, proje çalışması için yeşil OK'i tıklatın.  

Öğeleri geri tam konumlarına kaynak eşleme

Araçlar sayfası denetçisinin bölmesinde Inspect.  Fare işaretçisi bir öğenin sayfa denetçisi tarayıcıda üzerinde hareket ettirin.  Kaynak dosyası ve buna karşılık gelen işaretleme vurgulanır html ve stilleri bölmeleri.  

Bir css kuralı kaynak bulma

css kuralı stilleri veya İzleme stilleri bölmeleri.  Kural kaynağı stil sayfası dosyasını vurgulanır.  

Kaynak ve sayfa denetçisi tarayıcı yenilemek için Değişiklikleri Kaydet

ctrl + alt + enter tuşlarına basın veya güncelleştirme Çubuğu'nu tıklatın.

Hata ayıklama için varsayılan tarayıcı sayfası denetçisi olun

Visual Studio menü tarayıcılarda aşağı açılan listeden seçin ile göz.  İçinde Gözat ile iletişim kutusunda, seçim Sayfa denetçisive sonra seçin Varsayılan olarak ata.  

Sayfa denetçisi hata ayıklama için birden çok tarayıcı biri olun

F5 veya ctrl + F5 tuşlarına bastığınızda, aynı anda başlatılacak olan birden çok tarayıcı biri olması için sayfa denetçisini seçebilirsiniz.  Multibrowser Destek bölümünde daha fazla bilgi için bkz: ASP.NET çekirdek ve Visual Studio 2015.  

Öğrenme kaynakları

Kullanıcı Arabirimi öğeleri

İnceleme

Inspect düğmesini kolayca öğeleri geri tam konumlarına kaynak eşleme sağlar.

Sayfa denetçisi İnceleme moduna sokmak için tıklatın Inspect sayfa denetçisi Araçlar bölmesinde düğme.  İnceleme modunda, fare işaretçisini işlenmiş sayfada herhangi bir parçası üzerinde tuttuğunuzda, karşılık gelen kaynak iþaretlemeyi ya da kod vurgulanır ve karşılık gelen kaynak dosyasını Solution Explorer içinde de vurgulanır.  Bunun tersi olarak, işaretleme kaynak seçtiğinizde, karşılık gelen çıktı sayfa denetçisi tarayıcıda vurgulanır.  Daha fazla bilgi için bkz: Kullanarak sayfa denetçisinde ASP mvc veya Kullanarak sayfa denetçisinde ASP Web Forms.  

Not

Inspect düğmesi bir geçiş anahtarı çalışır.  İnceleme modu etkinken Inspect düğmesine mavi gösterecek noktalı bir çizgiyle çevrili.  

Sayfa denetçisi kullanıcı arabiriminin alt panelinde kalan UI öğeleri, Internet Explorer'da F12 araçlarına benzer tarayıcı araçları içerir.  Internet Explorer'da F12 araçları hakkında daha fazla bilgi için bkz: Hata ayıklama html ve css için F12'ye Geliştirici Araçları kullanılarak.  

HTML

html bölmesi görünümü geçerli sayfanın bir ağaç görünümü (dom ağaç) bellek sayfası denetçisi tarayıcıda gösterdiği gibi gösterir.  Ağaç doğrudan fareyi veya klavyeyi kullanarak gezinme özniteliklerini görüntülemek ve değerleri değişiklikleri test hale getirebilirsiniz.  Genişletmek veya her ana öğenin yanındaki küçük oku tıklatarak dom ağacında bir öğenin özelliklerini daraltmak.  

İnceleme modunda sayfa sayfa denetçisi tarayıcı üzerinden fare işaretçisini hareket ettirdiğinizde seçilen öğe için biçimlendirme html bölmesi hem de kaynak işaretleme vurgulanır.

HTML  Herhangi bir özelliği veya özniteliği düzenlemek için html bölmesinde çift tıklatın.  Bir öznitelik eklemek için bir öğeyi sağ tıklatın ve seçin Özniteliği eklemek, veya öznitelikleri bölmesi.  Bu değişiklikler kalıcı değildir ve özgün kaynak dosyalarına etkilenmez.  Ancak, seçtiğiniz biçimlendirme ayrıca kaynak dosyada vurgulanmış olduğundan, kaynak bulunduğu görmek ve düzenlemek ve değişikliği kaydetmek kolay olur.  

Kaynak dosyayı düzenlerken sayfa denetçisinde güncelleştirme çubuğu görünür ve ctrl + alt + enter tuşlarına basın (veya Çubuğu'nu) ister yaptığınız değişiklikleri kaydetmek ve sayfa denetçisi tarayıcıda sayfayı yenileyin.

html bölmesinde kısayol menüsü seçenekleri

Aşağıdaki kısayol menü seçeneklerine erişmek için html bölmesinde bir öğeyi sağ tıklatın.

Menü öğesi

Ne işe yarar?

Öznitelik ekleme

Bir etiket ya da bir öğe için yeni bir öznitelik ekler.

Copy

Etiket kopyalar ve Pano'ya öznitelikleri.

InnerHTML Kopyala

Bir öğenin InnerHTML içerik (alt metin, öğeler ve öznitelikler) Pano'ya kopyalar.

OuterHTML kopyalama

OuterHTML (alt metin, öğeler ve öznitelikler) bir öðenin içeriði panoya kopyalar.

Copy

Stiller

Stilleri kuralları ve ağaç görünümünde seçtiğiniz öğenin stiller bölmesi görüntüler.  css kuralları hiyerarşisi tarafından gruplandırılmış ve devralınan ve geçersiz kılınmış öznitelikleri içerir.  Şu anda seçili öğenin stil özelliklerini tanımlayan bir alt kural olduğu sırada seçili öğeye uygulanan için ilk listenin en üstündeki kuraldır.  

css değişiklikleri sınamak için css özelliklerini değiştirebileceğiniz stilleri bölmesi ve değişiklikler hemen tarayıcıda bakın.  Özellik değerlerini düzenlemek için çift tıklatın.  Temizleyin ve devamsızlık ya da varlığı sayfanın işlenmesi nasıl etkilediğini görmek için bir özelliğin yanındaki onay kutusunu seçin.  Stiller  "Previewing css değişiklikleri stilleri penceresinde" bölümünde daha fazla bilgi için bkz: Kullanarak sayfa denetçisinde ASP mvc veya Kullanarak sayfa denetçisinde ASP Web Forms.  

Kaynak programda değişiklik yapmak için bir css kuralı tıklatın stilleri veya İzleme stilleri bölmesi.  Sayfa denetçisi kural burada tanımlanır ve sizin için tam kural seçer the.css dosyasını açar.  Kaynak düzenlediğinizde sayfa denetçisinde güncelleştirme çubuğu görünür ve ctrl + alt + enter tuşlarına basın (veya Çubuğu'nu) ister yaptığınız değişiklikleri kaydetmek ve sayfa denetçisi tarayıcıda sayfayı yenileyin.  

Stiller bölmesinde kısayol menüsü seçenekleri

Aşağıdaki kısayol menü seçeneklerine erişmek için stilleri bölmesindeki bir öğeyi sağ tıklatın.

Menü öğesi

Ne işe yarar?

Yeni Kural ekleme

Bir css kuralı ekler.

Yeni özellik ekleme

css özelliği ekler.

Öğeyi Kaldır

Seçili öğeyi kaldırır.

Copy

Seçili öğeyi kopyalar.

css kuralı Kopyala

Seçilen css kuralı kopyalar.

css özelliği Kopyala

Seçili css özelliği kopyalar.

İzleme stilleri

İzleme stilleri bölmesi aynı bilgileri gösterir stilleri bölmesi, ancak özellikleri alfabetik sırada yerine kurallarına göre gruplandırılır.  Copy  

Düzen

Düzen bölmesinde seçili öğe için kutusu modeli gösterir.

Öğe kutusunda modelini görmek için tıklatın Düzen sekmesini ve sonra Inspect düğme.  Tarayıcı öğesinde üzerine fare işaretçisini hareket ettirmek — ya da html bölmesinde bir öğe seçmek için tıklatın.  Düzen bölmesi, seçili öğenin tam boyutunu gösterir de kendi uzaklık kenar boşluğuna, doldurma ve kenarlık boyutu.  

Kullanabileceğiniz Düzen bölmesini değişiklikleri sınamak için.  Bir değişikliği önizlemek için bir piksel değeri çift tıklatın Düzen bölmesi ve değerini düzenleyin.  Değişiklikleri tarayıcıda hemen yansıtılır.  Bu değişiklikler kalıcı değildir ve özgün kaynak dosyalarına etkilenmez.  

Öznitelikler

Düzen

Kullanabileceğiniz öznitelikleri bölmesini değişiklikleri sınamak için.  Bir öznitelik değeri düzenlemek için çift tıklatın.  Kullanabileceğiniz Özniteliği eklemek ve Özniteliğini kaldırmak geçici olarak eklemek veya öznitelikleri kaldırmak için düğmeler.  Yaptığınız değişiklikler hemen altındaki sayfa denetçisi tarayıcı html bölmesinde görüntülenir.  Bu değişiklikler kalıcı değildir ve özgün kaynak dosyalarına etkilenmez.  

Dosyalar

Dosyalarını sayfa denetçisi Araçlar bölmesinde tüm geçerli sayfanın kaynak dosyaları için bağlantılar içerir.  Bir bakışta tüm ilgili dosyaları gösterir çünkü bu özellik yararlı olur.  Meyve bahçesi ya da Umbraco gibi uygulamalarla veya kısmi görünümler ve şablonlar ile çalışırken özellikle yararlıdır.  

Öznitelikler

Güncelleştirme çubuğu

Sayfa kaynağı değiştirdiğinizde, güncelleştirme çubuğu sayfa denetçisi tarayıcı üstünde görünür.  Güncelleştirme çubuğu ctrl + alt + enter tuşlarına basın veya değişiklikleri kaydetmek ve tarayıcı yenilemek için Çubuğu'nu isteyip istemediğinizi sorar.  

Ayrıca bkz.

ASP.NET çekirdek ve Visual Studio 2015