10 công cụ phát triển Firefox hữu ích bạn nên biết
Firefox là "trình duyệt của nhà phát triển" có nhiều công cụ tuyệt vời để giúp công việc của chúng tôi dễ dàng hơn. Bạn có thể tìm thấy nhiều hơn về bộ sưu tập công cụ của nó trên trang web Công cụ dành cho nhà phát triển Firefox và cũng có thể dùng thử Trình duyệt phiên bản dành cho nhà phát triển của họ có nhiều tính năng và công cụ đang được thử nghiệm.
Đối với bài đăng này, tôi đã liệt kê 10 công cụ tiện dụng bạn có thể thích từ bộ sưu tập công cụ phát triển của nó. Tôi cũng đã chứng minh những công cụ này có thể làm gì với GIF cộng với cách truy cập chúng để tham khảo nhanh.
1. Xem thước kẻ ngang và dọc
Firefox có một công cụ cai trị hiển thị cả thước kẻ ngang và dọc với đơn vị pixel trên trang. Công cụ này hữu ích để sắp xếp các yếu tố của bạn trên trang.
Để truy cập thước kẻ thông qua menu, hãy truy cập:> Nhà phát triển > Thanh công cụ dành cho nhà phát triển (phím tắt: Shift + F2). Khi thanh công cụ xuất hiện ở cuối trang, hãy nhập người cai trị và hãy nhấn Đi vào.
Để làm điều này xuất hiện trên cửa sổ công cụ dành cho nhà phát triển, hãy chuyển đến "Tùy chọn hộp công cụ". Trong phần "Nút hộp công cụ khả dụng", kiểm tra "Chuyển đổi thước kẻ cho trang"hộp kiểm.
2. Chụp ảnh màn hình bằng bộ chọn CSS
Mặc dù thanh công cụ Firefox cho phép bạn chụp ảnh màn hình toàn trang hoặc các phần hiển thị, nhưng theo tôi, phương pháp chọn CSS hữu ích hơn cho việc chụp ảnh chụp màn hình của các yếu tố cá nhân cũng như cho các yếu tố có thể nhìn thấy trên chuột di chuột chỉ (như menu).
Để chụp ảnh màn hình thông qua menu, đi đến> Nhà phát triển > Thanh công cụ dành cho nhà phát triển (phím tắtShift + F2). Khi thanh công cụ xuất hiện ở cuối trang, hãy nhập ảnh chụp màn hình --selector any_unique_css_selector và hãy nhấn đi vào.
Để làm điều này xuất hiện trên cửa sổ công cụ dành cho nhà phát triển: nhấp vào "Tùy chọn hộp công cụ" và trong phần "Nút hộp công cụ khả dụng", chọn "Chụp ảnh màn hình toàn trang " hộp kiểm.
3. Chọn màu từ các trang web
Firefox có một công cụ chọn màu tích hợp với tên "Eyedropper". Để truy cập công cụ "Eyedropper" thông qua menu, hãy truy cập> Nhà phát triển > Kính mắt.
Để làm điều này xuất hiện trên cửa sổ công cụ dành cho nhà phát triển: nhấp vào "Tùy chọn hộp công cụ" và trong phần "Nút hộp công cụ khả dụng" kiểm tra "Lấy một màu từ trang"hộp kiểm.
4. Xem bố cục trang ở chế độ 3D
Xem các trang web trong 3D giúp giải quyết vấn đề bố cục. Bạn sẽ có thể thấy các yếu tố lớp khác nhau rõ ràng hơn nhiều trong chế độ xem 3D. Để xem trang web ở chế độ 3D, nhấp vào nút công cụ "Chế độ xem 3D".
Để làm điều này xuất hiện trên cửa sổ công cụ dành cho nhà phát triển, nhấp vào "Tùy chọn hộp công cụ" và trong phần "Nút hộp công cụ khả dụng" kiểm tra "Chế độ xem 3D"hộp kiểm.
5. Xem kiểu trình duyệt
Kiểu trình duyệt bao gồm hai loại: kiểu mặc định mà trình duyệt gán cho mọi thành phần và kiểu dành riêng cho trình duyệt (kiểu có tiền tố trình duyệt). Bằng cách xem các kiểu trình duyệt, bạn sẽ có thể chẩn đoán bất kỳ vấn đề ghi đè nào trong biểu định kiểu của bạn và cũng biết về bất kỳ phong cách cụ thể nào của trình duyệt hiện có .
Để truy cập "Kiểu trình duyệt" thông qua menu, hãy đi tới> Nhà phát triển > Thanh tra. Sau đó nhấp vào tab "Tính toán" ở phần bên phải và chọn hộp kiểm "Kiểu trình duyệt".
Bạn cũng có thể mở "Thanh tra"tab thông qua phím tắt Ctrl + Shift + C và sau đó truy cập" Kiểu trình duyệt ".
6. Vô hiệu hóa JavaScript cho phiên hiện tại
Để thực hành tốt nhất và khả năng tương thích trình đọc màn hình, luôn luôn nên viết mã bất kỳ trang web nào theo cách sao cho chức năng của nó không bị cản trở trong môi trường bị vô hiệu hóa javascript. Để kiểm tra các 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.
Để tắt JavaScript cho phiên hiện tại, nhấp vào "Tùy chọn hộp công cụ" và trong phần "Cài đặt nâng cao", kiểm tra "Vô hiệu hóa JavaScript* "hộp kiểm.
7. Ẩn kiểu CSS khỏi trang
Cũng giống như JavaScript, do lo ngại về khả năng truy cập, tốt nhất là thiết kế trang web theo cách sao cho các trang vẫn có thể đọc được ngay cả khi không có bất kỳ kiểu nào. Để xem trang trông như thế nào mà không có bất kỳ kiểu nào, bạn có thể vô hiệu hóa chúng trong các công cụ dành cho nhà phát triển.
Để xóa mọi kiểu CSS (nội tuyến, nội bộ hoặc bên ngoài) được áp dụng trên trang web, chỉ cần nhấp vào biểu tượng con mắt của biểu định kiểu được liệt kê trong tab "Trình chỉnh sửa kiểu". Nhấp vào nó một lần nữa để trở lại giao diện ban đầu.
Để truy cập "Style Editor" thông qua menu, hãy truy cập> Nhà phát triển > Biên tập phong cách (phím tắt: Shift + F7.
8. Xem trước phản hồi nội dung HTML cho một yêu cầu
Các công cụ phát triển Firefox có một tùy chọn để xem trước các phản hồi kiểu nội dung HTML. Điều này giúp nhà phát triển xem trước bất kỳ chuyển hướng 302 nào và kiểm tra xem có bất kỳ thông tin nhạy cảm nào đã được hiển thị hay không trong phản hồi.
Để truy cập "Xem trước" thông qua menu, hãy truy cập> Nhà phát triển > Mạng (phím tắt: Ctrl + Shift + Q. Sau đó mở trang web bạn chọn hoặc tải lại trang hiện tại, nhấp vào yêu cầu mong muốn (có phản hồi HTML) từ danh sách các yêu cầu và nhấp vào "Xem trước"tab ở phần bên phải.
9. Xem trước trang web ở các kích cỡ màn hình khác nhau
Để kiểm tra mức độ đáp ứng của trang web, hãy sử dụng "Chế độ xem thiết kế đáp ứng", có thể được truy cập bởi ☰> Nhà phát triển > Thiết kế đáp ứng hoặc bằng phím tắt: Ctrl + Shift + M.
Để làm cho nút công cụ "Chế độ thiết kế đáp ứng" xuất hiện, nhấp vào "Tùy chọn hộp công cụ" và trong phần "Nút hộp công cụ khả dụng", chọn hộp kiểm "Chế độ thiết kế đáp ứng".
10. Chạy JavaScript trên các trang
Để thực thi JavaScript nhanh trên bất kỳ trang web nào, chỉ cần sử dụng công cụ "Scratchpad" của Firefox. Để truy cập "Scratchpad" thông qua menu, hãy truy cập; ☰> Nhà phát triển > Bàn di chuột hoặc sử dụng phím tắt Shift + F4.
Để làm cho nút công cụ "Scratchpad" xuất hiện trên cửa sổ công cụ dành cho nhà phát triển để sử dụng nhanh: nhấp "Tùy chọn hộp công cụ"và dưới"Nút hộp công cụ có sẵnphần "kiểm tra" Scratchpad " hộp kiểm.
