10 công cụ hữu ích dành cho nhà phát triển trên Firefox

Firefox đang là "trình duyệt của nhà phát triển" với nhiều công cụ tuyệt vời để giúp bạn làm việc dễ dàng hơn. Bạn có thể tìm thấy bộ sưu tập công cụ trên trang Firefox Developer Tools và cũng có thể thử Firefox Developer Edition (phiên bản dành riêng cho nhà phát triển) trong đó có nhiều tính năng và các công cụ đang được thử nghiệm.

Trong bài viết này, tôi đã liệt kê ra 10 công cụ tiện dụng mà bạn có thể thích từ bộ sưu tập các công cụ cho nhà phát triển.

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

Firefox có một công cụ thước đo hiển thị cả chiều ngang và dọc với đơn vị pixel trên trang. Công cụ này hữu ích cho việc sắp xếp các phần tử của bạn trên trang.

Firefox Rules

Để truy cập vào thước đo thông qua trình đơn, hãy vào: > Developer> Developer Toolbar (phím tắt: Shift + F2). Khi thanh công cụ xuất hiện ở dưới cùng của trang, gõ rules và nhấn Enter.

Để làm nó xuất hiện trên cửa sổ thanh công cụ nhà phát triển, vào "Toolbox Options", dưới phần "Available Toolbox Buttons", đánh dấu vào hộp kiểm "Toggle rulers for the page".

2. Chụp ảnh màn hình bằng cách sử dụng CSS selector

Mặc dù các thanh công cụ của Firefox cho phép bạn chụp ảnh màn hình của trang đầy đủ hoặc một phần nhìn thấy được, theo tôi phương pháp sử dụng CSS selector hữu ích hơn cho việc chụp ảnh chụp màn hình của các phần tử riêng lẻ cũng như cho các phần tử chỉ nhìn thấy khi di chuột (mouse-hover) như menu.

Take screenshot using CSS selector

Để chụp ảnh màn hình thông qua trình đơn, hãy vào: > Developer> Developer Toolbar (phím tắt: Shift + F2). Khi thanh công cụ xuất hiện ở dưới cùng của trang, gõ screenshot --selector any_unique_css_selector và nhấn Enter.

Để làm nó xuất hiện trên cửa sổ thanh công cụ nhà phát triển, vào "Toolbox Options", dưới phần "Available Toolbox Buttons", đánh dấu vào hộp kiểm "Take a fullpage screenshot".

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

Firefox có sẵn một công cụ chọn màu có tên là "Eyedropper". Để truy cập Eyedropper từ trình đơn, vào > DeveloperEyedropper.

Firefox Color Picker

Để làm nó xuất hiện trên cửa sổ thanh công cụ nhà phát triển, vào "Toolbox Options", dưới phần "Available Toolbox Buttons", đánh dấu vào hộp kiểm "Grab a color from the page".

4. Xem bố cục trang ở dạng 3D

Xem các trang web trong không gian 3D giúp sửa các vấn đề về bố cục. Bạn có thể thấy các lớp phần tử khác nhau rõ ràng hơn trong chế độ xem 3D. Để xem trang web trong không gian 3D, nhấp vào nút công cụ "3D View".

Firefox 3D View

Để làm nó xuất hiện trên cửa sổ thanh công cụ nhà phát triển, vào "Toolbox Options", dưới phần "Available Toolbox Buttons", đánh dấu vào hộp kiểm "3D View".

5. Xem style trình duyệt

Style trình duyệt có hai loại: style mặc định trình duyệt gán cho mỗi phần tử và style trình duyệt cụ thể (với tiền tố trình duyệt). Bằng cách xem style trình duyệt, bạn sẽ có thể chẩn đoán bất kỳ vấn đề ghi đè style nào trong CSS của bạn và cũng để nhận biết bất cứ style trình duyệt cụ thể nào đang tồn tại.

Firefox Browser Style

Để truy cập "Browser styles" thông qua trình đơn, vào  > Developer > Inspector. Sau đó nhấn vào thẻ "Computed" trong phần bên phải và đánh dấu hộp kiểm "Browser styles".

Bạn cũng có thể mở thẻ "Inspector" thông qua phím tắt Ctrl + Shift + C và sau đó truy cập "Browser styles".

6. Vô hiệu hóa JavaScript cho phiên làm việc hiện tại

Để tương thích trình đọc màn hình, bạn nên luôn luôn code bất kỳ trang web nào theo cách mà các chức năng của nó không bị ảnh hưởng trong môi trường JavaScript bị vô hiệu. Để kiểm tra cho một môi trường như vậy, bạn có thể vô hiệu hóa JavaScript cho phiên bạn đang làm việc.

