DOM öğelerini incelemek ve düzenlemek için Öğeler panelini kullanın.
Genel Bakış
Öğeler paneli, DOM'u 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 HTML dokümanı gibi görünen DOM ağacını kullanabilirsiniz.
Öğeler panelinde, alakalı araçları içeren aşağıdaki sekmeler de bulunur:
Stiller:
- Tüm stil sayfalarındaki bir öğeye uygulanan CSS kurallarını görüntüleyin ve hata ayıklayın.
- Amaçlandığı gibi çalışmayan geçersiz, geçersiz kılınmış, etkin olmayan veya başka CSS'leri bulun.
- Beyan ekleyerek, sınıf uygulayarak ve kutu modeliyle etkileşime geçerek öğeleri düzenleyin.
- DOM ağacında bulunan rozetlerle kapsayıcı düzenleme seçeneklerine erişin.
Hesaplanan: Chrome tarafından oluşturuldukları şekilde bir öğeye uygulanan çözüme ulaştırı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ızı ve pasif veya engelleyen işleyicileri filtrelemenizi sağlar.
DOM kesme noktaları: Nesneler panelinden eklenen DOM değişiklik kesme noktalarını listeler ve bu noktaları etkinleştirmenize, devre dışı bırakmanıza, kaldırmanıza veya göstermenize olanak tanır.
Özellikler: Nesnenin kendi özelliklerini ve devralınan özelliklerini incelemek ve sıralamak için bir DOM düğümü seçin.
Erişilebilirlik: ARIA etiketleri olan öğeleri ve özelliklerini listeler. Erişilebilirlik ağacını açıp kapatmanıza ve incelemenize olanak tanır (deneysel).
Öğeler panelini açma
Varsayılan olarak, Geliştirici Araçları'nı açtığınızda Nesneler paneli açılır. Öğeler panelini otomatik olarak açmak için sayfanın herhangi bir yerinde bir düğümü inceleyebilirsiniz.
Nesneler panelini manuel olarak açmak için:
- DevTools'u açın.
- Aşağıdaki tuşlara basarak Komut menüsünü açın:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Denetleyici+Üst Karakter+P
Elementsyazmaya başlayın, Öğeleri Göster'i seçin ve Enter tuşuna basın. DevTools, DevTools pencerenizin alt kısmındaki Çekmece'de Öğeler panelini gösterir.