Kiểm tra Biến Chưa Xác Định CSS
CSS Undefined Variable Checker là một tiện ích mở rộng Devtools cho Google Chrome giúp phát hiện việc sử dụng biến CSS không xác định. Nếu bạn viết CSS bằng cách sử dụng thuộc tính/biến tùy chỉnh, công cụ này rất hoàn hảo cho bạn. Nó thêm một tab vào Chrome Developer Tools, cho phép bạn kiểm tra trang hiện tại để tìm các biến CSS không xác định được sử dụng trong các biểu thức "var()".
Tiện ích mở rộng này phân tích cả các bảng kiểu và thuộc tính kiểu nội tuyến, hiển thị kết quả trong một bảng dễ sử dụng với các liên kết đến các phần tử gây lỗi trong tab Elements của Developer Tools. Để sử dụng tiện ích mở rộng, chỉ cần mở một trang web trong Google Chrome, mở Developer Tools và điều hướng đến tab "CSS Undefined Variable Checker". Bấm vào nút "Kiểm tra biến không xác định" sẽ bắt đầu phân tích và điền dữ liệu vào bảng với bất kỳ biến CSS không xác định nào được tìm thấy.
Bảng kết quả cung cấp tên của biến không xác định, bảng kiểu hoặc thuộc tính kiểu nội tuyến nơi nó được tìm thấy và phần tử trên trang mà nó được sử dụng. Bấm vào các liên kết trong bảng sẽ làm nổi bật phần tử gây vấn đề trong tab Elements của Developer Tools, giúp dễ dàng theo dõi biến không xác định.
Vui lòng lưu ý rằng tiện ích mở rộng này phụ thuộc vào các API để truy cập thông tin bảng kiểu, các API này bị ràng buộc bởi Cross-Origin Resource Sharing. Các bảng kiểu từ các nguồn gốc khác nhau mà không có các tiêu đề truy cập cần thiết sẽ không được phân tích. Tuy nhiên, điều này không ảnh hưởng đến khả năng của tiện ích mở rộng để phân tích các kiểu có thể truy cập thông qua API khác.
Đối với những người quan tâm, logic phân tích đằng sau tiện ích mở rộng này cũng có sẵn dưới dạng gói npm có tên là
