วิเคราะห์รหัสของเว็บไซต์ด้วย CSS Dig Chrome Extension

มีหลายสิ่งที่คุณสามารถทำได้ Chrome DevTools ตั้งแต่การแก้ไขเว็บไซต์สดไปจนถึงศึกษาคำขอ HTTP โดยละเอียด แต่ ความสามารถในการวิเคราะห์รูปแบบ CSS ไม่ได้ถูกอบเข้าสู่คอนโซล.

กับ CSS CSS, คุณสามารถวิเคราะห์ได้ทั้งหมด CSS selectors, ความจำเพาะ, และ คุณสมบัติที่เป็นเอกลักษณ์ ของหน้าเว็บใดก็ได้จาก Chrome ส่วนขยายนี้ฟรีทั้งหมดและมอบพลังมากมายให้กับผู้พัฒนาส่วนหน้า.

เมื่อคุณตรวจสอบสไตล์ชีทคุณจะได้รับข้อมูลจำนวนมากจากแผง CSS Dig มันสามารถแสดงให้คุณ ตัวเลือกส่วนบุคคล, รวมไปถึง ที่ซ้ำกัน และ ระดับความจำเพาะที่ไม่จำเป็น.

ในการเริ่มต้นเพียง ติดตั้งปลั๊กอิน และเปิดหน้าต่างคอนโซล คุณจะพบ สองแท็บ ในหน้าต่าง CSS Dig: คุณสมบัติ และ selectors.

คุณสามารถเรียกดูผลลัพธ์ จัดโดยคุณสมบัติ (สี, เส้นขอบ, ช่องว่างภายใน) หรือ โดยตัวเลือก (คลาส, IDs) ฉันพบว่าหน้าต่างคุณสมบัติเป็นสิ่งที่มีค่าที่สุดเนื่องจากช่วยให้คุณสามารถศึกษาแบบอักษรและสีที่คุณใช้.

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

อาจเป็นกรณีการใช้งานที่พบบ่อยที่สุดสำหรับ CSS Dig คือ ล้างสีที่ซ้ำกัน จากจานสีของคุณ คุณต้องการสีเขียวที่เป็นเอกลักษณ์จำนวนเท่าใด? หรือจำนวนฟอนต์ sans-serif ที่แตกต่างกันสำหรับหนึ่งหน้า?

CSS Dig นั้นเรียบง่ายอย่างเหลือเชื่อดังนั้นอย่าคาดหวังกับฟีเจอร์มากมายเช่น DevTools ปลั๊กอินนี้จะค่อนข้างแทน มุ่งสู่การพัฒนาส่วนหน้า ไซต์ตรวจสอบสำหรับตัวเลือกซ้ำหรือคุณสมบัติที่ซ้ำกัน.

รหัสแหล่งที่มา ของปลั๊กอินมีให้บริการฟรีบน GitHub ซึ่งคุณจะพบทั้งหมด อัพเดทล่าสุด.