Công cụ dành cho nhà phát triển của Firefox
Firefox Developer Tools là một bộ công cụ dành cho nhà phát triển web được tích hợp trong Firefox. Bạn có thể sử dụng chúng để kiểm tra, chỉnh sửa và gỡ lỗi HTML, CSS, và JavaScript.
Phần này chứa các hướng dẫn chi tiết về tất cả các công cụ cũng như thông tin về cách gỡ lỗi Firefox dành cho Android, cách mở rộng DevTools và cách gỡ lỗi toàn bộ trình duyệt.
Nếu bạn có bất kỳ phản hồi nào về DevTools hoặc muốn đóng góp cho dự án, bạn có thể tham gia cộng đồng DevTools.
Lưu ý: Nếu bạn mới bắt đầu phát triển web và sử dụng các công cụ dành cho nhà phát triển, tài liệu kiến thức của chúng tôi sẽ giúp bạn — xem bài viết Bắt đầu với Web và Công cụ dành cho nhà phát triển của trình duyệt là gì? là điểm khởi đầu tốt.
Các công cụ cốt lõi
Bạn có thể mở Firefox Developer Tools từ menu bằng cách chọn Tools > Web Developer > Toggle Tools hoặc sử dụng phím tắt Ctrl + Shift + I hoặc F12 trên Windows và Linux, hoặc Cmd + Opt + I trên macOS.
Menu dấu chấm lửng ở phía bên phải của Công cụ dành cho nhà phát triển chứa một số lệnh cho phép bạn thực hiện các hành động hoặc thay đổi cài đặt công cụ.
 |
Nút này chỉ xuất hiện khi có nhiều iframe trên một trang. Nhấp vào nó để hiển thị danh sách các khung nội tuyến trên trang hiện tại và chọn khung mà bạn muốn làm việc. |
 |
Nhấp vào nút này để chụp ảnh màn hình của trang hiện tại. (Lưu ý: Tính năng này không được bật theo mặc định và phải được bật trong cài đặt trước khi biểu tượng xuất hiện.) |
 |
Chuyển sang Chế độ thiết kế tương thích. |
 |
Mở menu bao gồm các tùy chọn gắn đế, khả năng hiển thị hoặc ẩn bảng điều khiển phân tách và cài đặt công cụ dành cho nhà phát triển. Menu cũng bao gồm các liên kết đến tài liệu cho Firefox Web Tools và cộng đồng Mozilla. |
 |
