J2TEAM Security: A must-have extension for Chrome users. Install now!

Các công cụ, add-on Firefox hữu ích cho nhà phát triển web

Danh sách này liệt kê rất nhiều các công cụ, add-on và các tùy chọn có sẵn dành cho nhà phát triển web sử dụng trình duyệt Firefox (Tools for web developers).
Các công cụ, add-on Firefox hữu ích cho nhà phát triển web
Các công cụ, add-on Firefox hữu ích cho nhà phát triển web
Một trong những mục tiêu luôn được quan tâm của Firefox là làm cho cuộc sống của các nhà phát triển web trở nên dễ dàng và hiệu quả nhất có thể bằng cách cung cấp các công cụ và một trình duyệt web rất mở rộng để cho phép mọi người tạo ra những điều tuyệt vời.

Danh sách này liệt kê rất nhiều các công cụ, add-on và các tùy chọn có sẵn dành cho nhà phát triển web sử dụng trình duyệt Firefox.


Các công cụ phát triển có sẵn trong Firefox

Firefox có hẳn một phiên bản riêng dành cho các nhà phát triển (Developer Edition) với những tính năng đặc biệt được xây dựng sẵn.

https://www.mozilla.org/en-US/firefox/channel/#developer
Firefox Developer Edition

Firebug

Đến nay, không còn nghi ngờ gì nữa khi Firebug là công cụ phát triển web nổi tiếng nhất trong một trình duyệt web. Firebug vẫn là một công cụ rất quan trọng với nhiều tính năng mạnh mẽ, bao gồm một số lượng lớn các phần mở rộng (xem phía dưới).

Các phần mở rộng Firefox dành cho nhà phát triển web

Trong những năm qua, rất nhiều phần mở rộng đã được tạo ra để giúp các nhà phát triển web tận dụng Firefox tối đa. Một số được sử dụng nhiều nhất và nổi tiếng được liệt kê dưới đây, hãy bổ sung phía dưới phần bình luận nếu thấy bài viết đã bỏ lỡ bất kỳ phần mở rộng nào!

  • Accessibility Evaluation Toolbar - Công cụ này hỗ trợ các nhà phát triển web trong việc kiểm tra tài nguyên web của họ cho các tính năng tiếp cận chức năng dựa trên iCITA HTML Best Practices.
  • All in One Sidebar - Cho phép bạn mở cửa sổ khác nhau như thanh bên, và nhanh chóng chuyển đổi giữa chúng.
  • Cache Status - Dễ dàng theo dõi trạng thái và quản lý cache.
  • CacheToggle - Vô hiệu hóa (hoặc dọn sạch) bộ nhớ cache của trình duyệt với 1 click.
  • ColorZilla - Trình chọn mã màu hoặc xem mã màu một điểm bất kỳ trên trang web và một số công cụ hữu ích khác liên quan tới mã màu.
  • Console² - gần như là một Console nâng cao cho Firefox, thay thế cho JavaScript Console mặc định.
  • CSS Reloader - cho phép bạn tải lại toàn bộ CSS của một trang bất kỳ mà không cần tải lại toàn bộ trang đó.
  • DOM Inspector - một công cụ có thể được sử dụng để kiểm tra và chỉnh sửa DOM trực tiếp từ bất cứ tải liệu web hoặc ứng dụng XUL nào.
  • Firefogg - mã hóa video và audio cho Firefox. Với Firefogg, bạn có thể mã hóa hầu hết các tập tin đa phương tiện thành Ogg và WebM. Firefogg cũng cung cấp một API để tích hợp mã hóa vào quá trình upload.
  • FireFTP - một client FTP/SFTP miễn phí, an toàn và đa nền tảng cho trình duyệt Mozilla Firefox.
  • FireUnit - JavaScript Unit Testing Extension.
  • FoxGuide - hiển thị những đường nổi ngang và dọc giống như cách bạn sử dụng nó trong Photoshop để thiết kế và sắp xếp bố cục.
  • FoxyProxy Standard - một công cụ quản lý Proxy nâng cao dành cho Firefox.
  • Geolocater - cung cấp cho bạn khả năng chỉnh sửa vị trí địa lý mặc định của bạn (tọa độ trình duyệt). Bạn không cần phải biết rõ vĩ độ và kinh độ, Geolocater cung cấp cho bạn một bản đồ (Google Map) và bạn chỉ việc chọn nơi bạn muốn. Phần mở rộng này cũng có thể sử dụng để kích hoạt nút Reply cho Facebook.
  • GreaseMonkey - tùy chỉnh cách hiển thị hoặc xử lý của một trang web thông qua Javascript, bạn có thể chèn các mã JS, CSS của riêng bạn vào trong trang web bất kỳ.
  • HTML Validator - hiển thị số lỗi của một trang HTML.
  • HttpFox - một add-on phân tích HTTP cho Firefox.
  • iMacros for Firefox - tự động hóa cho Firefox, ghi và lặp lại các hành động của bạn (ví dụ như tự đăng nhập vào một trang web, tự click vào một liên kết nào đó trong trang,...).
  • Jenkins Build Monitor - builds and display the status on Firefox status bar.
  • jQuery extension - jQuery và jQuery UI được nhúng sẵn trong trình duyệt.
  • JSONovich - định dạng JSON trong trình duyệt để dễ dàng xem.
  • JSONView - xem tài liệu JSON trong trinhd duyệt.
  • JSView - cho bạn biết có những tập tin JS/CSS nào được nạp trong trang hiện tại.
  • Link Widgets - cung cấp một số nút để điều hướng trang web dễ dàng hơn.
  • Live HTTP Headers - xem các header HTTP của một trang web trong khi đang duyệt.
  • LiveReload - tự động làm mới trang web khi các tập tin thay đổi (JS/CSS/HTML).
  • MeasureIt - cung cấp cho bạn một thước ảo để đo chiều rộng, chiều cao các phần tử trong trang web bằng pixel.
  • Modify Headers - thêm, sửa và lọc các header HTTP đã gửi lên máy chủ web.
  • NoScript - bảo vệ bạn khỏi các cuộc tấn công XSS, Clickjacking bằng cách chỉ cho phép các trang web mà bạn tin tưởng thực thi JavaScript.
  • PageSpeed - một dự án mã nguồn mở được khởi động bởi Google để giúp các nhà phát triển tối ưu hóa trang web của họ.
  • Phoenix - một trình biên soạn mã nguồn trực tiếp trên trình duyệt.
  • PixelZoomer - chụp một hình ảnh của trang hiện tại và cung cấp các công cụ khác nhau để phân tích Pixel. Bạn có thể phóng to các trang web (lên đến 3200%), đo khoảng cách và chọn mã màu.
  • Poster - một công cụ giúp bạn tạo các truy vấn HTTP với các header tùy chỉnh.
  • QuickJava - cho phép bạn kích hoạt và vô hiệu hóa Java, Javascript, Cookie, Ảnh động, Flash, Silverlight, CSS hoặc Proxy nhanh chóng từ thanh công cụ.
  • Rainbow Color Tools - các công cụ màu sắc để phát triển web.
  • Regular Expressions Tester - công cụ kiểm thử biểu thức chính quy.
  • Remove Cookie(s) for Site - công cụ đơn giản để loại bỏ tất cả cookie của trang đang mở.
  • Screenshot Pimp - chụp, lấy, lưu lại, tải về hoặc sao chép bất cứ thứ gì bạn thấy trong trình duyệt web chỉ với 1 click.
  • SQLite Manager - quản lý bất cứ cơ sở dữ liệu SQLite nào trên máy tính của bạn.
  • Selenium IDE Button - một nút đơn giản để mở IDE Selenium trên thanh công cụ.
  • SeoQuake SEO extension - một phần mở rộng SEO cho Firefox chủ yếu hướng tới việc giúp chủ website xử lý các vấn đề liên quan tới tối ưu hóa bộ máy tìm kiếm, tối ưu hóa mạng xã hội.
  • ShowIP - hiển thị địa chỉ IP của trang hiện tại trên thanh trạng thái.
  • Stylish - giúp bạn dễ dàng cài thêm các giao diện mới cho Google, Facebook, Youtube và rất nhiều trang web khác. Bạn cũng có thể tự viết CSS riêng cho các trang bạn muốn.
  • Tamper Data - xem và chỉnh sửa các header HTTP/HTTPS và các tham số POST trước (hoặc sau) khi chúng được gửi lên máy chủ.
  • TAW3 - Web Accessibility Test.
  • Tilt 3D - A WebGL-based 3D visualization of a webpage.
  • Total Validator - thực hiện nhiều việc kiểm chứng trong một lần.
  • TryAgain - cố gắng nạp một trang web khi máy chủ không phản hồi.
  • User Agent Switcher - cung cấp một nút trên thanh công cụ giúp bạn nhanh chóng chuyển đổi các User Agent trên trình duyệt.
  • Wappalyzer - giúp phát hiện các công nghệ được sử dụng trên các trang web (như sử dụng mã nguồn gì, CMS gì, Framework gì, phiên bản PHP nào,...).
  • Web Developer - cung cấp rất nhiều công cụ phát triển web khác nhau.

