Cách sử dụng các công cụ phát triển web của Firefox
Trình đơn Web Developer 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ụ Inspector hoàn toàn mới và Scratchpad được cập nhật.
Các tính năng dành cho nhà phát triển web mới của Firefox, kết hợp với các tiện ích bổ sung dành cho nhà phát triển web tuyệt vời như Fireorms và Thanh công cụ phát triển web, biến Firefox thành một trình duyệt lý tưởng cho các nhà phát triển web. Tất cả các công cụ có sẵn trong Web Developer trong menu của Firefox.
Thanh tra trang
Kiểm tra một yếu tố cụ thể bằng cách nhấp chuột phải vào nó và chọn Thanh tra (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 một thanh công cụ ở dưới cùng của màn hình, mà bạn có thể sử dụng để kiểm soát thanh tra. Phần tử được chọn của bạn sẽ được tô sáng 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 yếu tố mới, bấm vào Thanh tra trên thanh công cụ, di chuột qua trang và nhấp vào phần tử của bạn. Firefox làm nổi bật thành phần dưới con trỏ của bạn.
Bạn có thể điều hướng giữa các phần tử cha và con bằng cách nhấp vào mẩu bánh mì trên thanh công cụ.
Thanh tra HTML
Nhấn vào HTML nút để xem mã HTML của phần tử hiện đượ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 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.
Thanh tra CSS
Nhấn vào Phong cách nút để xem các quy tắc CSS được áp dụng cho thành phần được chọn.
Ngoài ra còn có bảng thuộc tính CSS - chuyển đổi giữa hai 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 CSS của phần tử một cách nhanh chóng từ bảng Rules. Bỏ chọn bất kỳ hộp kiểm nào để hủy kích hoạt quy tắc, nhấp 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 thành phần ở đầu ngăn. Ở đây, tôi đã thêm font-weight: in đậm; Quy tắc CSS, làm cho văn bản của phần tử được in đậm.
Bàn phím JavaScript
Scratchpad cũng đã thấy một bản cập nhật với Firefox 10 và hiện có tô sáng cú pháp. Bạn có thể nhập mã JavaScript để chạy trên trang hiện tại.
Một khi bạn có, bấm vào Thi hành chọn và chọn Chạy. Mã chạy trong tab hiện tại.
Bảng điều khiển web
Bảng điều khiển Web thay thế Bảng điều khiển Lỗi cũ đã bị phản đối 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 mà bạn có thể thay đổi mức độ hiển thị của - 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 của nhà phát triển web.
Thông điệp nhà phát triển web là gì? Đó là một thông điệp được in ra đối tượng window.console. Ví dụ: chúng ta có thể chạy window.console.log (Nhật ký Hello World); Mã JavaScript trong Scratchpad để in thông báo dành cho nhà phát triển đến 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 được tạo và các tin nhắn 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 hiện được chọn trong thanh tra. Vì vậy, ví dụ, nếu bạn muốn ẩn đối tượng hiện được chọn, bạn có thể chạy $ 0.style.display = không ai 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 Bảng điều khiển web trên trang web Mạng của 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 sẽ đưa bạn đến bộ sưu tập bổ trợ Hộp công cụ của Nhà phát triển Web trên trang web Bổ trợ Mozilla. Nó chứa một số tiện ích bổ sung tốt nhất dành cho nhà phát triển web, bao gồm Fireorms và Thanh công cụ dành cho nhà phát triển web.
Nếu bạn đã sử dụng Firefox được vài năm, bạn có thể nhớ Trình kiểm tra DOM. Các công cụ phát triển tích hợp của Firefox đã đi một chặng đường dài kể từ đó.
