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 sağlam bir arayüz sağlar. Bir HTML belgesine benzeyen DOM ağacını, belirli DOM düğümlerini seçmek ve bunları başka araçlarla değiştirmek için kullanabilirsiniz.
Öğeler panelinde ilgili 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ü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, sınıf uygulayarak ve Box modeliyle etkileşimde bulunarak öğeleri düzenleyin.
- DOM ağacında bulunan Rozetler ile kapsayıcı düzenleme seçeneklerine erişin.
Hesaplanan: Chrome tarafından oluşturulurken bir öğeye uygulanan çözümlenen ö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 engelleyici 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 ortaya çıkarmanıza 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 sahip olan öğeleri ve bunların özelliklerini listeler. Bir erişilebilirlik ağacını açıp kapatmanızı ve denetlemenizi sağlar (deneysel).
Nesne panelini aç
Varsayılan olarak, Geliştirici Araçları'nı açtığınızda Öğeler paneli açılır. Öğeler panelini otomatik olarak açmak için sayfanın herhangi bir yerinde düğümü de 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. Geliştirici Araçları, Geliştirici Araçları pencerenizin alt kısmındaki Çekmecede Öğeler panelini gösterir.