10 công cụ phát triển Firefox hữu ích bạn nên biết

[ad_1]

Firefox là "nhà phát triển chương trình đào tạo" 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ó 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ụ dành cho nhà phát triển của nó. Tôi cũng đã trình bày những gì các công cụ này có thể làm 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

 Công cụ Firefox - thước đo "width =" 550 "height =" 350 "data-lazy-src =" https: / /assets.hongkiat.com/uploads/firefox-developers-tools/ff-rulers.gif"/>[19459013[[19459014[[19459015[[19459002[Firefoxcómộtcôngcụcaitrịmà<strong> hiển thị cả thước kẻ ngang và dọc với các đơn vị pixel </strong> trên trang. Công cụ này hữu ích cho việc sắp xếp các thành phần của bạn trên trang. </p>
<p> Để truy cập thước kẻ thông qua menu: </p>
<ol class=
  • 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 thước kẻ .
  • Pess Nhập .
  • Để làm cho điều này xuất hiện trên cửa sổ công cụ dành cho nhà phát triển:

    1. Chuyển đến "Tùy chọn hộp công cụ".
    2. Trong phần "Các nút hộp công cụ khả dụng", hãy chọn hộp kiểm " Chuyển đổi thước kẻ cho trang ".

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

     Công cụ Firefox - ảnh chụp màn hình "width =" 550 "height =" 346 "data-lazy-src =" https: / /assets.hongkiat.com/uploads/firefox-developers-tools/ff-sc Muff.gif"/>[19459023[[19459014[[19459015[[19459002[MặcdùthanhcôngcụFirefoxchophépbạnchụpảnhmànhìnhcủatrangđầyđủhoặccácphầnhiểnthịtheotôiphươngphápchọnCSShữuíchhơnkhichụpảnhmànhình<strong> của từng thành phần riêng lẻ </strong> cũng như cho các phần tử <strong> chỉ hiển thị trên chuột-di chuột </strong> (như menu). </p>
<p> Để chụp ảnh màn hình thông qua menu: </p>
<ol class=
  • Chuyển đến ☰> 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 ảnh chụp màn hình --selector any_unique_css_selector .
  • Nhấn nhập .
  • Để làm cho điều này xuất hiện trên cửa sổ công cụ dành cho nhà phát triển:

    1. 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".
    2. Kiểm tra " Chụp ảnh toàn màn hình" .

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

     Công cụ Firefox - colorpicker "width =" 550 "height =" 345 "data-lazy-src =" https: / /assets.hongkiat.com/uploads/firefox-developers-tools/ff-colorpicker.gif"/>[19459023[[19459014[[19459015[[19459002[Firefoxcómộtcôngcụchọnmàutíchhợptheotêncủa"Eyedro"</p>
