Ngày càng nhiều nhà phát triển web đã chuyển sang Firefox trong những tháng gần đây, được thúc đẩy bởi việc phát hành Firefox Quantum sau khi nó cải thiện hiệu suất ngang bằng với Google Chrome.
Mặc dù Firefox cung cấp công cụ phù hợp cho các nhà phát triển theo mặc định với các tính năng sáng tạo như trình kiểm tra CSS Grid của nó, nhưng vẫn có thể thêm nhiều tính năng thú vị hơn vào trình duyệt thông qua hệ sinh thái tiện ích của nó.
Với ý nghĩ đó, đây là một số tiện ích mở rộng bạn nên thử nếu sử dụng Firefox để phát triển web.
1. Báo cáo tổng hợp
Compat Report giúp bạn xác định các vấn đề tiềm ẩn về khả năng tương thích của trình duyệt khi phát triển các trang web hoặc ứng dụng web. Điều này chỉ hoạt động cho CSS tại thời điểm này.
Sau khi bạn cài đặt tiện ích, bảng “Khả năng tương thích” mới sẽ được thêm vào các công cụ dành cho nhà phát triển. Từ đó, bạn sẽ có thể xem bất kỳ trang web cụ thể nào được mong đợi sẽ hoạt động như thế nào trên mỗi trình duyệt chính
Các phiên bản trình duyệt không có vấn đề tương thích có màu xanh lá cây, phiên bản có một số vấn đề có màu vàng và phiên bản có một số vấn đề có màu đỏ. Bạn có thể tìm hiểu kỹ các phiên bản trình duyệt cụ thể để xem các quy tắc CSS chính xác gây ra sự cố.
2. JSON Lite
Nếu bạn làm việc với các API JSON thường xuyên, bạn có thể thấy tẻ nhạt khi xem dữ liệu JSON trong trình duyệt. Điều này là do trình duyệt không định dạng đúng theo mặc định khiến nó khó đọc.
JSON Lite khắc phục sự cố đó bằng cách định dạng các phản hồi JSON và JSONP với đánh dấu cú pháp thích hợp và tính năng thu gọn nút rất hữu ích khi kiểm tra dữ liệu JSON khổng lồ.
Nếu bạn không cần tất cả các tính năng mà JSON Lite cung cấp, bạn chỉ có thể bật trình xem JSON tích hợp trong Firefox bằng cách nhập “about:config” vào thanh địa chỉ, sau đó tìm kiếm devtools.jsonview.enabled . Đặt nó thành “true” bằng cách nhấp đúp vào tùy chọn, sau đó tải bất kỳ tệp JSON nào vào trình duyệt của bạn để xem kết quả.
3. React Devtools
React là một trong những thư viện phổ biến nhất hiện nay trong hệ sinh thái phát triển Web. Nếu bạn phát triển các ứng dụng web bằng React, bạn sẽ thấy rất nhiều giá trị trong việc sử dụng tiện ích mở rộng trình duyệt của nó để gỡ lỗi mã của bạn.
Sau khi nó được cài đặt, bạn sẽ có thể kiểm tra mã React trên bất kỳ trang web nào sử dụng nó. Biểu tượng tiện ích bổ sung sẽ xuất hiện trong thanh công cụ của trình duyệt và bạn cũng sẽ nhận được tab React cùng với các bảng DevTools khác. Bảng điều khiển React sẽ cho phép kiểm tra cây React, bao gồm hệ thống phân cấp thành phần, đạo cụ, trạng thái và hơn thế nữa.
Bạn cũng có thể cài đặt Vue.js devtools và Redux DevTools nếu bạn phát triển bằng một trong hai thư viện.
4. Fontanello
Fontanello cung cấp một cách thực sự nhanh chóng để xác định phông chữ trên bất kỳ trang web nào. Với tiện ích bổ sung này, bạn không cần phải mở các công cụ phát triển chỉ để tìm xem trang web sử dụng phông chữ nào. Fontanello hiển thị các kiểu chữ cơ bản của văn bản trong menu ngữ cảnh khi nhấp chuột phải trong Firefox.
5. Chất tẩy rửa
Bạn đã bao giờ tự hỏi những công nghệ nào được sử dụng để xây dựng các trang web yêu thích của bạn? Wappalyzer có thể cung cấp cho bạn thông tin này bằng một cú nhấp chuột. Nó có thể phát hiện các hệ thống quản lý nội dung khác nhau, nền tảng Thương mại điện tử, máy chủ web, khung JavaScript, phần mềm cơ sở dữ liệu, công cụ phân tích và nhiều hơn nữa.
Kết thúc
Nếu bạn đang tìm cách tăng cường quy trình phát triển của mình, bạn không thể làm sai bất kỳ tiện ích mở rộng nào được đề cập ở trên. Đừng quên chia sẻ mục yêu thích của bạn trong phần bình luận bên dưới.
Bài báo này được xuất bản lần đầu tiên vào tháng 10 năm 2010 và được cập nhật vào tháng 3 năm 2018.