Cách sử dụng dụng cụ chọn màu (ống nhỏ mắt)?

Có một công cụ rất hữu ích được tích hợp trong chrome dev tool mà tôi vừa khám phá ra. Tôi thậm chí không biết tên của nó, và tôi không thể tìm thấy nó trên google. Tôi có thể nói rằng nó là một công cụ kiểm tra pixel.

Tôi tìm thấy phương pháp sau để sử dụng nó:

1a. Kiểm tra một phần tử html với màu nền.

1b. Xác định màu nền của một phần tử.

2. Bấm vào bảng chọn màu.
3. Di chuyển chuột qua bất kỳ phần tử nào trên trang (không phải trên công cụ dành cho nhà phát triển)

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

Câu hỏi của tôi: Tên công cụ này là gì? Làm thế nào để sử dụng nó một cách dễ dàng? Hầu hết thời gian tôi không quan tâm đến màu sắc, nhưng tôi muốn kiểm tra các pixel của một biểu tượng. Có phím nóng của công cụ này không?

Để mở Thuốc nhỏ mắt chỉ cần:

1. Mở DevTools F12
2. Chuyển đến tab Thành phần
3. Trong thanh bên Kiểu, nhấp vào bất kỳ hộp xem trước màu nào

Chức năng chính của nó là kiểm tra các giá trị màu pixel bằng cách nhấp vào chúng mặc dù với các tính năng mới của nó, bạn cũng có thể xem bảng màu hiện có của trang hoặc bảng thiết kế material design bằng cách nhấp vào biểu tượng hai mũi tên ở dưới cùng. Nó có thể trở nên khá tiện dụng khi thiết kế trang của bạn.

Nó chỉ được gọi là công cụ Eyeropper. Không có phím tắt nào cho nó mà tôi biết. Cách duy nhất bạn có thể sử dụng bây giờ là nhấp vào hộp chọn màu trong thanh bên kiểu và sau đó nhấp vào trang như bạn đã làm.

Hiện tại, công cụ nhỏ mắt không hoạt động trong phiên bản Chrome của tôi (như được mô tả ở trên), mặc dù trước đây nó đã hoạt động với tôi. Tôi nghe nói rằng nó đang được cập nhật trong phiên bản Chrome mới nhất.

Tuy nhiên, tôi có thể lấy màu dễ dàng trong Firefox.

1. Mở trang trong Firefox
2. Menu Hamburger -> Nhà phát triển web -> Eyedropper
3. Kéo công cụ Eyeropper qua hình ảnh ... Nhấp vào .
   Màu được sao chép vào khay nhớ tạm của bạn và công cụ kẻ mắt sẽ biến mất.
4. Dán mã màu

Trong trường hợp bạn không thể làm cho công cụ Eyeropper hoạt động trong Chrome, đây là một công việc tốt.
Tôi cũng thấy nó dễ truy cập hơn :-)