Số lượng lập trình viên web chuyển sang Firefox tăng đáng kể nhờ Firefox Quantum cải thiện hiệu năng ngang ngửa Chrome.
Mặc dù Firefox đã có công cụ dev khá tốt mặc định (như CSS Grid inspector), nhưng vẫn có thể mở rộng thêm tính năng thú vị qua hệ sinh thái add-on.
Dưới đây là những extension nên thử nếu bạn dùng Firefox cho phát triển web.
1. Compat Report
Compat Report giúp phát hiện vấn đề tương thích trình duyệt khi phát triển website/web app. Hiện chỉ hỗ trợ CSS.
Sau khi cài, panel "Compatibility" mới xuất hiện trong Developer Tools. Tại đây bạn xem trước hiệu suất của trang trên các trình duyệt chính.
Phiên bản không vấn đề: màu xanh. Vài vấn đề: vàng. Nhiều vấn đề: đỏ. Có thể đi sâu vào từng phiên bản để xem chính xác rule CSS gây ra vấn đề.
2. JSON Lite
Nếu thường làm việc với JSON API, bạn sẽ thấy việc xem JSON trong trình duyệt khá mệt vì trình duyệt không format mặc định, khiến đọc khó khăn.
JSON Lite giải quyết bằng cách format JSON/JSONP với syntax highlighting đúng chuẩn và tính năng collapse node – cực kỳ tiện khi kiểm tra JSON lớn.
Nếu không cần đầy đủ tính năng JSON Lite, bạn có thể bật JSON viewer tích hợp sẵn của Firefox: gõ about:config, tìm devtools.jsonview.enabled, double-click đặt thành "true", sau đó load file JSON bất kỳ để xem kết quả.
3. React Devtools
React là một trong những thư viện phổ biến nhất trong hệ sinh thái phát triển web hiện nay. Nếu bạn phát triển ứng dụng web với React, extension này sẽ rất hữu ích cho debug.
Sau khi cài, bạn có thể kiểm tra code React trên bất kỳ website nào dùng nó. Biểu tượng add-on xuất hiện trên thanh công cụ, và bạn sẽ có tab React bên cạnh các panel DevTools khác. Panel React cho phép kiểm tra cây React: hierarchy component, props, state, v.v.
Cũng có thể cài Vue.js devtools và Redux DevTools nếu bạn dùng các thư viện đó.
4. Fontanello
Fontanello cung cấp cách siêu nhanh để nhận diện font trên bất kỳ website nào. Không cần mở devtools chỉ để biết website dùng font gì. Fontanello hiển thị style typography cơ bản của text ngay trong menu chuột phải (context menu) của Firefox.
5. Wappalyzer
Bạn từng tự hỏi website yêu thích được xây dựng bằng công nghệ gì? Wappalyzer trả lời trong một cú nhấp chuột. Nó phát hiện được các CMS, nền tảng eCommerce, web server, JS framework, database, công cụ analytics và nhiều thứ khác.
Tổng kết
Nếu muốn "siêu hóa" quy trình phát triển, bạn không thể sai với bất kỳ extension nào ở trên. Đừng quên chia sẻ extension yêu thích của bạn ở phần bình luận bên dưới.
Bài viết lần đầu xuất bản tháng 10/2010 và cập nhật tháng 3/2018.