Tarayıcıda sözde öğelerden önce ve: sonra nasıl inceleyip ince ayar yapabilirim?

92

Oldukça ayrıntılı bazı DOM öğelerini bir: after sözde öğesi ile oluşturdum ve bunları Chrome Inspector veya Firebug veya eşdeğerinde inceleyip ince ayar yapabilmek istiyorum.

Bu WebKit / Safari blog gönderisinde (2010 tarihli) bu özellikten bahsedilmesine rağmen, bu özelliği ne Chrome'da ne de Safari'de bulamıyorum. Chrome'un en azından incelemek için onay kutuları vardır: fareyle üzerine gelme,: ziyaret edildi ve: etkin durumlar, ancak: önce ve: sonra hiçbir yerde görünmez.

Ek olarak, bu blog yazısı (2009 tarihli!) Bu özelliğin IE geliştirme araçlarında bulunduğundan bahsediyor, ancak şu anda Mac OS kullanıyorum, bu yüzden bu bana yardımcı olmuyor. Ek olarak, IE öncelikli olarak hedeflediğim bir tarayıcı değil.

Bu sözde unsurları incelemenin herhangi bir yolu var mı?

DÜZENLEME: Firebug'ın bu unsurları inceleyememesi konusunda yanlış olmanın yanı sıra, Opera'nın Inspecting: before and: after elements out of the box'da oldukça iyi olduğunu gördüm.

— majackson
kaynak

1

kundakçı ile bu sahte elemanların tarzını inceleyebilirsiniz.

— Fabrizio Calderan

@ F.Calderan nasıl? Değiştirirsem sayfayı günceller mi?

— majackson

evet, sahte elemanların özelliklerini Fx11 / MacOS üzerinde firebug 1.9.1 ile değiştirebiliyorum

— Fabrizio Calderan

Ah evet, ben de görüyorum. Özür dilerim, Firefox'un yeni, yerleşik geliştirme araçlarını (daha önce kullanılmamıştı), açıklanamayacak kadar az özellik içeren bir tür Firebug yeniden tasarımı için karıştırıyordum. Düzeltilmiş

— durumdayım

Chrome ve firefox stackoverflow.com/a/20716179/1868660'daki

— Subodh Ghulaxe

62

In Chrome'un Dev araçları , sahte elemanın stilleri panelinde görülebilir:

Aksi takdirde, JavaScript konsoluna aşağıdaki satırı da girebilir ve döndürülen CSSStyleDeclarationnesneyi inceleyebilirsiniz :

getComputedStyle(document.querySelector('html > body'), ':before');

— Rob W
kaynak

9

Ben bunu görmüyorum Bunun panelde göründüğünü görmek için hangi öğeyi inceliyorsunuz? Ayrıca, Chrome'un hangi sürümünü kullanıyorsunuz?

— majackson

@majackson Chrome 18.0 Ubuntu 11.10. Kontrol xbu demoda: jsfiddle.net/2M6JA

— Rob W

Sahte sınıfları tanıtımınızda görüyorum, ancak kodumda görmüyorum, bu da beni başka, farklı bir sorun yaşadığımdan şüpheleniyor. Her durumda, haklı olduğunuz açık, bu yüzden bunu çözüldü olarak işaretleyeceğim - çok teşekkürler!

— majackson

Bazı durumlarda sözde stiller incelenemez. Bu @Rob W çatalına bakın fiddle: jsfiddle.net/RQsY6 => bir etiket üzerindeki sözde eleman incelenemez.

— Fabien Quatravaux

1

@FabienQuatravaux En azından Chrome 23'te, ekran görüntüsü div::beforeile görüyorum content: 'x';: i.stack.imgur.com/nQ2TZ.png . DÜZENLEME: Kemanlarımız hiç de farklı değil. Değiştirmek istediğiniz mü divile a? Yine de, sözde öğe hala incelenebilir: jsfiddle.net/RQsY6/1 (DOM ağacında bağlantı etiketini seçmeniz yeterlidir ).

— Rob W

33

Chrome'dan itibaren 31 sözde öğeler, aşağıdaki resimde gösterildiği gibi, öğeler panelinde üst öğelerinin alt öğeleri olarak gösterilir:

Ekran görüntüsü

Bunları normal bir öğe gibi seçebilirsiniz, ancak contentstili kaldırırsanız , sözde öğe de kaldırılacak ve devtools odağı ana öğeye değişecektir.

Miras CSS stilleri anlaşılmaktadır değil görüntülenebilir ve elementler panelinden değil düzenleme CSS içeriği can.

— AMK
kaynak

22

Chrome, DOM ağacındaki sözde öğelerden önce ve: sonra, "içerik" özniteliğini kaçırırlarsa göstermez. Hiçbir şeye ayarlanmasa bile ayarlanmalıdır.

Bu görünmeyecek:

:after {
  background-color: red;
}

Bu, denetçide görünecektir:

:after {
  content: "";   
  background-color: red;    
}

Umarım yardımcı olur.

— pop
kaynak

5

Sıkıntının bir sürü sonra firefox belge ağacındaki sözde elemanları göstermez anladım hiç ama seçerseniz kesin sözde eleman (lar) tanımlanmış, daha sonra sözde elemanı için stilleri (ler vardır elemanı ) sağ taraftaki stil kuralları bölümünde gösterilir. Bu hem kundakçı hem de yerleşik inceleme ("Q") için geçerlidir ve daha önce kimsenin bunu net bir şekilde açıklamaya zahmet etmediğine şaşırdım.

Açıkçası, chrome / chromium'un sözde öğeleri ele alması, seçilebildikleri (hem belge ağacında hem de doğrudan sayfada) ve tıpkı normal öğeler gibi, düzen, özellikler ve diğer her şeyle "sahiplerinden bağımsız olarak incelenebildikleri için büyük ölçüde üstündür ".

Şu anda kullandığım tarayıcı sürümleri: Chromium 40.0.2214.91, Firefox 31.3.0.

— aditsu SE EVIL olduğu için bıraktı
kaynak

1

Firefox bir süredir bu özelliğe sahipti, sadece sağ tıklayın, "öğeyi inceleyin" ve denetçinin sağ panelinde önceki ve sonraki öğeleri görün.

— NoBugs
kaynak

1

Ben görmüyorum :afterve :beforesözde elemanları geçiş bana verir - "yerli" müfettiş aracında sözde elemanları hover, activeve focussadece. Yine de onları Firebug'da görebiliyorum.

— sameers

@sameers Sağ tıklama menüsündeki geçişlerden mi bahsediyorsunuz? Çünkü: before ve: after orada değiştireceğiniz bir şey değildir, her zaman css denetçisinde görünmelidirler.

— NoBugs

0

Öğeyi seçin -> işaretli fareyi seçin -> öğelerin öncesinde ve sonrasında görebilirsiniz

— vasu
kaynak

0

En azından Chrome 62'den bu yana DevTools'ta, girdi yer tutucuları gibi ek sözde öğeleri görüntüleyen 'Kullanıcı aracısı gölge DOM'u göster' ayarı vardır. aksi takdirde DOM ağacında görünmeyecek olan .

Daha fazla bilgi: https://stackoverflow.com/a/26853319/3963594

— jgangso
kaynak