Một cái nhìn sâu sắc về các công cụ Firefox cần thiết cho các nhà phát triển web

Firefox từ lâu đã là trình duyệt ưa thích để phát triển web. Có một số tiện ích bổ sung hữu ích để thực hiện công việc. Trong bài đăng này, chúng tôi sẽ xem xét một vài tiện ích bổ sung mà tôi nghĩ là cần thiết để cài đặt nếu bạn định phát triển web. Ngoài ra, chúng tôi sẽ khám phá một số tính năng trong các tiện ích bổ sung này có thể giúp.

Trước hết, chúng ta cần cài đặt Fireorms.

Bọ lửa

Fireorms là một tiện ích bổ sung phải cài đặt để phát triển web. Giả sử rằng bạn không biết lấy Firebird ở đâu, bạn có thể cài đặt nó ở đây. Có lẽ, bạn cần khởi động lại Firefox trước khi nó được kích hoạt.

Sau đó, bạn có thể xem Firebird thông qua một trong các cách sau: làm theo menu này Công cụ> Nhà phát triển web> Firebird, nhấp chuột phải vào trang web và chọn “Kiểm tra phần tử với Fireorms”.

Ngoài ra, bạn có thể tìm thấy biểu tượng Firebird trong Firefox và nhấp vào biểu tượng này, điều này sẽ hiển thị cửa sổ Firebird;

Bọ lửa khá giống với Công cụ dành cho nhà phát triển Chrome. nó có bảng điều khiển để xem cấu trúc HTML và kiểu dáng, đồng thời cũng có bảng điều khiển để xem lỗi, cảnh báo và nhật ký. Nhưng, tôi có một vài lời khuyên nữa hy vọng bạn có thể thấy hữu ích.

Điều chỉnh kích thước hộp

Phần tử HTML được tạo thành với mô hình hộp CSS bao gồm lề, phần đệm và kích thước đối tượng (chiều rộng / chiều cao). Đôi khi chúng ta có thể cần phải sửa đổi các thuộc tính này. Trong trường hợp đó, bạn có thể chọn một trong các yếu tố bạn muốn nó thay đổi, sau đó đi đến Bố trí bảng điều khiển.

Trong bảng điều khiển này, bạn sẽ tìm thấy một minh họa về mô hình hộp CSS cùng với thông tin của nó, bao gồm cả chiều rộng và Chiều cao. Mặc dù hai thuộc tính này không được chỉ định trong CSS, công cụ này đủ thông minh để xác định giá trị. Nếu bạn cần sửa đổi chúng, bạn chỉ cần nhấp vào giá trị và sử dụng phím mũi tên lên hoặc xuống để tăng hoặc giảm giá trị.

Phong cách tính toán

Trong nhiều tình huống, có lẽ bạn đang tự hỏi tại sao một số kiểu nhất định không được áp dụng. Một trong những cách dễ dàng và nhanh hơn, đặc biệt là khi bạn có hàng ngàn dòng kiểu, là bằng cách kiểm tra nó từ Phong cách tính toán bảng điều khiển. Ví dụ này cho thấy màu văn bản của thẻ neo được ghi đè bởi .nút lớp, trong khi nền tảng của .nút lớp học được ghi đè bởi .nút.add.

Kiểm tra họ phông chữ (cách dễ dàng)

Bạn có thể thường tìm thấy một cái gì đó như thế này trong phông chữ gia đình tài sản trong CSS với các họ phông chữ khác nhau. Thật không may, điều này sẽ không cho chúng tôi biết cụ thể trình duyệt lấy phông chữ nào. Để làm cho việc nhận dạng dễ dàng hơn, chúng ta có thể cài đặt tiện ích mở rộng Firebird này FireFontF Family.

Sau khi cài đặt xong, tải trang web của bạn và bây giờ chúng tôi có thể thấy rõ họ phông chữ nào được áp dụng. Trong trường hợp của chúng tôi, nó là trên thực tế Helvetica Neue (xem bắn).

Phân tích hiệu suất

Đây có thể là mức độ, nhưng Tốc độ trang web hiện là một trong những thông số (thuật toán) của Google trong việc quyết định chất lượng trang web; trang web tải nhanh hơn được coi là được phát triển tốt và được xếp hạng cao hơn về mặt nội dung. Vì vậy, tốc độ không phải là thứ nên bỏ qua.

Bảng điều khiển mạng

Nơi đầu tiên bạn có thể cần truy cập để kiểm tra hiệu suất trang web của mình là Mạng lưới bảng điều khiển. Bảng này sẽ ghi lại yêu cầu HTTP của trang web của bạn khi nó được tải. Ảnh chụp màn hình dưới đây cho thấy một trang web tải 42 yêu cầu và mất xung quanh 4,36 giây để tải.

Sau đó, bạn có thể sắp xếp yêu cầu HTTP theo loại của chúng như HTML, CSS và Hình ảnh.

Yslow!

Hơn nữa, bạn cũng có thể cài đặt YSlow, một phần mở rộng cho Fireorms từ Yahoo! Sau khi được kích hoạt, bạn sẽ tìm thấy một bảng điều khiển bổ sung được gọi là Yslow!.

