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 WebCô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

The all-new Inspector panel in Firefox 57.

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

The all-new Console in Firefox 57.

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

The all-new Firefox 57 Debugger.html

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

The Network panel in Firefox 57 DevTools.

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

Performance Tools in Firefox 57 Developer Tools

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

Responsive Design mode in Firefox 57.

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

Performance Tools in Firefox 57 Developer Tools

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

Performance Tools in Firefox 57 Developer Tools

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 workersbả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.

Tải xuống 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.