Đóng công cụ dành cho nhà phát triển |
Trang Trình kiểm tra
Xem và chỉnh sửa nội dung và bố cục trang. Hình dung nhiều khía cạnh của trang bao gồm mô hình hộp, hoạt ảnh và bố cục lưới.
Bảng điều khiển Web
Xem thông báo được ghi lại bởi một trang web và tương tác với trang đó bằng JavaScript.
Trình gỡ lỗi JavaScript
Dừng, thực hiện từng bước, xem và chỉnh sửa JavaScript đang chạy trong một trang.
Giám sát mạng
Xem các yêu cầu mạng được thực hiện khi một trang đang được tải.
Công cụ hiệu suất
Phân tích hiệu suất đáp ứng, JavaScript và bố cục chung của trang web của bạn.
Chế độ thiết kế tương thích
Xem trang web hoặc ứng dụng của bạn sẽ trông như thế nào và hoạt động như thế nào trên các thiết bị và loại mạng khác nhau.
Trình kiểm tra trợ năng
Cung cấp phương tiện để truy cập cây trợ năng của trang, cho phép bạn kiểm tra những gì còn thiếu hoặc cần chú ý.
Bảng Ứng dụng
Cung cấp các công cụ để kiểm tra và gỡ lỗi các ứng dụng web hiện đại (còn được gọi là Progressive Web Apps). Điều này bao gồm việc kiểm tra service workers và bản kê khai ứng dụng web.
Lưu ý: Thuật ngữ chung cho giao diện người dùng mà tất cả các Công cụ DevTools tồn tại là hộp công cụ.
Nhiều công cụ hơn
Các công cụ dành cho nhà phát triển này cũng được tích hợp sẵn trong Firefox. Không giống như "công cụ cốt lõi ở trên" ở trên, bạn có thể không sử dụng chúng hàng ngày.
- Bộ nhớ
- Tìm ra những đối tượng nào đang sử dụng bộ nhớ.
- Trình kiểm tra lưu trữ
- Kiểm tra cookie, bộ nhớ cục bộ, indexedDB và bộ nhớ phiên có trong một trang.
- Trình xem thuộc tính DOM
- Kiểm tra các thuộc tính, chức năng DOM của trang, v.v.
- Eyedropper
- Chọn một màu từ trang.
- Style Editor
- Xem và chỉnh sửa các kiểu CSS cho trang hiện tại.
- Tạo ảnh chụp màn hình
- Chụp ảnh màn hình của toàn bộ trang hoặc của một phần tử đơn lẻ.
- Đo lường một phần của trang
- Đo lường một khu vực cụ thể của một trang web.
- Thước
- Chồng các thước kẻ ngang và dọc trên một trang web
Để có các công cụ và tính năng mới nhất dành cho nhà phát triển, hãy thử Firefox Developer Edition.
Kết nối các công cụ dành cho nhà phát triển
Nếu bạn mở các công cụ dành cho nhà phát triển bằng phím tắt bàn phím hoặc các mục menu tương đương, chúng sẽ nhắm mục tiêu tài liệu được lưu trữ bởi thẻ hiện đang hoạt động. Nhưng bạn cũng có thể đính kèm các công cụ vào nhiều mục tiêu khác, cả trong trình duyệt hiện tại và trong các trình duyệt khác nhau hoặc thậm chí các thiết bị khác nhau.
- about:debugging
- Gỡ lỗi các tiện ích, nội dung thẻ và worker đang chạy trong trình duyệt.
- Kết nối với Firefox dành cho Android
- Kết nối các công cụ dành cho nhà phát triển với một phiên bản Firefox chạy trên thiết bị Android.
- Kết nối với iframe
- Kết nối các công cụ dành cho nhà phát triển với một iframe cụ thể trong trang hiện tại.
- Kết nối với các trình duyệt khác
- Kết nối các công cụ dành cho nhà phát triển với Chrome trên Android và Safari trên iOS.
Gỡ lỗi trình duyệt
Theo mặc định, các công cụ dành cho nhà phát triển được đính kèm với một trang web hoặc ứng dụng web. Nhưng bạn cũng có thể kết nối chúng với toàn bộ trình duyệt. Điều này hữu ích cho việc phát triển trình duyệt và tiện ích.
- Bảng điều khiển trình duyệt
- Xem các thông báo được ghi lại bởi chính trình duyệt và bởi các tiện ích, đồng thời chạy mã JavaScript trong phạm vi của trình duyệt.
- Hộp công cụ trình duyệt
- Đính kèm công cụ dành cho nhà phát triển vào chính trình duyệt.
Mở rộng DevTools
Để biết thông tin về cách mở rộng Firefox DevTools, hãy xem Extending the developer tools trong phần Browser Extensions của MDN.
Di chuyển từ Firebug
Firebug đã không còn được hỗ trợ (xem Firebug tồn tại trên Firefox DevTools để biết chi tiết vì sao), và chúng tôi đánh giá cao rằng một số người sẽ thấy việc di chuyển sang một bộ DevTools khác ít quen thuộc hơn là một thách thức. Để dễ dàng chuyển đổi từ Firebug sang các công cụ dành cho nhà phát triển Firefox, chúng tôi đã viết một hướng dẫn hữu ích — Di chuyển từ Firebug.
Đóng góp
Nếu bạn muốn giúp cải thiện các công cụ dành cho nhà phát triển, các tài nguyên này sẽ giúp bạn bắt đầu.
- Tham gia
- Trang web cộng đồng của chúng tôi giải thích cách tham gia.
- bugs.firefox-dev.tools
- Một công cụ giúp tìm ra lỗi để giải quyết.