Tương tự như Mạng lưới bảng điều khiển, Yslow! sẽ ghi lại các màn trình diễn của trang web khi nó được tải, nhưng sau đó nó cũng sẽ cho bạn biết lý do tại sao trang web chậm và chúng ta có thể làm gì để giải quyết nó. Trong ví dụ này, chúng tôi chạy thử nghiệm đến một trang web và nó được tính điểm 86 cho hiệu suất tổng thể, được coi là OK.

Tốc độ trang

Ngoài ra, bạn cũng có thể cài đặt Tốc độ trang từ Google. Tương tự như Yslow!, nó kiểm tra hiệu suất tốc độ trang web, mặc dù kết quả kiểm tra có thể hơi khác nhau. Ví dụ này cho thấy rằng cùng một trang web đạt 82 điểm theo Tốc độ trang.

Công cụ phát triển web

Công cụ phát triển web rõ ràng là dành cho các nhà phát triển web và nó có một loạt các tính năng được đóng gói trong thanh công cụ này. Nhưng cái này dưới đây là một trong những sở thích của tôi.

Kiểm tra hình ảnh

Đôi khi chúng ta có thể cần lấy thông tin hình ảnh từ trang web. Tôi thường thấy mọi người làm điều này bằng cách tình cờ tìm thấy trên trình duyệt hoặc nhấp chuột phải vào hình ảnh và chọn Xem thông tin hình ảnh, như vậy

Nhưng cách này không hiệu quả lắm khi chúng ta cần lấy thông tin từ nhiều hình ảnh. Trong trường hợp đó, chúng ta có thể sử dụng Hình ảnh tính năng từ tiện ích bổ sung. Tính năng này có thể dễ dàng truy cập từ menu Hình ảnh từ thanh công cụ.

Và, ví dụ này cho thấy cách chúng tôi hiển thị đồng thời kích thước hình ảnh và kích thước tệp hình ảnh:

Công cụ tích hợp Firefox

Trong các phiên bản gần đây, Firefox đã tăng cường đáng kể các tính năng tích hợp sẵn cho các nhà phát triển web, một số trong số đó là:

Yếu tố kiểm tra bản địa

Người bản xứ này Kiểm tra nguyên tố từ Firefox có thể trông tương tự như “Kiểm tra phần tử trong Fireorms”, nhưng nó thực sự hoạt động theo những cách khác nhau.

Lần này, tôi sẽ không xem xét thêm về tính năng này, vì về cơ bản nó giống hệt với bảng điều khiển HTML và CSS của Fireorms, mặc dù có sự khác biệt về bố cục và thiết kế. Nhưng, có một tính năng đặc biệt đáng để thử, đó là Chế độ xem 3D.

Sử dụng Chế độ xem 3D bạn có thể xem cấu trúc trang web theo chiều sâu. Để kích hoạt chế độ xem này, bạn có thể tìm thấy nút ở dưới cùng bên phải của “Yếu tố kiểm tra bản địa của Firefox”. Đây là cách Chế độ xem 3D giống như.

Tôi không sử dụng nó thường xuyên như các tính năng khác, nhưng đó là một tính năng khá sáng tạo từ Mozilla tôi thừa nhận và chắc chắn rất hữu ích trong một số tình huống nhất định.

Xem thiết kế web

Kể từ khi mức độ phổ biến ngày càng tăng trong Thiết kế Web Responsive, Firefox đã khởi tạo Bookmarklet Responsive cho Trình duyệt. Công cụ này sẽ cho phép chúng tôi kiểm tra trang web phản hồi của chúng tôi trong các chế độ xem khác nhau mà không thay đổi kích thước cửa sổ trình duyệt.

Chế độ xem này có sẵn từ menu này: Công cụ> Nhà phát triển web> Chế độ xem thiết kế web. Và, đây là cách nhìn như thế nào.

Biên tập phong cách

Cuối cùng, nếu bạn thường xuyên làm việc với CSS, bạn có thể sẽ yêu thích tính năng này. Kể từ phiên bản 11, Firefox đã thêm Biên tập phong cách trong các công cụ phát triển riêng của nó.

Tính năng này cũng tuyệt như Xem thiết kế web, nó cho phép bạn chỉnh sửa CSS, xem tác động ngay lập tức trên trình duyệt và lưu các thay đổi ảnh hưởng trực tiếp đến tệp nguồn CSS.

Style Editor có sẵn từ menu sau: Công cụ> Nhà phát triển web> Trình chỉnh sửa kiểu.

Suy nghĩ cuối cùng

Có một loạt các tính năng được đóng gói trong các tiện ích Firefox này và những tính năng được thảo luận ở đây chỉ là một số tính năng tôi sử dụng khá thường xuyên trong quá trình phát triển web. Tuy nhiên, bạn có thể có một số mẹo khác có thể hữu ích để tăng năng suất phát triển web trong Firefox.

Những tính năng nào bạn sử dụng thường xuyên? Bạn có thể chia sẻ suy nghĩ của bạn trong hộp bình luận bên dưới.