Frontend Inspector dành cho Google Chrome

Xây dựng để kiểm tra hình ảnh nhanh chóng thay vì gỡ lỗi đầy đủ cho nhà phát triển

Hướng đến các nhà phát triển frontend, nhà thiết kế UI/UX và nhà phân tích web, công cụ này giảm thiểu các bước cần thiết để ghi lại các chi tiết hình ảnh trong quá trình xem xét thiết kế. Thay vì hoạt động như một trình gỡ lỗi trang, nó tập trung vào các thông tin đọc ngay lập tức và các tín hiệu hình ảnh giúp ghi lại kiểu chữ, khoảng cách và màu sắc một cách nhanh chóng, giảm số lần chuyển đổi ngữ cảnh cần thiết so với việc chuyển đổi giữa nhiều bảng trong các công cụ phát triển gốc.

Hiển thị CSS đã tính toán và kích thước phần tử trên trang

Kiểm tra sử dụng quy trình làm việc dựa trên việc di chuột sau khi bạn kích hoạt chế độ kiểm tra từ biểu tượng thanh công cụ; di chuột qua một phần tử sẽ hiển thị các thuộc tính CSS đã tính toán như font-family, font-size và màu sắc trong một bảng dễ đọc. Một lớp phủ hình ảnh vẽ và gán nhãn chiều rộng và chiều cao chính xác của phần tử, giúp xác minh khoảng cách và kích thước hộp mà không cần phải tính toán giá trị từ mô hình hộp trong bộ công cụ gốc.

Cung cấp công cụ chọn màu và phân tích kiểu chữ để phù hợp hình ảnh

Các tiện ích tập trung vào thiết kế báo cáo các giá trị hình ảnh chính xác, bao gồm một công cụ chọn màu trả về giá trị hex, RGB và HSL và một trình phân tích kiểu chữ liệt kê trọng số phông, chiều cao dòng và khoảng cách chữ cái. Việc sao chép kiểu CSS chỉ với một cú nhấp chuột vào clipboard giúp tăng tốc độ tái sử dụng các quy tắc đã phát hiện trong một dự án, điều này có lợi cho việc chuyển giao và quy trình tạo mẫu nhanh chóng nơi mà sự phù hợp chính xác là quan trọng.

Giữ nhẹ và hỗ trợ các tệp cục bộ trên các trình duyệt Chromium

Tiện ích mở rộng trình bày một giao diện người dùng tối giản, không gây rối mà vẫn không hoạt động cho đến khi bạn kích hoạt nó, tránh làm rối màn hình trong quá trình duyệt web bình thường. Nó chạy trên Chrome và các trình duyệt dựa trên Chromium khác như Microsoft Edge, Brave và Opera, và nó hỗ trợ kiểm tra các tệp cục bộ sau khi kích hoạt 'Cho phép truy cập vào URL tệp' trong cài đặt tiện ích mở rộng. Nhà phát triển duy trì tiện ích bổ sung với sự nhấn mạnh vào việc kiểm tra kiểu nhanh chóng, tại chỗ.

Tốt nhất được sử dụng như một công cụ kiểm tra hình ảnh nhanh, không phải là sự thay thế cho DevTools đầy đủ

Công cụ này phù hợp với các nhà phát triển frontend và nhà thiết kế UI cần dữ liệu tham khảo nhanh, trên trang trong các cuộc đánh giá thiết kế và bàn giao vì nó tập trung vào việc trích xuất nhanh các giá trị hình ảnh. Đối với việc gỡ lỗi sâu, theo dõi mạng và phân tích hiệu suất, hãy dựa vào bộ công cụ gốc của trình duyệt; hãy coi tiện ích mở rộng như một công cụ hỗ trợ kiểm tra ban đầu giúp giảm thời gian tìm kiếm các thuộc tính hình ảnh trước khi điều tra sâu hơn.