DOM nesnelerinin özelliklerini görüntüleme

Sofia Emelianova
Sofia Emelianova

DOM nesnelerinin özelliklerine göz atmak ve bu özellikleri filtrelemek için Öğeler > Özellikler bölmesini kullanın.

Özellikler bölmesini açma

Özellikler bölmesini açmak için aşağıdaki adımları uygulayın:

  1. Geliştirici Araçları'nı açın. Varsayılan olarak Öğeler paneli açılır.
  2. DOM ağacında bir düğüm seçin.
  3. Özellikler sekmesini açın. Sekmeyi göremiyorsanız Diğer'i Diğer tıklayın ve açılır menüden bu sekmeyi seçin.

Öğeler paneli, Özellikler sekmesinde açılıyor

Kendi mülklerini bulma

Özellikler bölmesi, nesnenin kendi özelliklerini ilk sıralarda ve kalın yazı tipiyle sıralayıp görüntüler.

ALT_TEXT_HERE

Devralınan bir mülkün kaynağını bulma

Özellikler bölmesi, yerleşik öğelerde erişimcileri değerlendirir ve nesnede devralınmış olarak ve normal yazı tipinde görüntüler.

Devralınan bir özelliğin kaynağını bulmak için bir nesneyi, ardından [[Prototype]], iç içe yerleştirilmiş [[Prototype]] vb. genişletin.

Boyut özelliğini prototip zincirinde alıcıya kadar izleme.

Bu örnekte, prototip zincirinde orijinal kendi (kalın) özelliğini karşılık gelen alıcıyla birlikte bularak devralınan size özelliğinin nereden geldiğini izleyebilirsiniz.

Buna ek olarak, prototipe özgü özellikler nesnelerde değil, yalnızca prototiplerde gösterilir. Bu, nesnelerin teşhis edilmesini kolaylaştırır.

Prototipe özgü özellikler.

Mülkleri filtrele

Bir özelliği hızlıca bulmak için adını veya değerini Filtre metin kutusuna yazmaya başlayın.

Filtre

Tüm tesisleri göster

Varsayılan olarak Özellikler bölmesinde null ve undefined değerlerine sahip özellikler gösterilmez.

Tüm özellikleri görmek için Tümünü göster'i işaretleyin.

Boş değerli mülkler.

Mülkleri anlama

Öğeler > Özellikler bölmesinde çeşitli özellikler gösterilir.

Basit özellikler

Basit özellikler <name>: <value> çiftleridir. Basit özellikler.

Nesneler ve diziler

Daraltılabilir (Sağ ok.) özellikler, {} nesneleri veya [] dizileridir. Daraltılabilir özellikler.

JavaScript nesnelerini inceleme hakkında daha fazla bilgi için Nesne özelliklerini inceleme bölümüne bakın.

DOM düğümlerine karşılık gelen özellikler

DOM düğümlerine karşılık gelen özellikler bağlantıdır. DOM ağacında ilgili düğümü seçmek için bir bağlantıyı tıklayın. Başlık DOM düğümüne bağlantı oluşturun.

Sahip ve devralınan mülkler

Kalın yazı tipiyle yazılan özellikler nesnenin kendisine aittir. Doğrudan nesne üzerinde tanımlanırlar.

Normal yazı tipindeki özellikler prototip zincirinden devralınır. DevTools size göstermek için yerleşik HTML öğelerindeki ilgili erişimcileri değerlendirir. Sahip ve devralınan mülkler. DevTools, fark edilmesini kolaylaştırmak için önce kendi mülklerini sıralar.

Numaralandırılabilir ve numaralandırılamayan özellikler

Numaralandırılabilir özellikler parlak renklidir. Numaralandırılamayan özellikler yoksayıldı. Numaralandırılabilir ve numaralandırılamayan özellikler. for … in döngüsü veya Object.keys() yöntemiyle numaralandırılabilir özellikler üzerinde yineleme yapabilirsiniz.

Yöntemler

Yöntemler f () ile işaretlenir. Yöntem.

İşlevler hakkında daha fazla bilgi edinmek için Konsol aracılığıyla İşlevleri inceleme bölümünü inceleyin.