เครื่องมือ CSS และการตรวจสอบขนาดทันทีสำหรับนักออกแบบและนักพัฒนา
Frontend Inspector จากทีม Frontend Inspector เป็นส่วนขยายของ Chrome สำหรับการตรวจสอบภาพอย่างรวดเร็วและการดึงสไตล์อย่างรวดเร็ว เครื่องมือนี้แสดงคุณสมบัติ CSS และขนาดที่แน่นอนเมื่อคุณชี้ไปที่องค์ประกอบใด ๆ และรวมถึงตัวเลือกสี การอ่านแบบอักษร และการคัดลอก CSS ด้วยคลิกเดียวเพื่อการนำกลับมาใช้ใหม่อย่างรวดเร็ว อินเทอร์เฟซที่เรียบง่ายจะอยู่เฉยๆ จนกว่าจะเปิดใช้งานผ่านไอคอนแถบเครื่องมือ ทำให้เหมาะสำหรับนักพัฒนาฟรอนต์เอนด์ นักออกแบบ UI และนักวิเคราะห์ที่ต้องการข้อมูลสไตล์บนหน้าโดยไม่ต้องเปิดเครื่องมือพัฒนาขนาดเต็ม
สร้างขึ้นสำหรับการตรวจสอบภาพอย่างรวดเร็วมากกว่าการดีบักของนักพัฒนาเต็มรูปแบบ
มุ่งเป้าไปที่นักพัฒนาส่วนหน้า, นักออกแบบ UI/UX, และนักวิเคราะห์เว็บ, เครื่องมือนี้ช่วยลดขั้นตอนที่จำเป็นในการจับรายละเอียดภาพระหว่างการตรวจสอบการออกแบบ แทนที่จะทำหน้าที่เป็นเครื่องมือดีบักหน้า มันมุ่งเน้นไปที่การอ่านค่าทันทีและสัญญาณภาพที่ช่วยจับภาพตัวอักษร, การเว้นระยะ, และสีได้อย่างรวดเร็ว ลดจำนวนการเปลี่ยนบริบทที่จำเป็นเมื่อเปรียบเทียบกับการสลับหลายแผงในเครื่องมือพัฒนาพื้นเมือง.
แสดง CSS ที่คำนวณและขนาดขององค์ประกอบบนหน้า
การตรวจสอบใช้การทำงานที่ขับเคลื่อนด้วยการเลื่อนเมาส์ หลังจากที่คุณเปิดโหมดการตรวจสอบจากไอคอนแถบเครื่องมือ; การเลื่อนเมาส์ไปที่องค์ประกอบจะแสดงคุณสมบัติ CSS ที่คำนวณ เช่น font-family, font-size, และสีในแผงที่อ่านได้ การซ้อนทับภาพวาดและติดป้ายความกว้างและความสูงที่แน่นอนขององค์ประกอบ ซึ่งช่วยตรวจสอบการเว้นระยะและการวัดกล่องโดยไม่ต้องคำนวณค่าจากโมเดลกล่องในชุดพื้นเมือง.
เสนอการเลือกสีและการวิเคราะห์ตัวอักษรสำหรับการจับคู่ภาพ
ยูทิลิตี้ที่มุ่งเน้นการออกแบบรายงานค่าภาพที่แม่นยำ, รวมถึงตัวเลือกสีที่คืนค่า hex, RGB, และ HSL และเครื่องมือวิเคราะห์ตัวอักษรที่แสดงน้ำหนักตัวอักษร, ความสูงของบรรทัด, และการเว้นระยะตัวอักษร การคัดลอกสไตล์ CSS ด้วยการคลิกเดียวไปยังคลิปบอร์ดช่วยเร่งการนำกฎที่ค้นพบมาใช้ในโครงการ ซึ่งเป็นประโยชน์ต่อการส่งมอบและการทำต้นแบบอย่างรวดเร็วที่การจับคู่ที่แน่นอนมีความสำคัญ.
ยังคงมีน้ำหนักเบาและสนับสนุนไฟล์ท้องถิ่นในเบราว์เซอร์ Chromium
ส่วนขยายนี้นำเสนอ UI ที่เรียบง่ายและไม่รบกวน ที่ยังคงไม่ทำงานจนกว่าคุณจะเปิดใช้งาน หลีกเลี่ยงความยุ่งเหยิงบนหน้าจอในระหว่างการท่องเว็บปกติ มันทำงานบน Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่น ๆ เช่น Microsoft Edge, Brave, และ Opera และสนับสนุนการตรวจสอบไฟล์ท้องถิ่นหลังจากเปิดใช้งาน 'อนุญาตการเข้าถึง URL ไฟล์' ในการตั้งค่าของส่วนขยาย นักพัฒนารักษาส่วนเสริมนี้โดยมุ่งเน้นไปที่การตรวจสอบสไตล์อย่างรวดเร็วในสถานที่.
ดีที่สุดเมื่อใช้เป็นคู่มือการตรวจสอบภาพอย่างรวดเร็ว ไม่ใช่การแทนที่ DevTools แบบเต็ม
เครื่องมือนี้เหมาะสำหรับนักพัฒนา frontend และนักออกแบบ UI ที่ต้องการข้อมูลอ้างอิงบนหน้าอย่างรวดเร็วในระหว่างการตรวจสอบการออกแบบและการส่งมอบ เนื่องจากมันมุ่งเน้นไปที่การดึงค่าทางภาพอย่างรวดเร็ว สำหรับการดีบักอย่างลึกซึ้ง การติดตามเครือข่าย และการวิเคราะห์ประสิทธิภาพ ให้พึ่งพาชุดเครื่องมือพื้นฐานของเบราว์เซอร์; ให้ถือว่าเป็นเครื่องมือช่วยตรวจสอบในรอบแรกที่ลดเวลาที่ใช้ในการค้นหาคุณลักษณะทางภาพก่อนการตรวจสอบที่ลึกซึ้งกว่า.
ข้อดี
- การตรวจสอบแบบโฮเวอร์เผยให้เห็นคุณสมบัติ CSS ที่คำนวณโดยไม่ต้องเปิด DevTools
- การแสดงผลซ้อนทับแสดงขนาดความกว้างและความสูงที่แน่นอน
- ตัวเลือกสีรายงานค่า hex, RGB และ HSL
- การคัดลอกสไตล์ CSS ด้วยการคลิกเดียวไปยังคลิปบอร์ด
ข้อเสีย
- ไม่ใช่การทดแทนสำหรับ DevTools แบบเต็ม; ขาดฟีเจอร์การดีบักเชิงลึก
- ต้องเปิดใช้งาน 'อนุญาตให้เข้าถึง URL ไฟล์' เพื่อดูไฟล์ในเครื่อง
