ใช้ตัวเลือกสี (eye dropper) อย่างไร?

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

ฉันพบวิธีการใช้งานต่อไปนี้:

1a. ตรวจสอบองค์ประกอบ html ด้วยสีพื้นหลัง

1b. กำหนดสีพื้นหลังขององค์ประกอบ

2. คลิกที่ตัวเลือกสี
3. เลื่อนเมาส์ของคุณไปที่องค์ประกอบใด ๆ บนหน้า (ไม่ใช่บนเครื่องมือ dev)

ดู: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

คำถามของฉัน: ชื่อเครื่องมือนี้คืออะไร? วิธีใช้งานง่ายๆ? ส่วนใหญ่ฉันไม่สนใจสี แต่ฉันต้องการตรวจสอบพิกเซลของไอคอน มีปุ่มลัดของเครื่องมือนี้หรือไม่?

ในการเปิด Eye Dropper เพียง:

1. เปิด DevTools F12
2. ไปที่แท็บองค์ประกอบ
3. ภายใต้แถบด้านข้างสไตล์คลิกที่กล่องแสดงตัวอย่างสีใดก็ได้

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

เรียกว่าเครื่องมือ eyedropper ไม่มีคีย์ลัดสำหรับมันที่ฉันรู้ วิธีเดียวที่คุณสามารถใช้ได้ในตอนนี้คือการคลิกที่กล่องตัวเลือกสีในแถบด้านข้างสไตล์จากนั้นคลิกที่หน้าตามที่คุณได้ทำไปแล้ว

ขณะนี้เครื่องมือ eyedropper ไม่ทำงานใน Chrome เวอร์ชันของฉัน (ตามที่อธิบายไว้ข้างต้น) แม้ว่าในอดีตจะใช้งานได้ ฉันได้ยินว่ากำลังอัปเดตใน Chrome เวอร์ชันล่าสุด

อย่างไรก็ตามฉันสามารถจับสีได้อย่างง่ายดายใน Firefox

1. เปิดหน้าใน Firefox
2. เมนูแฮมเบอร์เกอร์ -> นักพัฒนาเว็บ -> Eyedropper
3. เครื่องมือ Eyedropper ลากมากกว่าภาพ ... คลิก
   สีจะถูกคัดลอกไปยังคลิปบอร์ดของคุณและเครื่องมือ eyedropper จะหายไป
4. วางรหัสสี

ในกรณีที่คุณไม่สามารถใช้เครื่องมือ eyedropper ใน Chrome ได้นี่เป็นวิธีแก้ปัญหาที่ดี
ฉันยังพบว่ามันง่ายกว่าในการเข้าถึง :-)