ฉันจะตรวจสอบและปรับแต่ง: before and: after pseudo-elements in-browser ได้อย่างไร?

ฉันได้สร้างองค์ประกอบ DOM ที่ค่อนข้างซับซ้อนโดยมี an: after pseudo-element และฉันต้องการตรวจสอบและปรับแต่งองค์ประกอบเหล่านี้ใน Chrome Inspector หรือ Firebug หรือเทียบเท่า

แม้จะมีการกล่าวถึงคุณลักษณะนี้ในบล็อกโพสต์ WebKit / Safari (ลงวันที่ 2010) แต่ฉันไม่พบคุณลักษณะนี้เลยใน Chrome หรือ Safari อย่างน้อย Chrome ก็มีช่องทำเครื่องหมายเพื่อตรวจสอบ: hover,: เยี่ยมและ: สถานะที่ใช้งานอยู่ แต่: before and: after จะไม่มีให้เห็น

นอกจากนี้บล็อกโพสต์นี้ (ลงวันที่ 2009!) กล่าวถึงความสามารถนี้ที่มีอยู่ในเครื่องมือ IE dev แต่ตอนนี้ฉันใช้ Mac OS ดังนั้นนี่จึงไม่ช่วยฉัน นอกจากนี้ IE ไม่ใช่เบราว์เซอร์ที่ฉันกำหนดเป้าหมายเป็นหลัก

มีวิธีใดในการตรวจสอบองค์ประกอบหลอกเหล่านี้หรือไม่?

แก้ไข: นอกเหนือจากความผิดพลาดเกี่ยวกับ Firebug ที่ไม่สามารถตรวจสอบองค์ประกอบเหล่านี้ได้ฉันพบว่า Opera ค่อนข้างดีในการตรวจสอบ: before และ: after องค์ประกอบนอกกรอบ

ในเครื่องมือ Dev ของ Chromeรูปแบบขององค์ประกอบหลอกจะปรากฏในแผงควบคุม:

มิฉะนั้นคุณสามารถป้อนบรรทัดต่อไปนี้ในคอนโซล JavaScript และตรวจสอบCSSStyleDeclarationวัตถุที่ส่งคืน:

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

• window.getComputedStyle
• document.querySelector

เนื่องจากองค์ประกอบหลอกของ Chrome 31 แสดงในแผงองค์ประกอบเป็นองค์ประกอบลูกของผู้ปกครองดังที่แสดงในภาพต่อไปนี้:

คุณสามารถเลือกได้ตามที่คุณต้องการเป็นองค์ประกอบปกติ แต่ถ้าคุณลบcontentสไตล์องค์ประกอบหลอกก็จะถูกลบออกไปด้วยและโฟกัสของเครื่องมือจะเปลี่ยนเป็นพาเรนต์

ดูเหมือนว่าสไตล์ CSS ที่สืบทอดมาจะไม่สามารถดูได้และคุณไม่สามารถแก้ไขเนื้อหา CSS จากแผงองค์ประกอบได้

Chrome จะไม่แสดง: ก่อนและ: หลังองค์ประกอบหลอกในโครงสร้าง DOM หากพลาดแอตทริบิวต์ "เนื้อหา" ควรตั้งค่าแม้ว่าจะตั้งค่าเป็นอะไรก็ตาม

สิ่งนี้จะไม่ปรากฏขึ้น:

:after {
  background-color: red;
}

สิ่งนี้จะปรากฏในตัวตรวจสอบ:

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

หวังว่าจะช่วยได้

หลังจากหงุดหงิดมากฉันพบว่า firefox ไม่แสดงองค์ประกอบหลอกในโครงสร้างเอกสารเลยแต่ถ้าคุณเลือกองค์ประกอบที่แน่นอนซึ่งมีการกำหนดองค์ประกอบหลอกแล้วสไตล์สำหรับองค์ประกอบหลอก (s) ) จะแสดงในส่วนกฎสไตล์ทางด้านขวา นี่เป็นเรื่องจริงสำหรับทั้ง firebug และการตรวจสอบในตัว ("Q") และฉันรู้สึกตกใจที่ไม่มีใครใส่ใจที่จะอธิบายเรื่องนี้อย่างชัดเจนมาก่อน

เห็นได้ชัดว่าการจัดการองค์ประกอบหลอกของโครเมี่ยม / โครเมียมนั้นเหนือกว่าอย่างมากเนื่องจากสามารถเลือกได้ (ทั้งในโครงสร้างเอกสารและในหน้าโดยตรง) และตรวจสอบเช่นเดียวกับองค์ประกอบทั่วไปโดยมีเค้าโครงคุณสมบัติและทุกอย่างอื่น ๆ โดยไม่ขึ้นกับ "เจ้าของ ".

เวอร์ชันเบราว์เซอร์ที่ฉันใช้อยู่ในปัจจุบัน: Chromium 40.0.2214.91, Firefox 31.3.0

Firefox มีคุณลักษณะนี้มาระยะหนึ่งแล้วเพียงคลิกขวา "ตรวจสอบองค์ประกอบ" และดูองค์ประกอบก่อนและหลังในแผงด้านขวาของตัวตรวจสอบ

เลือกองค์ประกอบ -> เลือกโฮเวอร์ที่เลือก ---> คุณสามารถดู :: ก่อนและหลังองค์ประกอบ

อย่างน้อยเนื่องจาก Chrome 62 มีการตั้งค่าใน DevTools เป็น 'แสดงเงาตัวแทนผู้ใช้ DOM' ซึ่งแสดงองค์ประกอบหลอกเพิ่มเติมเช่นตัวยึดตำแหน่งอินพุตซึ่งจะไม่ปรากฏในโครงสร้าง DOM เป็นอย่างอื่น

ข้อมูลเพิ่มเติม: https://stackoverflow.com/a/26853319/3963594