Các phần mở rộng dành cho Firebug

Có rất nhiều phần mở rộng dành cho Firebug cho nhiều trường hợp sử dụng khác nhau, một số được liệt kê ở dưới đây:
  • Acebug - tô sáng cú pháp dành cho dòng lệnh Firebug.
  • Code Coverage v2 for Firebug 0.1 - This Firebug extension is used to report the Javascript code coverage.
  • CSS Usage - xem các quy tắc CSS đang được sử dụng trong trang web.
  • FireCookie - xem và quản lý cookie trên trình duyệt của bạn.
  • Firefinder - tìm phần tử HTML khớp với CSS Selector hoặc biểu thức XPath đã chọn.
  • FirePHP - cho phép lưu lại log vào Firebug Console bằng cách gọi một vài phương thức PHP đơn giản.
  • FireQuery - Firebug plugin để phát triển jQuery.
  • Friendly bug - làm Firebug trở nên thân thiện và dễ sử dụng.
  • Inline Code Finder for Firebug - tìm các phần tử HTML với các vấn đề bất kỳ: sự kiện inline Javascript, inline style, Javascript: links.
  • FireRainbow - tô sáng cú pháp Javascript cho Firebug.
  • NetExport - cho phép xuất tất cả các dữ liệu đa thu thập và tính toán từ bảng Net. Cấu trúc của các tập tin được tạo ra sử dụng định dạng HTTP Archive (HAR) dựa trên JSON.
  • Pixel Perfect - a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
  • YSlow - phân tích trang web để tìm ra lý do tại sao nó tải chậm.
Và rất nhiều phần mở rộng khác dành cho Firebug tại đây.
Leader at J2TEAM. Website: https://j2team.dev/

2 nhận xét

  1. Thank anh ạ. Rất hữu ích !!
  2. tkanks a lot!
Cảm ơn bạn đã đọc bài viết!

- Bạn có gợi ý hoặc bình luận xin chia sẻ bên dưới.

- Hãy viết tiếng Việt có dấu nếu có thể!