Firefox Developer Edition 6 Công cụ tuyệt vời nhất để thử

Phiên bản dành cho nhà phát triển Firefox là trình duyệt duy nhất hiện nay được sản xuất đặc biệt dành cho các nhà phát triển. Các công cụ dành cho nhà phát triển trong phiên bản tiêu chuẩn xuất hiện đầu tiên trong phiên bản của nhà phát triển và có những công cụ trong phiên bản dành cho nhà phát triển không được cung cấp trong phiên bản tiêu chuẩn. Hôm nay chúng ta sẽ xem xét một số công cụ tại thời điểm này chỉ có thể được tìm thấy trong phiên bản dành cho nhà phát triển.

Nếu bạn là người chưa từng sử dụng hoặc không quen thuộc với các công cụ dành cho nhà phát triển, ngay cả những người trong phiên bản tiêu chuẩn, trước tiên hãy xem thử "DevTools Challenger" thú vị này của Mozilla. Tại đây bạn có thể thực hành với một số công cụ được đề cập dưới đây trong trình duyệt phiên bản dành cho nhà phát triển Firefox. Các ví dụ rất thú vị và dễ làm theo, các hướng dẫn đơn giản và nếu bạn không thể bắt kịp, chỉ cần làm theo hướng dẫn bằng video thay thế.

1. Công cụ kiểm tra hoạt hình

Hoạt ảnh CSS ngày càng trở nên phổ biến và các công cụ hoạt hình CSS được cung cấp bởi phiên bản dành cho nhà phát triển Firefox giúp bạn dễ dàng theo dõi và kiểm tra từng bước của hoạt hình được tạo. Bạn có thể tạm dừng, phát và đảo ngược bất kỳ hình ảnh động nào; bạn cũng có thể xem nó xảy ra từng khung hình thông qua việc cọ rửa.

Để truy cập công cụ, hãy mở Thanh tra công cụ bằng cách nhấp chuột phải vào phần tử hoạt hình và chọn "phần tử kiểm tra", sau đó ở phía bên phải của cửa sổ công cụ dev, nhấp vào "Ảnh động".

2. Trình chỉnh sửa chức năng định thời gian hoạt hình

Thời gian hoạt hình có thể chỉnh sửa trong công cụ dev, bạn chỉ cần nhấp vào biểu tượng bên cạnh chức năng trong Quy tắc phần của Thanh tra công cụ và một cửa sổ bật lên hiển thị các đường cong chức năng mở ra. Bạn có thể kéo và sửa đổi điều này để điều chỉnh thời gian hoạt hình của bạn. Khi bạn đã thực hiện các thay đổi cho các đường cong, tốc độ hoạt hình của bạn sẽ thay đổi tương ứng.

Nếu bạn chưa quen với chức năng hoạt hình Bezier hình khối, tôi khuyên bạn nên đăng bài này để tìm hiểu thêm về nó.

3. Bộ chọn màu cho các thuộc tính CSS

Đã có một công cụ chọn màu có sẵn trong phiên bản tiêu chuẩn của Firefox (đọc thêm về nó trong bài đăng này), chọn một màu từ trang và sao chép nó vào bảng tạm. Công cụ chọn màu tôi đang đề cập bây giờ là cụ thể cho các giá trị màu CSS của các thuộc tính.

Bên cạnh mọi giá trị màu CSS trong Quy tắc phần của Thanh tra công cụ, có một biểu tượng sẽ mở một bánh xe màu bật lên khi nhấp vào. Bạn có thể chọn màu nào bạn muốn từ bánh xe.

Nếu bạn đã có một màu bạn muốn và một màu xuất hiện trên trang, chỉ cần nhấp vào công cụ Eyedropper ở dưới cùng của cửa sổ bật lên để mở công cụ chọn màu, sau đó kéo công cụ chọn đến màu bạn muốn và nhấp vào nó . Giá trị màu CSS sẽ được thay đổi thành màu của màu đã chọn.

4. Dụng cụ đo lường

Công cụ này cho phép bạn xem vị trí XY của con trỏ và đo chiều cao, chiều rộng và đường chéo bằng pixel của một phần được chọn. Để sử dụng công cụ, trước tiên bạn phải kích hoạt nó trong nhà phát triển Tùy chọn hộp công cụ, bằng cách chọn hộp kiểm có tên "Đo một phần của trang" trong "Nút hộp công cụ khả dụng".

Sau khi được bật, biểu tượng thước sẽ xuất hiện ở đầu cửa sổ công cụ dev, nhấp vào biểu tượng đó và di chuyển con trỏ qua trang. Bạn sẽ thấy các vị trí XY gần con trỏ. Để đo chiều rộng, chiều cao và đường chéo, chỉ cần nhấp và kéo để chọn phần bạn muốn đo.

5. Trình chỉnh sửa bộ lọc CSS

Nếu bạn đã áp dụng bộ lọc CSS cho một thành phần trên trang, bạn sẽ thấy một biểu tượng bên cạnh nó trong Quy tắc phần của Thanh tra công cụ mở ra trình chỉnh sửa bộ lọc CSS khi nhấp.

Để xóa bộ lọc, nhấp vào dấu × ở cuối bên phải của tên bộ lọc. Để thêm bộ lọc, nhấp vào hộp bộ lọc ở dưới cùng và chọn bộ lọc bạn muốn thêm và nhấp vào bộ lọc + ký tên. Bạn cũng có thể sắp xếp lại các bộ lọc theo bất kỳ thứ tự nào bằng cách kéo từng mục.

6. Công cụ bộ nhớ

Bạn có thể tìm hiểu những gì đang chiếm bộ nhớ trong trang web của bạn, với sự trợ giúp của công cụ này. Điều này giúp bạn thực hiện các bước để giảm mức sử dụng bộ nhớ và cải thiện tốc độ trang của bạn.

Để sử dụng công cụ, trước tiên bạn phải bật công cụ này từ Tùy chọn hộp công cụ bằng cách chọn hộp kiểm có tên "Bộ nhớ" trong "Công cụ dành cho nhà phát triển Firefox mặc định". Sau khi kiểm tra, bạn sẽ thấy phần "Bộ nhớ" ở đầu cửa sổ công cụ dev ngay sau "Hiệu suất". Chọn cái đó.

Để sử dụng công cụ, nhấp vào "Chụp ảnh nhanh" hoặc nút camera. Bạn sẽ thấy một danh sách các mục, như các đối tượng và tập lệnh đang chiếm bộ nhớ .