DOM öğelerini incelemek ve düzenlemek için Öğeler panelini kullanın.
Genel bakış
Öğeler paneli, DOM'yi incelemek ve değiştirmek için güçlü bir arayüz sağlar. Belirli DOM düğümlerini seçmek ve bunları diğer araçlarla değiştirmek için bir HTML dokümanına benzeyen DOM ağacını kullanabilirsiniz.
Öğeler panelinde alakalı araçları içeren aşağıdaki sekmeler de bulunur:
Stiller:
- Tüm stil sayfalarından bir öğeye uygulanan CSS kurallarını görüntüleme ve hata ayıklama.
- Amaçlandığı gibi çalışmayan geçersiz, geçersiz kılınmış, etkin olmayan veya diğer CSS'leri bulun.
- Bildirim ekleyerek, bir sınıf uygulayarak ve Box modeli ile etkileşim kurarak öğeleri düzenleyin.
- DOM ağacında bulunan Rozetleri kullanarak kapsayıcı düzenleme seçeneklerine erişebilirsiniz.
Hesaplanan: Chrome tarafından oluşturuldukları sırada bir öğeye uygulanan çözülmüş özellikleri listeler.
Düzen: Izgara ve flexbox yer paylaşımlarını değiştirme seçeneklerini içerir.
Etkinlik işleyiciler: Tüm etkinlik işleyicileri ve özelliklerini listeler. Etkinlik işleyicilerin kaynağını bulmanıza ve pasif veya engelleme işleyicileri filtrelemenize olanak tanır.
DOM ayrılma noktaları: Öğeler panelinden eklenen DOM değişiklik ayrılma noktalarını listeler ve bunları etkinleştirmenize, devre dışı bırakmanıza, kaldırmanıza veya göstermenize olanak tanır.
Özellikler: Nesnenin kendi ve devralınan özelliklerini incelemek ve sıralamak için bir DOM düğümü seçin.
Erişilebilirlik: ARIA etiketlerine ve özelliklerini içeren öğeleri listeler. Bir erişilebilirlik ağacını açıp kapatmanızı ve incelemenize olanak tanır (deneysel).
Nesne panelini açma
Varsayılan olarak, Geliştirici Araçları'nı açtığınızda Öğeler paneli açılır. Ayrıca, Öğeler panelini otomatik olarak açmak için sayfanın herhangi bir yerinde bulunan bir düğümü inceleyebilirsiniz.
Öğeler panelini manuel olarak açmak için:
- Geliştirici Araçları'nı açın.
- Aşağıdaki tuşlara basarak Komut menüsünü açın:
- macOS: Command+Üst Karakter+P
- Windows, Linux, ChromeOS: Control+Üst Karakter+P
Elementsyazmaya başlayın, Öğeleri Göster'i seçin ve Enter tuşuna basın. DevTools, Geliştirici Araçları pencerenizin alt kısmındaki Çekmece'de bulunan Öğeler panelini görüntüler.