10 công cụ hữu ích của Firefox dành cho lập trình viên mà bạn nên biết

Firefox được mệnh danh là “trình duyệt của lập trình viên”, vì nó có nhiều công cụ tuyệt vời giúp công việc của các lập trình viên dễ dàng hơn. Bạn có thể tìm thấy rất nhiều công cụ tại trang web Firefox Developer Tools và cũng có thể dùng thử công cụ Developer Edition Browser với nhiều tính năng và công cụ đang được kiểm thử.

Trong khuôn khổ bài viết hôm nay, chúng tôi xin liệt kê 10 công cụ hữu ích mà có thể bạn sẽ thích:

1. Thước ngang và thước dọc

Firefox có một công cụ thước kẻ (ruler) hiển thị cả thước ngang và thước dọc bằng các pixel unit trên trang web. Công cụ này rất hữu ích trong việc sắp đặt các phần tử (element) có trên trang web của bạn.

Để sử dụng các ruler, bạn hãy làm theo bước sau: hãy nhấp chuột vào biểu tượng ☰ và sau đó chọn Developer > Developer Toolbar (hoặc sử dụng phím tắt: Shift + F2). Ngay khi thanh công cụ xuất hiện ở cuối trang, thì hãy gõ rulers và nhấn Enter.

Để công cụ này xuất hiện trên cửa sổ thanh công cụ dành cho các lập trình viên, thì hãy vào “Toolbox Options”. Ở mục “Available Toolbox Buttons”, hãy chọn ‘Toggle rulers for the page”.

2. Sử dụng CSS selectors để chụp màn hình

Mặc dù thanh công cụ của Firefox cho phép bạn chụp toàn màn hình hay những phần riêng biệt, nhưng theo ý kiến của chúng tôi thì phương pháp CSS selector sẽ hữu ích hơn khi chụp màn hình của các phần tử riêng lẻ cũng như các phần tử mà chúng ta có thể nhìn thấy khi rê chuột (giống như các thanh menu).

Để chụp màn hình, chúng ta hãy nhấp chuột vào biểu tượng ☰ và chọn Developer > Developer Toolbar (hoặc sử dụng phím tắt Shift + F2). Ngay khi thanh công cụ xuất hiện ở cuối trang, thì bạn hãy nhập screenshot –selector any_unique_css_selector và nhấn Enter.

Để công cụ này xuất hiện trên cửa sổ thanh công cụ dành cho các lập trình viên, thì hãy vào “Toolbox Options” và ở mục “Available Toolbox Buttons”, thì hãy chọn “Take a fullpage screenshot”.

3. Chọn màu sắc từ các trang web

Firefox có một công cụ chọn màu sắc gắn liền có tên là “Eyedropper”. Để sử dụng công cụ “Eyedropper”, chúng ta hãy nhấp chuột vào ☰ > Developer > Eyedropper.

Để công cụ này xuất hiện trên cửa sổ thanh công cụ dành cho các lập trình viên, thì hãy nhấp vào “Toolbox Options” và ở mục “Available Toolbox Buttons”, hãy chọn “Grab a color from the page”.

4. Hiển thị layout của trang dưới dạng 3D

Việc hiển thị các trang web dưới dạng 3D sẽ giúp chúng ta có thể tránh khỏi các vấn đề liên quan đến layout. Bạn sẽ có thể xem các phần tử phân lớp khác nhau rõ ràng hơn khi hiển thị dưới dạng 3D. Để hiển thị trang web dưới dạng 3D, thì hãy nhấp chuột vào nút công cụ “3D View”.

Để công cụ này xuất hiện trên cửa sổ thanh công cụ dành cho các lập trình viên, thì hãy nhấp vào “Toolbox Options” và ở mục “Available Toolbox Buttons”, hãy chọn “3D View”.

5. Hiển thị browser type (kiểu trình duyệt)

Browser Styles bao gồm hai loại: style mặc định mà một trình duyệt ấn định cho mọi phần tử, và các style đặc trưng trình duyệt. Với việc xem các browser style bạn sẽ có thể phát hiện bất kỳ các vấn đề nào có trong stylesheet và cũng có thể biết được các style đặc trưng của trình duyệt hiện có.

Để sử dụng “Browser styles”, hãy nhấp chuột vào biểu tượng ☰ và chọn Developer > Inspector. Sau đó nhấp vào “Computed” ở mục bên phải và chọn “Browser styles”.

Bạn cũng có thể mở thẻ “Inspector” bằng phím tắt Ctrl + Shift + C và sau đó chọn “Brower styles”.

6. Vô hiệu hóa JavaScript cho trang bạn đang làm việc

Để vô hiệu hóa JavaScript cho session hiện tại thì hãy nhấp chuột vào “Toolbox Options” và trong mục “Advanced settings”, hãy chọn “Disable JavaScript”.

7. Ẩn CSS style

Để loại bỏ bất kỳ CSS style nào (inline, internal hay external) có trên trang web, thì hãy nhấp chuột vào biểu tượng “con mắt” của các stylesheet đã được liệt kê trong thẻ “Style Editor”. Hãy nhấp vào nó một lần nữa để trở lại trạng thái ban đầu.

Để sử dụng “Style Editor”, hãy nhấp vào vào biểu tượng ☰ và chọn Developer > Style Editor hoặc sử dụng phím tắt Shifft + F7.

8. Xem trước HTML content type responses

Các công cụ dành cho lập trình viên của Firefox có một lựa chọn xem trước HTML content type responses. Tính năng này giúp lập trình viên xem trước bất kỳ 302 redirects (được xem là chuyển hướng tạm thời trang web) và kiểm tra liệu có bất kỳ thông tin nhạy cảm nào đã được đáp lại hay không.

Để sử dụng “Preview”, hãy nhấp chuột vào biểu tượng ☰ và chọn Developer > Network (hoặc sử dụng phím tắt Ctrl + Shift + Q. Sau đó mở trang web mà bạn cần hoặc reload lại trang hiện tại, hãy nhấp vào desired request (yêu cầu mong muốn) từ danh sách yêu cầu và nhấp vào thẻ Preview ở mục bên phải.

9. Xem trước trang web ở bất kỳ kích thước màn hình nào

Để kiểm tra độ đáp ứng của một trang web, bạn hãy sử dụng “Responsive Design View”: nhấp chuột vào biểu tượng ☰ và chọn Developer > Responsive Design View hoặc sử dụng phím tắt Ctrl + Shift + M.

Để “Responsive Design Mode” hiển thị trên thanh công cụ, thì hãy nhấp chuột vào “Toolbox Options” và ở mục “Available Toolbox Buttons”, sau đó chọn “Responsive Design Mode”.

10. Chạy JavaScript trên các trang

Để chạy JavaScript trên các trang, bạn chỉ cần dùng công cụ “Scratchpad” của Firefox. Để sử dụng “Scratchpad”, bạn hãy nhấp vào  biểu tượng ☰ và chọn Developer> Scratchpad hoặc sử dụng phím tắt Shift + F4.

Để  “Scratchpad” xuất hiện trên thanh công cụ, thì bạn hãy nhấp vào “Toolbox Options” và ở mục “Available Toolbox Buttons”, sau đó chọn “Scratchpad”.

Nguồn bài viết : http://www.hongkiat.com/