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 belgesine benzeyen DOM ağacını kullanabilirsiniz.
Öğeler panelinde, ilgili araçları içeren aşağıdaki sekmeler de bulunur:
Stiller:
- Bir öğeye tüm stil sayfalarından uygulanan CSS kurallarını görüntüleme ve hatalarını ayıklama.
- İstendiği gibi çalışmayan geçersiz, geçersiz kılınmış, etkin olmayan veya diğer CSS'leri bulun.
- Bildirim ekleyerek, sınıf uygulayarak ve kutu modeliyle etkileşimde bulunarak öğeleri düzenleyin.
- DOM ağacında bulunan Rozetler ile kapsayıcı düzenleme seçeneklerine erişin.
Hesaplanmış: Bir öğeye Chrome tarafından oluşturulurken uygulanan çözümlenmiş özelliklerin listesini gösterir.
Düzen: Izgara ve esnek kutu yer paylaşımlarını değiştirmeye yönelik seçenekler içerir.
Etkinlik işleyicileri: Tüm etkinlik işleyicilerini ve bunların özelliklerini listeler. Etkinlik işleyicilerin kaynağını bulmanıza ve pasif veya engelleyici işleyicilere göre filtrelemenize olanak tanır.
DOM kesme noktaları: Öğeler panelinden eklenen DOM değişikliği kesme noktalarını listeler ve bunları etkinleştirmenize, devre dışı bırakmanıza, kaldırmanıza veya göstermenize olanak tanır.
Özellikler: İncelemek için bir DOM düğümü seçin ve nesnenin kendi özelliklerini ve devralınan özelliklerini sıralayın.
Erişilebilirlik: ARIA etiketlerine sahip öğeleri ve özelliklerini listeler. Erişilebilirlik ağacını açıp kapatmanıza ve incelemenize olanak tanır (deneysel).
Nesne panelini açın.
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 sayfadaki herhangi bir yerde bir düğümü inceleyebilirsiniz.
Nesneler 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+Shift+P
Elementsyazmaya başlayın, Öğeleri Göster'i seçin ve Enter tuşuna basın. Geliştirici Araçları, Geliştirici Araçları pencerenizin alt kısmındaki Çekmece'de Öğeler panelini gösterir.