Mới đây, chúng tôi đã phát hành một bài đăng về 12 Tiện ích mở rộng của Google Chrome dành cho Nhà phát triển & Nhà thiết kế và trong khi một số tiện ích mở rộng đó có sẵn trên Firefox , tôi sẽ không nhắc lại ở đây.
Theo cách tương tự, một số tiện ích mở rộng được liệt kê bên dưới có sẵn trên Chrome vì vậy hãy coi các ứng dụng đó là phần thưởng cho các trình duyệt tương ứng.
1. Trình xác thực HTML
HTML Validator chạy qua mã của bạn để đảm bảo mã tuân theo quy ước chuẩn HTML. Nó hiển thị số lượng lỗi mà nó nhìn thấy trên biểu tượng trên thanh công cụ.
Trình xác thực HTML Trình bổ sung Firefox
2. Octotree
Là một nhà phát triển, tôi xem qua một số trang mã trên GitHub thỉnh thoảng khi tìm kiếm để xem cách các nhà phát triển khác giải quyết một số vấn đề nhất định . Nếu bạn giống tôi thì bạn sẽ thấy Octotree hữu ích.
Octotree hiển thị mã GitHub ở định dạng cây. Bằng cách đó, bạn có thể duyệt qua các dòng mã mà không cần tải xuống tệp nguồn.
Octotree Hiển thị mã GitHub ở định dạng cây
3. HTTPS mọi nơi
HTTPS Everywhere mã hóa dữ liệu bạn trao đổi với tất cả các trang web chính ngay cả khi chúng không sử dụng HTTPS.
Vì vậy, nếu bạn được chuyển đến các trang không sử dụng https, bạn có thể chắc chắn rằng giao tiếp trực tuyến của mình được bảo mật.
4. Kiểm tra hiệu suất trang
Kiểm tra hiệu suất trang cung cấp cho bạn số liệu thống kê trên các trang web của bạn bằng cách đo tốc độ và hiệu suất tải của chúng. Bạn có thể lưu lại kết quả của biểu đồ để so sánh cho những lần kiểm tra tiếp theo.
Kiểm tra hiệu suất trang
5. Usersnap
Usersnap cho phép bạn chụp ảnh màn hình trang web và chú thích chúng bằng cách thêm hình vẽ đánh dấu và nhận xét. Nó cũng đi kèm với thước đo pixel và có thể tích hợp trực tiếp với nhiều công cụ quản lý dự án khác nhau bao gồm Slac, Trello và JIRA.
Danh sách này sẽ không đầy đủ nếu không có Usersnap vì nó hỗ trợ quy trình phản hồi hiệu quả. Tuy nhiên, đây là một dịch vụ trả phí với bản dùng thử miễn phí 14 ngày.
Usersnap
6. Vô hiệu hóa JavaScript
Disable JavaScript, như tên gợi ý, cung cấp cho bạn khả năng tắt JavaScript trên các trang web hoặc chỉ các tab cụ thể. Bạn có thể tùy chỉnh nó để có trạng thái bật/tắt JS mặc định và hành vi tắt mặc định theo miền/tab, v.v.
Vô hiệu hóa JavaScript
7. Danh sách kiểm tra dành cho nhà phát triển web
Phần mở rộng Danh sách kiểm tra dành cho nhà phát triển web cung cấp cho bạn tổng quan về mức độ khả dụng của trang web của bạn theo các phương pháp thiết kế và phát triển tốt nhất.
Nhấp vào biểu tượng sẽ thông báo cho bạn về SEO, URL thân thiện, biểu tượng yêu thích, v.v. của trang web với các dấu kiểm bên cạnh để cho biết bạn đã vượt qua.
Danh sách kiểm tra dành cho nhà phát triển web
số 8. Công cụ dành cho nhà phát triển phản ứng
Với mức độ phổ biến dường như không ngừng của React, các nhà phát triển React được sinh ra gần như mỗi ngày và nhóm React đảm nhận việc này.
React Developer Tools cung cấp cho bạn khả năng kiểm tra cây React cùng với trạng thái, đạo cụ, cấu trúc phân cấp, v.v. Để kích hoạt nó , khởi chạy Firefox devtools và chuyển sang tab React.
Ngoài ra còn có phiên bản dành cho Vue nhà phát triển dưới dạng công cụ phát triển Vue.js.
Công cụ dành cho nhà phát triển phản ứng
9. ColorZilla
ColorZilla là một công cụ tuyệt vời để các nhà phát triển và nhà thiết kế đồ họa chọn màu từ các trang web khác nhau.
Nó cũng chứa ống nhỏ giọt, trình tạo độ dốc, trình duyệt bảng màu và lịch sử màu sắc.
ColorZilla
10. Evernote Web Clipper
Evernote Web Clipper cho phép bạn chụp ảnh màn hình các trang web và tự động lưu chúng vào Evernote của bạntài khoản mà từ đó bạn có thể tạo chú thích và chia sẻ với các thành viên trong nhóm.
Evernote Web Clipper
11. Trình quản lý cookie
Cookie Manager là tiện ích mở rộng có ý thức bảo mật cho phép bạn xem, thêm, chỉnh sửa, xóa và tìm kiếm cookie trong bất kỳ miền.
Điều thú vị hơn nữa về Trình quản lý cookie là bạn có thể xuất và nhập cookie giữa các miền.
Cookie Manager
12. Live Editor cho CSS và LESS
Live Editor cho CSS và LESS cho phép bạn viết mã CSS/LESS trực tiếp vào trình duyệt của mình. Mã của bạn có hiệu lực ngay lập tức và sẽ được lưu ở cấp độ trang web trong bộ nhớ cục bộ của trình duyệt.
Trình chỉnh sửa trong trang của nó có các tính năng tự động hoàn thành, làm đẹp, nói dối, v.v. Bạn nên kiểm tra.
Trình chỉnh sửa trực tiếp cho CSS
Bạn có thích bất kỳ tiện ích mở rộng nào được liệt kê hoặc bạn có danh sách mà chúng tôi có thể sử dụng không? Phần bình luận bên dưới.