Firefox disabled JavaScript

Để vô hiệu JavaScript cho phiên hiện tại, nhấn "Toolbox Options" và dưới phần "Advanced settings" đánh dấu vào hộp kiểm "Disable JavaScript *".

7. Ẩn style CSS từ trang

Cũng giống như JavaScript, do lo ngại khả năng tiếp cận thì tốt nhất là thiết kế các trang web trong một cách mà các trang nên vẫn có thể đọc được ngay cả khi không có CSS. Để xem cách trang đó trông như nào khi không có bất kỳ CSS nào, bạn có thể vô hiệu hóa chúng trong các công cụ phát triển.

Firefox disable stylesheet

Để loại bỏ bất kỳ style CSS áp dụng trên một trang web, chỉ cần nhấp vào biểu tượng con mắt của các stylesheet được liệt kê trong thẻ "Style Editor". Nhấn vào nó một lần nữa để trở lại giao diện ban đầu.

Để truy cập vào "Style Editor" thông qua trình đơn, vào > Developer> Style Editor (phím tắt: Shift + F7).

8. Xem trước nội dung HTML phản hồi tới một yêu cầu

Công cụ phát triển Firefox có một tùy chọn để xem trước các phản hồi có loại nội dung là HTML. Điều này giúp các nhà phát triển xem trước bất kỳ chuyển hướng nào (mã 302) và kiểm tra xem có bất kỳ thông tin nhạy cảm đã được trả lại hoặc không có trong phản hồi.

Firefox Preview

Để truy cập vào "Xem trước" thông qua trình đơn, vào > Developer> Network (phím tắt: Ctrl + Shift + Q). Sau đó, mở trang web mà bạn chọn hoặc tải lại trang hiện tại, nhấp vào truy vấn bạn muốn (với phản hồi HTML) từ danh sách các truy vấn và nhấp vào thẻ "Preview" ở phần bên phải.

9. Xem trước trang web trong các kích cỡ màn hình khác nhau

Để kiểm tra tính phản hồi của một trang web, sử dụng "Responsive Design View" bằng cách truy cập vào > Developer> Responsive Design View hoặc với phím tắt: Ctrl + Shift + M.

Firefox responsive

Để làm nút công cụ "Responsive Design Mode" xuất hiện, nhấp vào "Toolbox Options" và dưới phần "Available Toolbox Buttons", đánh dấu vào hộp kiểm "Responsive Design Mode".

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

Để thực thi nhanh JavaScript trên bất cứ trang web nào, chỉ cần sử dụng công cụ "Scratchpad" của Firefox. Để truy cập "Scratchpad" thông qua trình đơn, vào > Developer> Scratchpad hoặc sử dụng phím tắt: Shift + F4.

Firefox scratchpad

Nếu bạn muốn làm nút công cụ "Scratchpad" hiển thị trên cửa sổ công cụ nhà phát triển để tiện sử dụng, nhấn "Toolbox Options" và dưới phần "Available Toolbox Buttons" đánh dấu vào hộp kiểm "Scratchpad".

Dịch bởi Juno_okyo theo Hongkiat.com.


:point_right: Theo dõi Juno_okyo trên Kipalog · Facebook · Twitter · Google+ · Youtube

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Juno_okyo

24 bài viết.
775 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
144 15
(Ảnh) Biểu thức chính quy (hay regex) là một công cụ mạnh mẽ mà mỗi nhà phát triển nên biết. Nó có thể khớp với một chuỗi các ký tự dựa trên các t...
Juno_okyo viết hơn 2 năm trước
144 15
White
77 15
(Ảnh) Trong bài viết này tôi sẽ chia sẻ 12 thủ thuật vô cùng hữu ích cho JavaScript. Những thủ thuật này sẽ giúp bạn giảm lượng code cũng như làm ...
Juno_okyo viết hơn 1 năm trước
77 15
White
54 6
Bạn thấy chán các trang web cũ? Muốn tìm một vài góc mới của Internet để giúp bạn tìm lại sự hứng thú? Tốt thôi, bạn đã gặp may đấy. Dù bạn đang tì...
Juno_okyo viết hơn 1 năm trước
54 6
Bài viết liên quan
White
71 3
Bài viết này được dịch từ (Link) https://code.facebook.com/ mà theo mình khá hữu ích đối với web developer. Trong hai năm qua, Facebook đã làm việ...
Cùi Bắp viết hơn 1 năm trước
71 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
775 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!