Bagaimana saya bisa memeriksa dan men-tweak: before dan: after pseudo-elements in-browser?

92

Saya telah membuat beberapa elemen DOM yang cukup rumit dengan: after pseudo-element, dan saya ingin dapat memeriksa dan menyesuaikannya di Chrome Inspector atau Firebug atau yang setara.

Meskipun fitur ini disebutkan dalam entri blog WebKit / Safari ini (tertanggal 2010), saya tidak dapat menemukan fitur ini sama sekali baik di Chrome atau Safari. Chrome setidaknya memiliki kotak centang untuk memeriksa: hover,: visiting, dan: status aktif, tetapi: sebelum dan: setelah tidak terlihat.

Selain itu, entri blog ini (tertanggal 2009!) Menyebutkan kemampuan ini ada di alat pengembang IE, tetapi saat ini saya menggunakan Mac OS, jadi ini tidak membantu saya. Selain itu, IE bukanlah browser yang terutama saya targetkan.

Adakah cara untuk memeriksa elemen semu ini?

EDIT: Selain salah tentang Firebug yang tidak dapat memeriksa elemen-elemen ini, saya telah menemukan Opera cukup bagus dalam Memeriksa: elemen sebelum dan: setelah di luar kotak.

css firefox google-chrome firebug google-chrome-devtools majackson
sumber
1
dengan firebug Anda dapat memeriksa gaya elemen semu tersebut.
Fabrizio Calderan
@ F. Calderan bagaimana? Apakah itu memperbarui halaman jika saya memodifikasinya?
majackson
ya, saya dapat mengubah properti untuk pseudoelement melalui firebug 1.9.1 pada Fx11 / MacOS
Fabrizio Calderan
Ah ya, saya juga melihatnya. Maaf, saya salah mengira Firefox adalah alat dev bawaan yang baru (yang belum pernah saya gunakan sebelumnya) untuk beberapa jenis Firebug yang didesain ulang dengan fitur yang lebih sedikit. Saya berdiri dikoreksi;)
majackson
Periksa jawaban ini untuk menguji pseudoelements di chrome dan firefox stackoverflow.com/a/20716179/1868660
Subodh Ghulaxe

Jawaban:

62

Di alat Dev Chrome , gaya elemen semu terlihat di panel:

Jika tidak, Anda juga dapat memasukkan baris berikut di konsol JavaScript, dan memeriksa CSSStyleDeclarationobjek yang dikembalikan :

getComputedStyle(document.querySelector('html > body'), ':before');
Rob W.
sumber
9
Saya tidak melihat ini. Elemen apa yang Anda periksa untuk melihatnya muncul di panel? Selain itu, versi Chrome apa yang Anda gunakan?
majackson
@majackson Chrome 18.0 Ubuntu 11.10. Periksa xdalam demo ini: jsfiddle.net/2M6JA
Rob W
Saya melihat pseudoclass di demo Anda, tetapi tidak di kode saya, yang membuat saya curiga saya mengalami masalah lain yang berbeda. Bagaimanapun, jelas Anda benar jadi saya akan menandai ini sebagai terselesaikan - terima kasih banyak!
majackson
Itu jahitan: gaya semu tidak dapat diperiksa dalam beberapa kasus. Lihat garpu @Rob W fiddle: jsfiddle.net/RQsY6 => pseudo-element pada tag tidak bisa diperiksa.
Fabien Quatravaux
1
@FabienQuatravaux Setidaknya di Chrome 23, saya lihat div::beforedengan content: 'x';- tangkapan layar: i.stack.imgur.com/nQ2TZ.png . EDIT: Biola kami tidak berbeda sama sekali. Apakah Anda ingin mengganti divdengan a? Namun, elemen pseudo masih dapat diperiksa: jsfiddle.net/RQsY6/1 (cukup pilih tag anchor di pohon DOM).
Rob W
33

Pada Chrome 31, elemen semu ditampilkan di panel elemen sebagai elemen turunan dari induknya seperti yang ditunjukkan pada gambar berikut:

Screenshot

Anda dapat memilihnya seperti yang Anda lakukan pada elemen normal tetapi jika Anda menghapus contentgaya maka elemen pseudo juga akan dihapus dan fokus devtools akan berubah ke induknya.

Tampaknya gaya CSS yang diwariskan tidak dapat dilihat dan Anda tidak dapat mengedit konten CSS dari panel elemen.

AMK
sumber
22

Chrome tidak akan menampilkan: sebelum dan: setelah elemen semu di pohon DOM, jika mereka melewatkan atribut "konten". Ini harus disetel, meskipun tidak disetel ke nol.

Ini tidak akan muncul:

:after {
  background-color: red;
}

Ini akan muncul di inspektur:

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

Semoga membantu.

pop
sumber
5

Setelah banyak frustrasi, aku tahu bahwa firefox tidak menunjukkan unsur-unsur semu di pohon dokumen sama sekali , tetapi jika Anda memilih yang tepat elemen yang memiliki unsur semu (s) didefinisikan, maka gaya untuk elemen semu (s ) ditampilkan di bagian aturan gaya di sisi kanan. Hal ini berlaku baik untuk firebug maupun pemeriksaan internal ("Q"), dan saya terkejut karena tidak ada yang mau menjelaskan dengan jelas sebelumnya.

Jelas, penanganan chrome / chromium atas elemen pseudo jauh lebih unggul, karena dapat dipilih (baik di pohon dokumen dan langsung di halaman) dan diperiksa seperti elemen biasa, dengan tata letak, properti, dan lainnya, terlepas dari "pemiliknya ".

Versi browser yang saya gunakan saat ini: Chromium 40.0.2214.91, Firefox 31.3.0.

aditsu berhenti karena SE itu JAHAT
sumber
1

Firefox telah memiliki fitur ini untuk sementara waktu, cukup klik kanan, "inspect element", dan lihat elemen sebelum dan sesudah di panel kanan inspektur.

NoBugs
sumber
1
Saya tidak melihat elemen pseudo :afterdan :beforedalam alat pemeriksa "asli" - mengubah elemen semu memberi saya hover, activedan focushanya. Saya bisa melihatnya di Firebug.
sameers
@sameers Apakah Anda berbicara tentang matikan di menu klik kanan? Karena: before dan: after bukanlah sesuatu yang Anda toggle di sana, mereka harus selalu muncul di css inspector.
NoBugs
0

Pilih Elemen -> pilih hover dicentang ---> Anda dapat melihat :: sebelum dan sesudah elemen Pilih Elemen -> pilih hover dicentang ---> Anda dapat melihat :: sebelum dan sesudah elemen

vasu
sumber
0

Setidaknya sejak Chrome 62 ada pengaturan di DevTools untuk 'Show user agent shadow DOM' yang menampilkan elemen semu tambahan seperti placeholder masukan , yang tidak akan muncul di pohon DOM jika tidak.

Informasi lebih lanjut: https://stackoverflow.com/a/26853319/3963594

jgangso.dll
sumber