ตัวตรวจสอบบริบทการซ้อน CSS ใน Chrome ด้วย OffiDocs

DESCRIPTION

คุณเคยลองใช้คุณสมบัติ z-index เพียงเพื่อพบว่า ไม่ว่าคุณจะตั้งค่าไว้สูงแค่ไหน มันก็จะไม่ทำงานตามที่คาดหวังหรือไม่ นั่นเป็นเพราะว่าคุณสมบัติดัชนี z อาศัยแนวคิดโดยนัยที่เรียกว่า "บริบทแบบซ้อน"

หลังจากค้นหาว่ามันคืออะไรและทำงานอย่างไร (ข้อมูลที่คุณสามารถหาได้ใน MDN) คุณสามารถใช้ส่วนขยาย devtools นี้เพื่อตรวจสอบบริบทเหล่านี้และแก้ไขปัญหาดัชนี z ที่คุณอาจเผชิญได้

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

หากต้องการตรวจสอบเอกสารเชิงลึก โปรดดูที่หน้า GitHub: https://github

com/andreadev-it/stacking-contexts-inspector หากคุณต้องการรายงานปัญหาหรือขอคุณสมบัติ โปรดใช้ส่วนปัญหาในพื้นที่เก็บข้อมูล GitHub ที่กล่าวมาข้างต้น

บันทึกการเปลี่ยนแปลง: • โวลต์

1.1.13 - ย้ายไปที่รายการ v3 เพิ่มดัชนี z ลงในแผงด้านข้างของแผงบริบทแบบซ้อนเช่นกัน

• โวลต์

1.1.12 - แก้ไขข้อบกพร่องด้วยคุณสมบัติคำนำหน้าผู้ขายที่ตรวจไม่พบเมื่อตรวจสอบบริบทที่ซ้อนกัน

• โวลต์

1.1.11 - เพิ่มค่าดัชนี z ให้กับส่วน "รายละเอียดบริบท" ในแถบด้านข้าง

• โวลต์

1.1.10 - ลบคำร้องขอสิทธิ์ที่ไม่จำเป็นเพื่อให้เป็นไปตามนโยบายความปลอดภัยของ CWS

• โวลต์

1.1.9 - ดำเนินการตรวจสอบโหนด DOM บริบทภายใน iframe และ shadowDOM

ขณะนี้ส่วนขยายใช้งานได้กับไฟล์ในเครื่องด้วย (file:/// Scheme)

• โวลต์

1.1.8 - เพิ่มคำเตือนเมื่อหน้าเปลี่ยนแปลง รองรับ Shadow DOM และการตั้งค่าพื้นฐาน

• โวลต์

1.1.7 - แก้ไขสไตล์เล็กน้อย

ขณะนี้สามารถใช้งานได้บน Firefox แล้ว เนื่องจากมีการเปลี่ยนแปลงโค้ดเล็กน้อย

รหัสที่ทำความสะอาดแล้ว

• โวลต์

1.1.5 - แก้ไขข้อบกพร่องที่เกี่ยวข้องกับการเปลี่ยนโมดูล CSS (สปินเนอร์ที่ไม่มีสไตล์)

• โวลต์

1.1.4 - เพิ่มธีมสีเข้ม (ก่อนหน้านี้ไม่สามารถใช้งานได้เมื่อเปิดธีมสีเข้ม)

• โวลต์

1.1.3 - แก้ไขข้อผิดพลาดในการนำทางหน้า

• โวลต์

1.1.2 - เพิ่มการรองรับ iframe ที่ไม่มีแอตทริบิวต์ "src" (บาง iframe ที่มี "src" อาจใช้งานได้ แต่ไม่ควรคาดหวัง)

นอกจากนี้ ตัวบ่งชี้การโหลดยังถูกนำมาใช้ในแถบด้านข้าง (แผงองค์ประกอบ) ด้วยเช่นกัน และตอนนี้แถบด้านข้างก็มีปุ่ม "รีเฟรชบริบท" ของตัวเองแล้ว

• โวลต์

1.1.1 - แก้ไขข้อผิดพลาดที่บริบทคงที่ที่สร้างโดยผู้ปกครองมีจอแสดงผลหรือกริดที่ตรวจไม่พบ

• โวลต์

1.1.0 - ขณะนี้ส่วนขยายใช้งานได้บนแท็บที่เปิดอยู่แล้วเมื่อติดตั้ง

- เมนูบริบทคลิกขวาถูกแทนที่ด้วยปุ่มตามบริบท เนื่องจากทำงานไม่ถูกต้อง (อาจมีการเพิ่มอีกครั้งในอนาคต)

- ตอนนี้หน้าแผนผังบริบทจะแสดงตัวบ่งชี้การโหลดเมื่อบริบทการซ้อนใช้เวลานานในการโหลด

- ในด้านนักพัฒนา โค้ดทั้งหมดได้ถูกย้ายไปที่ preact ซึ่งเป็นขั้นตอนแรกในการทำให้เป็นโอเพ่นซอร์ส

• โวลต์

1.0.1 - การเปลี่ยนแปลงการเข้าถึงเล็กน้อยและการปรับแต่งภาพ

ข้อมูลเพิ่มเติม:

- เสนอโดย Andrea Dragotta
- คะแนนเฉลี่ย : 3.92 ดาว (ชอบ)
- นักพัฒนา อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริ

เว็บตัวตรวจสอบบริบทการซ้อน CSS extension รวมเข้ากับ OffiDocs Chromium ออนไลน์