<p> Để truy cập công cụ "Eyedropper" thông qua menu, hãy truy cập ☰> <strong> Nhà phát triển </strong>> <strong> Eyedropper. </strong> </p>
<p> Để làm cho đ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 "<strong> Lấy màu từ hộp kiểm </strong>". </p>
<h4> 4. Xem bố cục trang trong 3D </h4>
<figure class=  Công cụ Firefox - chế độ xem 3d "width =" 550 "height =" 350 "data-lazy-src =" https : //assets.hongkiat.com/uploads/firefox-developers-tools/ff-3d-view.gif "/> <span class=

    Xem các trang web trong 3D giúp giải quyết các vấn đề về bố cục. sẽ có thể thấy các yếu tố được xếp lớp khác nhau rõ ràng hơn trong chế độ xem 3D. Để xem trang web ở chế độ 3D, hãy nhấp vào nút công cụ "Chế độ xem 3D".

    Để làm cho đ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 hộp kiểm " Chế độ xem 3D ".

    5. Xem kiểu trình duyệt

     Công cụ Firefox - kiểu trình duyệt "width =" 550 "height =" 350 "data-lazy-src =" https : //assets.hongkiat.com/uploads/firefox-developers-tools/ff-browser-style.gif "/> <span class=

    Kiểu trình duyệt bao gồm hai loại: kiểu mặc định a Trình duyệt chỉ định cho mọi thành phần và các kiểu dành riêng cho trình duyệt (các kiểu có tiền tố trình duyệt). Bằng cách xem qua các kiểu trình duyệt, bạn có thể chẩn đoán mọi sự cố ghi đè trong biểu định kiểu của bạn và cả 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:

    1. Chuyển đến ☰> Nhà phát triển > Thanh tra .
    2. Nhấp vào tab "Tính toán" ở phần bên phải.
    3. Kiểm tra hộp kiểm "Kiểu trình duyệt".

    Bạn cũng có thể mở tab " Thanh tra " thông qua phím tắt Ctrl + Shift + C "Kiểu trình duyệt".

    6. Vô hiệu hóa JavaScript cho phiên hiện tại

     Công cụ Firefox - vô hiệu hóa JS "width =" 542 "height =" 340 "data-lazy-src =" https : //assets.hongkiat.com/uploads/firefox-developers-tools/ff-disable-js.gif "/> <span class=

    Để luôn luôn thực hiện tốt nhất và khả năng tương thích trình đọc màn hình để mã hóa bất kỳ trang web nào theo cách mà 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 trong .

    Để 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", chọn hộp kiểm " Tắt JavaScript *".

    7. Ẩn kiểu CSS khỏi trang

     Công cụ Firefox - tắt kiểu "width =" 550 "height =" 350 "data-lazy-src =" https : //assets.hongkiat.com/uploads/firefox-developers-tools/ff-disable-stylesheet.gif "/> <span class=

    Giống như JavaScript, do lo ngại về khả năng truy cập, nó là tốt nhất để thiết kế trang web theo cách 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 chế độ xem ban đầu.

    Để truy cập "Trình chỉnh sửa kiểu" thông qua menu, hãy truy cập vào ☰> Nhà phát triển > Trình chỉnh sửa kiểu (phím tắt: Shift + F7 .

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

     Công cụ Firefox - phản hồi xem trước "width =" 550 "height =" 346 "data-lazy-src =" https : //assets.hongkiat.com/uploads/firefox-developers-tools/ff-preview.gif "/> <span class=

    Các công cụ dành cho nhà phát triển Firefox có tùy chọn để xem trước HTML phản hồi kiểu nội dung . Đ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 đưa ra hay không trong phản hồi.

    Để truy cập "Xem trước" thông qua menu:

    1. Chuyển đến ☰> Nhà phát triển > Mạng (phím tắt: Ctrl + Shift + Q ].
    2. 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 yêu cầu.
    3. Nhấp vào tab " Xem trước " ở phần bên phải.

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

     Công cụ Firefox - responsive "width =" 550 "height =" 345 "data-lazy-src =" https: / /assets.hongkiat.com/uploads/firefox-developers-tools/ff-responsive.gif"/>[19459023[[19459014[[19459015[[19459002[Đểkiểmtratrangwebvềkhảnăngphảnhồicủanóhãysửdụng"Chếđộxemthiếtkếđápứng"cóthểđượctruycậpbởi☰><strong> Nhà phát triển </strong>> <strong> Chế độ xem thiết kế đáp ứng </strong> hoặc bằng phím tắt: <span class= Ctrl + Shift + M .

    Để xuất hiện nút công cụ "Chế độ thiết kế đáp ứng", 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", đánh dấu vào hộp kiểm "Chế độ thiết kế đáp ứng".

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

     Công cụ Firefox - responsive "width =" 550 "height =" 345 "data-lazy-src =" https: / /assets.hongkiat.com/uploads/firefox-developers-tools/ff-scratchpad.gif"/>[19459023[[19459014[[19459015[[19459002[ĐểthựcthiJavaScriptnhanhtrênbấtkỳtrangwebnàochỉcầnsửdụngcôngcụ"Scratchpad"FirefoxĐểtruycập"Scratchpad"thôngquamenuhãytruycập;☰><strong> Nhà phát triển </strong>> <strong> Scratchpad </strong> hoặc sử dụng phím tắt <span class= 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 vào " Tùy chọn hộp công cụ " và trong phần " Các nút hộp công cụ có sẵn " kiểm tra " Hộp kiểm Scratchpad [ .

    [ad_2]
    Source link: webdesignernews

    Để lại một bình luận

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    .
    .
    .
    .