เครื่องมือตรวจสอบ CSS โดยละเอียดในทุก ๆ ไซต์ด้วย CSSPeeper สำหรับ Chrome

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

คุณสามารถทำอะไรได้มากมายด้วยตัวตรวจสอบ DevTools CSS แต่มันไม่มีแผง GUI ที่ชัดเจนและนั่นเป็นสิ่งหนึ่งที่นักพัฒนาทุกคนชื่นชอบ.

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

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

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

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

CSSPeeper ยังช่วยให้คุณ เลือกสีที่เกี่ยวข้องกับเครื่องมือเลือกสีในตัว และชุดรูปแบบสี คุณสามารถส่งออกภาพจากหน้าเว็บสร้างชุดสีของคุณเองและ ใช้สิ่งเหล่านี้ในการเยาะเย้ยของคุณเอง ด้วย Photoshop หรือ Sketch.

ฉันเป็นหลัก แนะนำส่วนขยายนี้สำหรับนักออกแบบ แทนที่จะเป็นนักพัฒนาเนื่องจากมันเป็นปลั๊กอินที่เป็นมิตรกับนักออกแบบที่ดึง CSS ดิบและแปลงรหัสเป็นส่วนข้อมูลที่อ่านง่าย.

แต่ปลั๊กอินนี้ยังสามารถช่วยนักพัฒนาได้เช่นกัน! มันเป็นจริง เครื่องมือตรวจสอบไซต์ที่มีประสิทธิภาพสำหรับ CSS ทุกประเภท.

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