Menu Nhà phát triển Web của Firefox chứa các công cụ để kiểm tra các trang, thực thi mã JavaScript tùy ý và xem các yêu cầu HTTP và các thông báo khác. Firefox 10 đã thêm một công cụ Thanh tra hoàn toàn mới và Scratchpad cập nhật.
Các tính năng mới dành cho nhà phát triển web của Firefox, kết hợp với các tiện ích bổ sung tuyệt vời dành cho nhà phát triển web như Firebug và Thanh công cụ dành cho nhà phát triển web, làm cho Firefox trở thành trình duyệt lý tưởng cho các nhà phát triển web. Tất cả các công cụ đều có sẵn trong Trình phát triển web trong menu của Firefox.
Người kiểm tra trang
Kiểm tra một phần tử cụ thể bằng cách nhấp chuột phải vào nó và chọn Quan sát (hoặc nhấn Q ). Bạn cũng có thể khởi chạy Thanh tra từ menu Nhà phát triển web.
Bạn sẽ thấy thanh công cụ ở cuối màn hình, bạn có thể sử dụng thanh công cụ này để điều khiển trình kiểm tra. Phần tử đã chọn của bạn sẽ được đánh dấu và các phần tử khác trên trang sẽ bị mờ đi.
Nếu bạn muốn chọn một phần tử mới, hãy nhấp vào Quan sát trên thanh công cụ, di chuột qua trang và nhấp vào phần tử của bạn. Firefox đánh dấu phần tử dưới con trỏ của bạn.
Bạn có thể điều hướng giữa các phần tử mẹ và con bằng cách nhấp vào đường dẫn trên thanh công cụ.
Trình kiểm tra HTML
Nhấn vào HTML để xem mã HTML của phần tử đang được chọn.
Trình kiểm tra HTML cho phép bạn mở rộng và thu gọn các thẻ HTML, giúp bạn dễ dàng hình dung trong nháy mắt. Nếu bạn muốn xem HTML của trang trong một tệp phẳng, bạn có thể chọn Xem nguồn trang từ menu Nhà phát triển web.
Trình kiểm tra CSS
Nhấn vào Phong cách để xem các quy tắc CSS được áp dụng cho phần tử đã chọn.
Ngoài ra còn có một bảng thuộc tính CSS - chuyển đổi giữa hai bảng này bằng cách nhấp vào Quy tắc và Tính chất nút. Để giúp bạn tìm các thuộc tính cụ thể, bảng thuộc tính bao gồm hộp tìm kiếm.
Bạn có thể chỉnh sửa nhanh CSS của phần tử từ bảng Quy tắc. Bỏ chọn bất kỳ hộp kiểm nào để hủy kích hoạt quy tắc, bấm vào văn bản để thay đổi quy tắc hoặc thêm quy tắc của riêng bạn vào phần tử ở đầu ngăn. Ở đây, tôi đã thêm font-weight: bold; Quy tắc CSS, làm cho văn bản của phần tử được in đậm.
JavaScript Scratchpad
Scratchpad cũng đã thấy một bản cập nhật với Firefox 10 và hiện có chứa tính năng đánh dấu cú pháp. Bạn có thể nhập mã JavaScript để chạy trên trang hiện tại.
Khi bạn có, hãy nhấp vào Hành hình menu và chọn Chạy. Mã chạy trong tab hiện tại.
Web Console
Bảng điều khiển Web thay thế Bảng điều khiển Lỗi cũ, không được dùng nữa và sẽ bị xóa trong phiên bản Firefox trong tương lai.
Bảng điều khiển hiển thị bốn loại thông báo khác nhau, bạn có thể chuyển đổi chế độ hiển thị - yêu cầu mạng, thông báo lỗi CSS, thông báo lỗi JavaScript và thông báo nhà phát triển web.
Thông điệp của nhà phát triển web là gì? Đó là một thông báo được in tới đối tượng window.console. Ví dụ, chúng tôi có thể chạy window.console.log (“Xin chào Thế giới”); Mã JavaScript trong Scratchpad để in thông báo của nhà phát triển tới bảng điều khiển. Các nhà phát triển web có thể tích hợp các thông báo này vào mã JavaScript của họ để giúp gỡ lỗi.
Làm mới trang và bạn sẽ thấy các yêu cầu mạng đã tạo và các thông báo khác.
Sử dụng hộp tìm kiếm để lọc các tin nhắn; nhấp vào yêu cầu nếu bạn muốn xem thêm chi tiết.
Kể từ Firefox 10, Bảng điều khiển Web có thể hoạt động song song với Trình kiểm tra trang. Biến $ 0 đại diện cho đối tượng đang được chọn trong trình kiểm tra. Vì vậy, ví dụ: nếu bạn muốn ẩn đối tượng đang được chọn, bạn có thể chạy $ 0.style.display = ”không có” trong bảng điều khiển.
Nếu bạn muốn tìm hiểu thêm về cách sử dụng bảng điều khiển và các chức năng tích hợp của nó, hãy xem Trang Web Console trên trang web Mạng nhà phát triển của Mozilla.
Nhận thêm công cụ
Các Nhận thêm công cụ tùy chọn đưa bạn đến bộ sưu tập tiện ích bổ sung Hộp công cụ của nhà phát triển web trên trang web Tiện ích bổ sung của Mozilla. Nó chứa một số tiện ích bổ sung tốt nhất cho nhà phát triển web , bao gồm Firebug và Thanh công cụ dành cho nhà phát triển web.
Nếu bạn đã sử dụng Firefox trong một vài năm, bạn có thể nhớ Trình kiểm tra DOM. Kể từ đó, các công cụ dành cho nhà phát triển tích hợp của Firefox đã trải qua một chặng đường dài.
